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

Question

如果我的 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);
    };

Answer 1

不修改函数addUser()，似乎唯一可行的方法是修改XMLHttpRequest原型，正如this answer所建议的那样，为readystatechange 事件（使用addEventListener()）。此外，onerror 函数可以被覆盖以检测错误何时导致XMLHttpRequest 事务失败。

请记住，这会影响页面上的 ALL 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
    }
}

这保存在this updated plunker 中，但似乎不太可能产生除 200 以外的响应代码。要测试失败的 XHR 请求，请尝试 this PHPfiddle，其中所有其他 XHR 请求都会产生500 的响应代码.

Answer 2

我猜这个问题是要求您在 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()。

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

Answer 3

您可以检查 xhr 状态，如果不是 200 则表示不成功， 然后你可以抛出 responseText。

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