AJAX XHR 请求 onReadyStateChange 事件顺序和次数说明答案

【问题标题】：AJAX XHR request onReadyStateChange events order and number of times clarificationAJAX XHR 请求 onReadyStateChange 事件顺序和次数说明
【发布时间】：2016-11-18 01:02:42
【问题描述】：

我正在学习并尝试使用 Python-Flask 和 Javascript 编写一个简单的股票报价工具。

我特别想学习 plain Javascript。我的代码正在运行，但我不明白的是，当我在观看开发人员控制台时，在获得成功的 console.log(response) 之前打印了 3 条错误消息。

是否只是代码在响应返回之前循环了 3 次，因此在最终返回 200 状态之前每次都记录了“错误”？有人可以向我解释一下还是给我指出一篇好文章/帖子？

我的事件监听器：

document.getElementById("btn_quote").addEventListener("click", getQuote);

ajax 调用：

function getQuote(e){
    e.preventDefault();
    var ticker = document.getElementById("ticker").value
    var shares = document.getElementById("shares").value
    var url = "/quote/"+ticker+"/"+shares

    // Fetch the latest data.
    var request = new XMLHttpRequest();
    request.onreadystatechange = function() {
        if (request.readyState === XMLHttpRequest.DONE) {
            if (request.status === 200) {
                var response = JSON.parse(request.response);
                console.log(response);
            }
        } else {
            // TODO, handle error when no data is available.
            console.log('ERROR');
            return false;
        }
    };
        request.open('GET', url);
        request.send();
}

【问题讨论】：

它会抛出什么错误？
它不会引发真正的错误。它触及了我要求它登录到控制台的代码部分，这样我就可以了解发生了什么console.log('ERROR');
问题是，你点击 DONE 一次......如果状态是 200 一切都很好，如果不是，那么你什么都不做......你的else 代码放错了位置，那就是唯一的问题

标签： javascript ajax

【解决方案1】：

它不是返回单独的 HTTP 状态代码，而是返回不同的就绪状态。

更改您的console.log("ERROR");。致console.log(request.readyState);。

然后你会看到它报告了什么以及为什么。

【讨论】：

好的。现在我明白了。谢谢。

【解决方案2】：

我认为您应该使用响应的实际值检查您的 readyState 值。供您参考，以下是readyState 的可能值：

0: request not initialized 
1: server connection established
2: request received 
3: processing request 
4: request finished and response is ready

所以你基本上可以在你的情况下检查它是 4：

var request = new XMLHttpRequest();
    request.onreadystatechange = function() {
        if (request.readyState === 4) {
            //response statements
        } else {
            //error statements
        }
    };

【讨论】：

很高兴它帮助了你:)
XMLHttpRequest.UNSENT === 0, XMLHttpRequest.OPENED === 1, XMLHttpRequest.HEADERS_RECEIVED ===2, XMLHttpRequest.LOADING === 3, XMLHttpRequest.DONE === 4 - 所以说实话，我看不出这是如何回答问题的
一些浏览器不理解 XMLHttpRequest.DONE 属性，因此，答案

【解决方案3】：

基本上，ajax 调用将收到以下事件的通知，称为readyStateChange 事件。

在大多数情况下，您通常会根据连接速度获得 4 次就绪状态更改（在极少数情况下，如果非常快，则只有一次），您应该检查它是否为 4，这意味着现在响应完成了。

要检查请求是否成功，您应该检查request.status === 200 表示成功，并且可以检查其他http status code 是否有错误，如404、500 等。

document.getElementById("btn_quote").addEventListener("click", getQuote);
document.getElementById("btn_quote_error").addEventListener("click", getQuoteError);

function getQuote(e){
    e.preventDefault();
    var ticker = document.getElementById("ticker").value;
    var shares = document.getElementById("shares").value;
    //var url = "/quote/" + ticker + "/" + shares;
    var url = 'http://stackoverflow.com/';

    // Fetch the latest data.
    var request = new XMLHttpRequest();
    request.onreadystatechange = function() {
      console.log(request.readyState);
        if (request.readyState === XMLHttpRequest.DONE) {
            console.log(request.status);
            if (request.status === 200) {
                //var response = JSON.parse(request.response);
                //console.log(response);
            }
        } 
        //else {
            // TODO, handle error when no data is available.
            //console.log('ERROR');
            //return false;
        //}
    };
        request.open('GET', url, true);
        request.send();

  
}

function getQuoteError(e){
    e.preventDefault();
    var ticker = document.getElementById("ticker").value;
    var shares = document.getElementById("shares").value;
    //var url = "/quote/" + ticker + "/" + shares;
    var url = 'http://stackoverflow404.com/';

    // Fetch the latest data.
    var request = new XMLHttpRequest();
    request.onreadystatechange = function() {
      console.log(request.readyState);
        if (request.readyState === XMLHttpRequest.DONE) {
            console.log(request.status);
            if (request.status === 200) {
                //var response = JSON.parse(request.response);
                //console.log(response);
            }
        } 
        //else {
            // TODO, handle error when no data is available.
            //console.log('ERROR');
            //return false;
        //}
    };
        request.open('GET', url, true);
        request.send();

  
}

<input type="text" id="ticker"/>
<input type="text" id="shares"/>
<input type="button" id="btn_quote" value="Get Quote" />
<input type="button" id="btn_quote_error" value="Get Quote Error" />

【讨论】：