Question

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

根据我的说法，警告框序列应为

1 2 3 4 5 6

但它是

1456222223

有人可以解释一下为什么函数被称为1'st。我在印象中，直到参数值准备就绪，无法调用该函数。

Answer 1

loadXMLDoc(...)是正常的函数调用它立即执行。

传递它的回调（包含alert("2")）仅在调用它时执行;也就是说，当XMLHTTPRequest引发onreadystatechanged。

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

Answer 2

因为，在触发第一个警报后，您立即调用loadXMLDoc，传递匿名函数（包含警报“2”和“3”）。注意您'不执行此功能; 只是传递对它的引用，因此loadXMLDoc可以在以后执行。

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

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

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

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

在onreadystatechange处理程序中，您要检查readyState是否为4而status是否为200. readyState为4表示请求已完成，并检查status == 200是否检查HTTP response code。

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

有关详细信息，您可能希望查看有关制作AJAX请求的MDC article。

了解Ajax调用流程

2 个答案: