当Ajax调用在JavaScript中未成功时，如何编写错误消息？

如果我的Ajax调用不成功，我想显示一条错误消息。很简单，但我无法修改Ajax函数。我创建了一个onClick侦听器，当我的AJAX调用成功时，它会执行一些操作。我只想在电话不成功时做点什么

因此，如果我决定添加：

 if (xhr.status !== 200) {
   //Error Message 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);
    };

var el=document.getElementById（“myButton”）；
el.onclick=函数（）{
addUser（用户名、电子邮件、onSuccess）；
}
函数onSuccess（结果）{
变量过滤器=/^（[a-zA-Z0-9\.\-]）+\@（[a-zA-Z0-9\-]）+\）+（[a-zA-Z0-9]{2,4}）+$/；
var username=document.getElementById（“用户名”）.value；
var email=document.getElementById（“电子邮件”）；
var message=document.getElementById（“结果”）.classList；
document.getElementById（“用户”）.innerHTML+='
'+username+'
'；
如果（！filter.test（email.value））{
document.getElementById（'result'）。innerHTML+='不是有效的电子邮件'；
email.focus；
返回false；
}否则{
添加（“隐藏”）；
}
}
//请勿修改此功能。添加用户服务包装器。
函数addUser（用户名、电子邮件、回调）{
var xhr=new XMLHttpRequest（）；
var反应；
var success=（！！Math.round（Math.random（））；
如果（！成功）{
response=JSON.stringify({
成功：成功，
错误：“嗯，出了点问题！”
});
}否则{
response=JSON.stringify({
成功：成功，
用户：{
用户名：用户名，
电邮：电邮
}
});   
}
xhr.open（“POST”，“/echo/json/”；
xhr.onload=函数（）{
如果（xhr.status==200）{
回调（JSON.parse（xhr.responseText））；
}
}
xhr.send（“json=”+响应）；
};

您可以检查xhr状态，当它不是200时，则不成功， 然后你可以抛出responseText

if (xhr.status !== 200)
    throw(xhr.responseText);

---

在不修改函数addUser（）的情况下，似乎唯一可行的方法是修改原型，如所建议的，为readystatechange事件添加事件侦听器（使用）。此外，可以重写该函数以检测错误何时导致事务失败

请记住，这将影响页面上的所有xmlhttprequest

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

---

这已保存在中，但似乎不太可能生成除200以外的响应代码。要测试失败的XHR请求，请尝试，其他每个XHR请求都会产生一个响应代码

500

，我想这个问题是要求您在AJAX请求返回错误且不允许修改addUser（）时显示一条错误消息。如果您注意查看addUser（）函数

addUser（用户名、电子邮件、回调）

在该函数内，代码显示它们模拟随机故障情况，如下所示：

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

所以我认为您可以检查回调函数的响应。响应将随机显示错误或成功。因此，您根本不需要修改addUser（）

---

那么您不允许修改“addUser”函数？在这种情况下，您会有点卡住，因为它没有费心处理错误条件。您需要修改xhr.onload回调，以便在出现错误（即非200响应）时实际执行某些操作。如果这是最简单的解决方案，为什么不允许您修改此函数？如果您所做的只是添加一些额外的错误处理功能，您就不会破坏依赖于它的其他代码。@Mariton您基本上无法从addUser（）函数外部的代码为ajax调用分配侦听器，因为由于变量作用域，您无法访问该函数中的XHR对象，该对象不被该函数公开。有人对下面关于这里的解决方案的一个答案发表了评论：这是一个可能的解决方案，涉及处理XHR原型对象。萨莫内拉，如果你读了这个问题，OP会问在哪里放置一些代码来检查状态是否不是200，这意味着你的建议不会特别有用。问题是OP说不能将此代码放在addUser函数中，addUser函数是代码中

xhr

对象实际位于作用域中并且可以像这样访问的唯一位置。换句话说，问不可能的事。@Mariton：环顾四周后，似乎其他评论（）中发布的链接可能是你在这里最后最好的希望。修改JavaScript本身使用的XHR对象似乎有点冒险，但从架构上来说，这个概念至少是合理的。因为你不能修改代码，你需要修改代码使用的依赖项。愚蠢的问题，但是我应该把响应文本放在哪里？@Mariton只要把它放在if（xhr.status==200）{…}@sagar记住，如果不修改这个函数，我就不能修改addUser函数。你需要观察所有的ajax调用，如下面的帖子；这很好，但请记住，我不能修改addUser函数。看看我的小提琴

function onSuccess(result){
      //check your console to see what is the result first, so you can know how it works
      console.log(result);

      if(result.success){
       // do something
       }else{
       // display error message
   }
}