一个简单的例子教你明白XMLHTTPRequest的原理

一个简单的例子教你明白XMLHTTPRequest的原理

首先先简单的介绍下XMLHTTPRequest对象，XMLHTTPRequest对象可以在不刷新整个页面的前提下，实现局部刷新网页，jQuery中的Ajax就是基于此原理而开发的。那废话不多说，我们切入正题。
首选先创建一个Button，里面有我们的响应事件

<input type="button" value="异步调用" onclick="XMLRq();" />

这里响应事件函数是XMLRq()，那XMLRq()的函数代码片段如下

  function XMLRq()
        {
            var xmlHttpreq = null;
            if (window.ActiveXObject)
            {
                xmlHttpreq = new ActiveXObject("Microsoft.XMLHTTP");
                //alert("xmlrequest对象创建成功")
            }
            else if (window.XMLHttpRequest) //除了IE5与IE6以外的浏览器
            {
                xmlHttpreq = new XMLHttpRequest();
                //alert("c");
            }
            if (xmlHttpreq != null) {
                xmlHttpreq.open("GET", "Ajax_response1.aspx", true);
                xmlHttpreq.onreadystatechange = setCallback;
                xmlHttpreq.send(null);

            }
            function setCallback()
            {
                if (xmlHttpreq.readyState == 4)
                {
                    if (xmlHttpreq.status == 200)
                    {
                        document.getElementById("getext").innerHTML = xmlHttpreq.responseText;
                    }
                }
            }
        }

我们来依次解读下代码，为什么要有个判断window.ActiveXObject，跟window.XMLHttpRequest呢，因为ActiveXObject对象支持的是ＩＥ５根ＩＥ６浏览器，而window.XMLHttpRequest对象支持的是除了其之外的浏览器都可以使用。
　　我们这边采用open(“method”,”url”,boolean)方法来指定服务器的URL，设置boolean为true是因为，这里采用了异步调用的方式。好了，既然异步调用，那异步双方并没有共同的时钟，这时候，接收方需要知道发送方什么时候给它发信息。因此这行代码必不可少
　　

xmlHttpreq.onreadystatechange = setCallback;

这里凭借它的因为也能理解其意思，onreadystatechange,翻译一下就是当初始的状态改变的时候。XMLHTTPRequest有个readystate值，当它的值改变的时候，那接收方就知道要接受信息，这里设置的回调函数是setCallback(),所以当请求加载完成，即readystate值为4，并且响应成功，这里HTTP的status为200时，说明我们已经成功响应了该按钮事件，服务器已经回传了信息。