javascript - XMLHttpRequest 始终调用 "load"事件监听器，即使响应具有错误状态

Question

我正在使用 FormData 通过 ajax 上传文件。上传工作正常，但问题是“错误”回调永远不会被调用。即使我的 HTTP 响应是 500 内部服务器错误(为了测试这一点，我调整服务器以响应 500)，也会调用“load”回调。

function upload_image() {
    var form = document.getElementById('upload_image_form');
    var formData = new FormData(form);

    var xhr = new XMLHttpRequest();
    xhr.addEventListener("load", function(e) {
        alert("Success callback");
    }, false);
    xhr.addEventListener("error", function(e) {
        alert("Error callback");
    }, false);
    xhr.open("POST", "/upload_image");
    xhr.send(formData);
}

有什么想法吗？我正在 Chrome 上对此进行测试。

Answer 1

此设置应该可以更好地满足您的需求:

var req = new XMLHttpRequest();
req.open('POST', '/upload_image');
req.onreadystatechange = function (aEvt) {
  if (req.readyState == 4) {
     if(req.status == 200)
      alert(req.responseText);
     else
      alert("Error loading page\n");
  }
};
req.send(formData);

在您的代码中，永远不会调用错误回调，因为它仅由网络级错误触发，它会忽略 HTTP 返回代码。