Handsontable自動保存 - ajaxが定義されていません

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; 
}