如果我的Ajax调用不成功,我想显示一条错误消息。很简单,但是我不能修改Ajax函数。我创建了一个onClick侦听器,当我的AJAX调用成功时,它会执行一些操作。如果通话失败,我只想做点什么。
因此,如果我决定添加:
if (xhr.status !== 200) {
//Error Message here
}
它会放在哪里?
JSFiddle Example Here
我的html是:
<div id="test-form">
<h2>Add a User:</h2>
<label for="Username:">
<input id="username" type="text" name="username" placeholder="Type username here">
</label>
<label for="Email:">
<span id='result'></span>
<input id="email" type="email" name="email" placeholder="email">
</label>
<button id="myButton">add user</button>
<h2 class="clear">Users:</h2>
<ul id="users"></ul>
</div>
我的代码是:
var el = document.getElementById("myButton");
el.onclick = function() {
addUser(username, email, onSuccess);
}
function onSuccess(result){
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var username = document.getElementById("username").value;
var email = document.getElementById("email");
var message = document.getElementById("result").classList;
document.getElementById("users").innerHTML+= '<li>' + username +'</li>';
if (!filter.test(email.value)) {
document.getElementById('result').innerHTML+='Not a valid email';
email.focus;
return false;
} else {
message.add("hide");
}
}
// Do not modify this function. Add user service wrapper.
function addUser(username, email, callback) {
var xhr = new XMLHttpRequest();
var response;
var success = (!!Math.round(Math.random()));
if (!success){
response = JSON.stringify({
success: success,
error: "Oups, something went wrong!"
});
} else {
response = JSON.stringify({
success: success,
user: {
username: username,
email: email
}
});
}
xhr.open("POST", "/echo/json/");
xhr.onload = function () {
if (xhr.status === 200) {
callback(JSON.parse(xhr.responseText));
}
}
xhr.send("json=" + response);
};
最佳答案
在不修改功能addUser()的情况下,似乎唯一可行的方法是修改XMLHttpRequest原型(prototype)(如this answer所建议),以为readystatechange事件添加事件侦听器(使用addEventListener())。另外,可以重写onerror函数以检测错误何时导致XMLHttpRequest事务失败。
请记住,这会影响页面上的所有 XMLHttpRequests!
var lastResponseCode, oldSendFunction;
// store the native send()
oldSendFunction = XMLHttpRequest.prototype.send;
// override the native send()
XMLHttpRequest.prototype.send = function() {
//subscribe to ready state change events
this.addEventListener("readystatechange", function(readyEvent) {
//store the response code, to be checked later
lastResponseCode = readyEvent.target.status;
});
// call the native send()
oldSendFunction.apply(this, arguments);
}
function onSuccess(result) {
if (lastResponseCode == 200) {
//last request was successful
//...
}
else {
//other response was received - could have been 2xx,3xx,4xx,5xx
}
}
这已保存在this updated plunker中,但似乎不太可能会产生200以外的响应代码。要测试失败的XHR请求,请尝试this PHPfiddle,其中每隔XHR请求将产生响应代码
500
。