Handsontable 자동 저장 - 아약스가 정의되지 않았습니다.

Question

코드를 Handsontable official documentation에서 JSFiddle으로 복사했습니다. 이것은 손댈 수 없다 0.34.5.

크롬 콘솔에 오류가 발생했습니다. "ajax가 정의되지 않았습니다." 다음과 같이

코드, handsontable.full.min.js 및 handsontable.full.min.css 사전은로드

HTML :

<div class="ajax-container"> 
    <div class="controls"> 
    <button name="load" id="load" class="intext-btn">Load</button> 
    <button name="save" id="save" class="intext-btn">Save</button> 
    <label> 
     <input type="checkbox" name="autosave" id="autosave" checked="checked" autocomplete="off">Autosave</label> 
    </div> 
    <pre id="example1console" class="console">Click "Load" to load data from server</pre> 
    <div id="example1" class="hot handsontable"></div> 
</div> 

스크립트 :

var 
    $$ = function(id) { 
    return document.getElementById(id); 
    }, 
    container = $$('example1'), 
    exampleConsole = $$('example1console'), 
    autosave = $$('autosave'), 
    load = $$('load'), 
    save = $$('save'), 
    autosaveNotification, 
    hot; 

hot = new Handsontable(container, { 
    startRows: 8, 
    startCols: 6, 
    rowHeaders: true, 
    colHeaders: true, 
    afterChange: function(change, source) { 
    if (source === 'loadData') { 
     return; //don't save this change 
    } 
    if (!autosave.checked) { 
     return; 
    } 
    clearTimeout(autosaveNotification); 
    ajax('scripts/json/save.json', 'GET', JSON.stringify({ 
     data: change 
    }), function(data) { 
     exampleConsole.innerText = 'Autosaved (' + change.length + ' ' + 'cell' + (change.length > 1 ? 's' : '') + ')'; 
     autosaveNotification = setTimeout(function() { 
     exampleConsole.innerText = 'Changes will be autosaved'; 
     }, 1000); 
    }); 
    } 
}); 

Handsontable.dom.addEvent(load, 'click', function() { 
    ajax('scripts/json/load.json', 'GET', '', function(res) { 
    var data = JSON.parse(res.response); 

    hot.loadData(data.data); 
    exampleConsole.innerText = 'Data loaded'; 
    }); 
}); 

Handsontable.dom.addEvent(save, 'click', function() { 
    // save all cell's data 
    ajax('scripts/json/save.json', 'GET', JSON.stringify({ 
    data: hot.getData() 
    }), function(res) { 
    var response = JSON.parse(res.response); 

    if (response.result === 'ok') { 
     exampleConsole.innerText = 'Data saved'; 
    } else { 
     exampleConsole.innerText = 'Save error'; 
    } 
    }); 
}); 

Handsontable.dom.addEvent(autosave, 'click', function() { 
    if (autosave.checked) { 
    exampleConsole.innerText = 'Changes will be autosaved'; 
    } else { 
    exampleConsole.innerText = 'Changes will not be autosaved'; 
    } 
}); 

Answer 1

그들이 사용하고있는 ajax 함수의 코드는 다소 단순합니다. XMLHttpRequest 주위의 래퍼입니다.

참고 : docs 페이지에서 devtools를 통해 ajax.toString()을 실행하면됩니다. 외부 함수를 참조하지 않으므로 그대로 작동합니다.

function ajax(url, method, params, callback) { 
    var obj; 

    try { 
    obj = new XMLHttpRequest(); 
    } catch (e) { 
    try { 
     obj = new ActiveXObject("Msxml2.XMLHTTP"); 
    } catch (e) { 
     try { 
     obj = new ActiveXObject("Microsoft.XMLHTTP"); 
     } catch (e) { 
     alert("Your browser does not support Ajax."); 
     return false; 
     } 
    } 
    } 
    obj.onreadystatechange = function() { 
    if (obj.readyState == 4) { 
     callback(obj); 
    } 
    }; 
    obj.open(method, url, true); 
    obj.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 
    obj.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    obj.send(params); 

    return obj; 
}