这个例子虽然简单,但是可以通过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" onclick="startRequest();"/>
                        <div id="test">
                        </div>
                </form>
        </body>
</html>