-1

我对 Ajax 的调用流程有点困惑，有人可以帮我吗？

我的 HTML：

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="myFunction()">Change Content</button>

我的 JavaScript：

var xmlhttp;

function loadXMLDoc(url, cfunc) {
    alert("4");
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    alert("5");
    xmlhttp.onreadystatechange = cfunc;
    alert("6");
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

function myFunction() {
    alert("1");
    loadXMLDoc("ajax_info.txt", function() {
        alert("2");
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            alert("3");
            document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
        }
    });
}​

​</p>

根据我的警报框顺序应该是

1 2 3 4 5 6

但它是

1456222223

有人可以解释一下为什么该函数被称为 1'st。在参数值准备好之前，我的印象是无法调用该函数。

4

2 回答 2

2

loadXMLDoc(...)是一个普通的函数调用。
它立即执行。

您传递给它的回调（包含alert("2")）仅在调用它时执行；即，当 XMLHTTPRequest 引发 onreadystatechanged 时。

onreadystatechanged 会针对不同的状态更改多次触发，如您在readyState属性中所见。

于 2012-04-23T15:25:34.790 回答
1

因为，在触发第一个警报后，您会立即调用loadXMLDoc，并将匿名函数传递给它（其中包含警报“2”和“3”。请注意，您没有执行此函数；只是传递对它的引用，所以loadXMLDoc可以稍后执行。

这就解释了为什么你首先看到“1 4 5 6”。

xmlhttp.onreadystatechange = cfunc;将我们传递给的匿名函数设置loadXMLDoc为onreadystatechange处理程序。在一个 AJAX 请求期间onreadystatechange执行多次；每次浏览器确定请求的状态已更改（请注意，readyState每次发生这种情况时，AJAX 请求的值不一定会更改）。

这解释了为什么您会看到多次输出“2”。

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    alert("3");
    document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}

在onreadystatechange处理程序中，您正在检查readyStateis4和statusis 是否为 200。A readyStateof 4 表示请求已完成，检查是否status == 200检查HTTP 响应代码。

这就是为什么你最后看到“3”的原因；因为它仅在请求完成时执行（由于if语句中的条件）。

有关更多信息，您可能希望查看有关发出 AJAX 请求的MDC 文章。

于 2012-04-23T15:29:00.463 回答