Handsontable 自动保存 - 未定义 ajax

Question

我将代码从 Handsontable official documentation 复制到 JSFiddle。这是可操作的 0.34.5。

我在 chrome 控制台中遇到错误： “未定义 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的一个包装。

注意：我只是通过他们的文档页面上的 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;
}