AJAX无刷新请求原理

本篇主要讲述AJAX无刷新请求原理，即浏览器网页使用AJAX访问服务器并返回数据的整个请求过程即实现原理。

 

请求的过程如下： 

1、创建XMLHttpRequest对象，对于不同浏览器，创建XMLHttpRequest对象的方法是不同的，具体查看示例代码

2、为XMLHttpRequest对象准备请求内容

xmlhttp.open(method,URL,async,user,password);

method:请求方式(POST、GET)

URL:请求地址   

★open方法是异步的  

3、为XMLHttpRequest对象注册onreadystatechange监听事件，来监听服务器返回的状态和返回的数据

4、 正式发送请求，并通过onreadystatechange监听服务器的响应

 

示例代码如下： 

    <script type="text/javascript">
        function functionName() {
            //兼容浏览器的创建XMLHttp对象的判断方法
            var xmlhttp;
            //IE浏览器创建XMLHttpRequest对象
            if (window.ActiveXObject) {
                try {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e) {
                    xmlhttp = new ActiveXObject("msxml2.XMLHTTP");
                }
            }
            //非IE浏览器创建XMLHttpRequest对象
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            }
            //如果创建对象失败，则报异常并返回
            if (!xmlhttp) {
                alter("创建XMLHTTP对象异常!");
                return false;
            }

            /*
            xmlhttp.open(method,URL,async,user,password);
            method:请求方式,URL:请求地址
            准备向服务器的指定页面(RequestPage.ashx)发起POST或GET请求(GET有缓存，POST没有缓存，建议用POST)，
            加上一个参数"&ts=" + new Date()，使每次请求都不一样，避免由于缓存导致无法更新
            */
            xmlhttp.open("POST", "RequestPage.ashx?id=1" + "&ts=" + new Date(), false);//准备请求

            /*
            注册onreadystatechange监听事件，此事件在发送后才会被监听
            XMLHTTP默认(也推荐)不是同步请求的，也就是open方法并不像WebClient的DownloadString那样把服务器返回的数据拿到才返回，而是异步的，因此需要监听onreadystatechange事件
            readyState==4:表示请求服务器完成
            state==200:表示请求成功返回
            responseText:服务器返回的文本
            */
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4) {//表示请求服务器完成
                    if (xmlhttp.state == 200) {//表示请求成功返回
                        var responseText = xmlhttp.responseText; //服务器返回的文本

                        //此处处理返回的文本

                    }
                    else {
                        alter("AJAX服务器返回错误!");
                    }
                }
            }
            xmlhttp.send(); //此处才正式发送请求，并通过onreadystatechange事件来进行监听
        }
    </script>