[英]XMLHttpRequest is always calling “load” event listener, even when response has error status
I'm using FormData to ajax a file upload. 我正在使用FormData来aj文件上传。 The upload works, but the problem is that the "error" callback is never invoked. 上传有效,但问题是永远不会调用“错误”回调。 Even when my HTTP response is a 500 internal server error (to test this I tweak server to respond with 500), the "load" callback is invoked. 即使我的HTTP响应是500内部服务器错误(为了测试这个我调整服务器以500响应),调用“加载”回调。
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);
}
Any ideas? 有任何想法吗? I'm testing this on Chrome. 我在Chrome上测试了这个。
This setup should work better for your needs: 此设置应该更好地满足您的需求:
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);
In your code error callback is never called because it is only triggered by network-level errors, it ignores HTTP return codes. 在您的代码错误中,永远不会调用回调,因为它仅由网络级错误触发,它会忽略HTTP返回码。
The load event is called whenever the server responds with a message. 只要服务器响应消息,就会调用load事件。 The semantics of the response don't matter; 响应的语义无关紧要; what's important is that the server responded (in this case with a 500 status). 重要的是服务器响应(在这种情况下具有500状态)。 If you wish to apply error semantics to the event, you have to process the status yourself. 如果您希望对事件应用错误语义,则必须自己处理状态。
function get(url) {
return new Promise(function(succeed, fail) {
var req = new XMLHttpRequest();
req.open("GET", url, true);
req.addEventListener("load", function() {
if (req.status < 400)
succeed(req.responseText);
else
fail(new Error("Request failed: " + req.statusText));
});
req.addEventListener("error", function() {
fail(new Error("Network error"));
});
req.send(null);
});
}
code from EJS by the example code it is clear that network error has no response, it trigger error event. 来自EJS的代码通过示例代码很清楚,网络错误没有响应,它会触发错误事件。 response trigger load event and you have to decide what to do with the response status 响应触发器加载事件,您必须决定如何处理响应状态
Expanding on @rich remer's answer, here's how you could access the status yourself: 扩展@rich remer的答案,以下是您可以自己访问状态的方法:
function upload_image() {
var form = document.getElementById('upload_image_form');
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", function(e) {
if(e.currentTarget.status < 400)
alert("Load callback - success!");
else
alert("Load callback - error!");
}, false);
xhr.addEventListener("error", function(e) {
alert("Error callback");
}, false);
xhr.open("POST", "/upload_image");
xhr.send(formData);
}
Please note accessing of the e.currentTarget.status
property of the response event ( e
). 请注意访问响应事件( e
)的e.currentTarget.status
属性。 Looks like the status is actually available via any of e.{currentTarget,target,srcElement}.status
- I'm not sure which one should be used as the best practice, though. 看起来状态实际上可以通过e.{currentTarget,target,srcElement}.status
任何一个获得 - 但我不确定哪一个应该被用作最佳实践。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.