AJAX创建XMLHttpRequest对象实例

AJAX（Asynchronous JavaScript and XML），异步的JavaScript和XML，它并不是新的编程语言，而是在我们之前学过的JavaScript，HTML，CSS和XML等标准上的一个新方法，AJAX作为一种快速创建动态网页的技术，最大的优点就是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页的内容。

所谓同步异步，让我想起小学时候学到的统筹兼顾这个词。一小例子说明：

一壶水烧开需要20min，扫地拖地10min，浏览新闻10min，完成三件事情方案很多，其中两种为：

①按顺序，烧上水等待水烧开20min后，扫地拖地10min完后休息浏览新闻10min，总计40min

②烧上水后就去扫地而后休息，等待水壶鸣笛，提醒你水烧开了，此时花费20min

在等待水壶烧开的过程中的两种方案就分别体现了同步和异步，第一种必须一心只完成一件事，即等待20min后水烧开，随后进行其他任务，可称为同步，第二种则是统筹时间，能够利用时间高效做事，可称为异步。在程序中AJAX就提供了与服务器异步通讯的一种能力，从而使用户从请求/响应的循环中解脱出来。借助于AJAX可以使用户在单击按钮时，使用JavaScript和HTML立即更新UI界面，并向服务器发出异步请求，以执行更新或查询数据库等操作。当请求返回时，就可以使用JavaScript和CSS来响应更新UI，而不是刷新整个页面。在这个过程中，用户甚至是不知道浏览器正在与服务器通讯，他看到的就是web站点及时响应了他的操作。

下边以获取当前服务器时间为例，详细解说一下实现AJAX的基本步骤

（1）创建XMLHttpRequest对象，也就是创建一个异步调用对象（注意浏览器兼容问题）

（2）创建新的Http请求，并指定该请求的方法、URL及验证信息。

（3）设置响应Http请求状态变化的函数

（4）发送Http请求

（5）获取异步调用返回的数据

（6）使用JavaScript和DOM实现局部更新。

获取当前服务器时间GetTime的HTML页需要请求服务器HandlerShowTime一般处理程序以得到服务器响应的时间，通过JavaScript请求如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>获取当前服务器时间</title>
    <style type="text/css">
        #dvTime
        {
            color: Red;
            border: 1px solid blue;
            width: 500px;
            height: 50px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            //为按钮注册一个单击事件
            document.getElementById('btnClick').onclick = function () {

                //-------------------开始发起请求--------------------
                document.getElementById('img1').style.display = 'block';

                //请求服务器的一个一般处理程序，获取时间，并设置到div中。
                //请求HandlerShowTime.ashx一般处理程序，获取服务器响应的时间
                //通过JavaScript请求服务器的步骤：

                //1.创建一个XMLHttpRequest对象，这里直接进行判断并未指定创建XMLHttpRequest对象的方法。
                var xhr = null;
                //通过能力检测，在不同浏览器下创建该对象
                if (XMLHttpRequest) {
                    xhr = new XMLHttpRequest();//创建Firefox,Google Chrome,opera等其他浏览器的XMLHttpRequest对象
                } else if (ActiveXObject) {
                    xhr = new ActiveXObject("Microsoft.XMLHttp");//创建IE浏览器中的XMLHttpRequest对象 
                }

                //2.初始化请求。告诉xhr对象，使用get还是post发起请求，要请求那个地址，是否是异步的。
                xhr.open('get','HandlerShowTime.ashx',true);

                //3.设置回调函数，响应Http请求状态变化
                xhr.onreadystatechange = function () {
                    //在请求的不同阶段都会回调这个函数
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        document.getElementById('img1').style.display = 'none';
                        document.getElementById('dvTime').innerHTML = ' 当前时间：' + xhr.responseText;
                    }
                }
//这里readState属性值为4表示异步调用完毕，status属性值为20表示异步调用成功。


                //4.开始发起请求
                xhr.send(null); //因为当前使用的是get请求，没有请求报文体，所以传递null参数。

            };
        };
    </script>
</head>
<body>
    //5.6.通过AJAX异步调用获取服务器数据后，用JavaScript进行局部更新，这里就是上边的window.onload
    <input type="button" id="btnClick" value="获取服务器时间" />
    <div id="dvTime">
        当前时间：
    </div>
    <img id="img1" style="display: none" src="加载-002.gif" alt="Alternate Text" />
</body>
</html>

AJAX创建XMLHttpRequest对象实例

相关文章