从一个简单的例子看ajax的执行过程

最新推荐文章于 2022-08-02 20:30:03 发布

iteye_608

最新推荐文章于 2022-08-02 20:30:03 发布

阅读量102

点赞数

分类专栏： AJAX 文章标签： Ajax JavaScript HTML Microsoft ViewUI

AJAX 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这个例子虽然简单，但是可以通过debug模式来仔细研究一下ajax在执行过程中的执行顺序，页面加载时会先去执行handleStateChange(),但是执行的时候不会进到方法内，当点击按钮执行到xmlHttp.onreadystatechange = handleStateChange;时，程序不会去执行handleStateChange()这个方法，执行open后才会再次进入handleStateChange()这个方法,执行send后会再次进入handleStateChange()这个方法,这个时候xmlHttp.readyState会一直往后执行，一直到状态4为止，这时数据就返回了。每当 XMLHTTP 对象的状态发生改变时，handleStateChange() 函数就会执行。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Simple XMLHttpRequest</title>
        <script type="text/javascript">
            var xmlHttp;
            function createXMLHttpRequest(){
                if (window.ActiveXObject) {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                else 
                    if (window.XMLHttpRequest) {
                        xmlHttp = new XMLHttpRequest();
                    }
            }
            
            function startRequest(){
                createXMLHttpRequest();//创建XMLHttpRequest
                xmlHttp.onreadystatechange = handleStateChange;
                xmlHttp.open("GET", "simpleResponse.txt", true);
                xmlHttp.send(null);
            }
            
            function handleStateChange(){
                if (xmlHttp.readyState == 4) {
                    if (xmlHttp.status == 200) {
                        document.getElementById("test").innerHTML = xmlHttp.responseText;//返回simpleRespose.txt中的内容
                    }
                }
            }
        </script>
    </head>
    <body>
        <form action="#">
            <input type="button" value="Start Basic Asynchronous Request" οnclick="startRequest();"/>
            <div id="test">
            </div>
        </form>
    </body>
</html>