目录

一、什么是Ajax

二、XMLHttpRequest 对象

1.创建 XMLHttpRequest 对象

2.向服务器发送请求

3.服务器响应

三、总结

一、什么是Ajax

Ajax 是一种异步加载页面内容的技术，即用户点击了某个链接之后，可以只更新页面中的一小部分而不用重新加载整个网页。Ajax 的主要优势就是对页面的处理以异步方式发送到服务器，而服务器不会用整个页面来响应请求，它会在后台处理请求。与此同时，用户可以继续浏览页面并与页面进行交互。相应的脚本则可以按需加载和创建页面内容，而不会打断用户的浏览体验。

图1.1 Ajax 加载

二、XMLHttpRequest 对象

XMLHttpRequest 对象是 Ajax 技术的核心，这个角色充当着脚本与服务器之间中间人的角色，这个对象可以自己发送请求也可以自己处理请求。

1.创建 XMLHttpRequest 对象

考虑到所有浏览器的支持（大部分浏览器基于 XMLHttpRequest 对象来创建新对象，IE部分版本的浏览器实现方式则不同），创建新对象的方法可以这样写：

function getHTTPObject () {
　　if(typeof XMLHttpRequest == "undifined")
　　　　XMLHttpRequest = function () {
　　　　　　try { return new ActiveXObject("Msxml2.XMLHTTP.6.0");}
　　　　　　　catch (e) {}
　　　　　　try { return new ActiveXObject("Msxml2.XMLHTTP.3.0");}
　　　　　　　catch (e) {}
　　　　　　try { return new ActiveXObject("Msxml2.XMLHTTP");}
　　　　　　　catch (e) {}
　　　　　　return false;
　　　　}
　　　　return new XMLHttpRequest();
}

有了这个方法后，在脚本中要使用 XMLHttpRequest 对象时，可以直接将新对象赋值给一个新变量：

var request = getHTTPObject();

2.向服务器发送请求

如需将请求发送到服务器，可以使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

• open(method,url,async)：规定请求的类型、URL 以及是否异步处理请求。
  其中，method：请求的类型；GET 或 POST；url：文件在服务器上的位置；async：true（异步）或 false（同步）
• send(string)：将请求发送到服务器，其中，string：仅用于 POST 请求。

如下面的代码会在页面加载完成时发起一个 get 请求，请求与本文件位于同一文件夹的 example.txt 文件：

function getNewContent() {
    var request = getHTTPObject();
    if(request) {
 　　//指定请求的目标
        request.open("GET","example.txt",true);
 　　//明确如何处理相应
        request.onreadystatechange = function () {//onreadystatechange函数会在服务器给XMLHttpRequest对象送回响应的时候被触发执行
            if(request.readyState==4) {
                var para = document.createElement("p");
                var txt = document.createTextNode(request.responseText);
                para.appendChild(txt);
                document.getElementById('new').appendChild(para);
            }
        };
 　　//发送请求
        request.send(null);
    } else {
        alert("Sorry,your browser doesn't support XMLHttpRequest");
    }
}

在这个例子中，onreadystatechange 事件处理函数在等到 readyState 值变为4之后，就会从responseText 属性里取得文本数据，然后把数据放到一个段落里，再将新段落添加到 DOM 里。
其中，有几个比较重要的 XMLHttpRequest 对象属性：

3.服务器响应

使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性可以获得服务器的响应：

如上面的例子代码中就运用到了 responseText 属性。下面的代码则运用了 responseXML 属性来获得服务器的响应：

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
  {
  txt=txt + x[i].childNodes[0].nodeValue + "<br />";
  }
document.getElementById("myDiv").innerHTML=txt;

除了上面的简单地获取服务器中 .txt 文件的内容之外，Ajax 还可以和 web 服务器中的 ASP 页面或 PHP等脚本文件进行相关的通信，实现更加复杂多样的功能。

三、总结

Ajax 技术的运用可以减少了许多页面重新加载的次数，减少用户重复刷新页面的次数，但同时，这种缺少记录的技术会与浏览器的一些使用惯例产生冲突，如无法使用后退按钮或为指定的页面添加书签等。另外，使用了 Ajax 技术的站点，用户必须启用了 JavaScript 功能之后才能正常访问，在运用 Ajax 技术的同时，如何做到平稳退化也是一个需要好好考虑的方面。