Javascript AJAX代码顺序'；差异

我看到W3school中的大多数AJAX示例如下所示：

function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            document.getElementById("demo").innerHTML = xhttp.responseText; //get response
        }
    };
    xhttp.open("GET", "ajax_info.txt", true);
    xhttp.send(); //send request
}

function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", "ajax_info.txt", true);
    xhttp.send(); //send request
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            document.getElementById("demo").innerHTML = xhttp.responseText; //get response
        }
    };
}

我更改了代码的顺序，如下所示：

function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            document.getElementById("demo").innerHTML = xhttp.responseText; //get response
        }
    };
    xhttp.open("GET", "ajax_info.txt", true);
    xhttp.send(); //send request
}

function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", "ajax_info.txt", true);
    xhttp.send(); //send request
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            document.getElementById("demo").innerHTML = xhttp.responseText; //get response
        }
    };
}

它似乎也能起作用，我的大脑会思考第二个逻辑

---

所以我的问题是：这个AJAX代码的顺序有什么规则吗？在任何情况下，上述2个示例会有什么不同吗？

AJAX请求是异步处理的，因此回调的定义顺序无关紧要

我已经用一些注释注释了你的代码。执行顺序（在这种情况下）为：

步骤1（创建XHR对象）、2（打开请求）和3（发送请求）必须按顺序进行。步骤4可以在对象创建之后的任何时间发生，只要是在网络响应或状态更改发生之前

阅读JS中的AJAX和异步回调将有助于更好地理解这一点。你可以

函数loadDoc（）{
//1.创建XHR对象
var xhttp=newXMLHttpRequest（）；
//2.定义请求参数
open（“GET”，“ajax\u info.txt”，true）；
//3.触发请求
xhttp.send（）；
//4.定义状态更改的回调
xhttp.onreadystatechange=函数（）{
//5.每次请求的状态更改时都会执行此代码
如果（xhttp.readyState==4&&xhttp.status==200）{
//6.此代码仅在readyState为4（请求完成）且http状态为200（成功）时执行
document.getElementById（“demo”）.innerHTML=xhttp.responseText；//获取响应
}
};
}

不，没有区别。没有区别，但最好让你的大脑思考为什么第一个逻辑会起作用——因为它实际上就是这样起作用的：你设置了以后执行的事情，然后开始行动，当操作结束时，将调用处理程序函数。不要忘记提到步骤4和步骤5之间发生的事情。