Ajax的核心技术是XMLHttpRequest对象,它可以在不向服务器提交整个页面的情况下，实现局部更新网页。通过这个对象，Ajax可以像桌面应用程序那样只与服务器进行数据层的交换，而不必每次都刷新界面，也不必每次将数据处理的工作都交给服务器来做。这样既减轻了服务器负担又提高了响应速度，还缩短了用户的等待时间。通常一个Ajax的实现过程有五步，下面我们以上篇博客中的小实例为例来逐步学习。
1.建立XMLHttpRequest对象。
IE浏览器将XMLHttpRequest实现为一个ActiveX对象，其他浏览器如Firefox，Opera，Netscape等将其实现为一个本地javascript对象，IE7.0及以上版本这两种创建方式都支持。
//定义用户存储XMLHttpRequest对象的变量 var xmlHttp = null; //创建XMLHttpRequest对象 function creatXMLHTTP() { //判断浏览器是否支持ActiveX控件，针对IE6及之前版本 if (window.ActiveXObject) { //将所有可能出现的ActiveXObject版本都放在一个数组中 var arrXmlHttpTypes = ['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP']; //通过循环创建XMLHttpRequest对象 for (var i=0;i<arrXmlHttpTypes.length;i++) { try { //创建XMLHttpRequest对象 xmlHttp = new ActiveXObject(arrXmlHttpTypes[i]); //如果创建XMLHttpRequest对象成功，则跳出循环 break; } catch(ex) { //如果创建不成功，则从数组中取出下一个版本继续创建 } } } //判断浏览器是否将XMLHttpRequest作为本地对象实现，针对IE7及以上，Firefox，Opera等浏览器 else if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } }
//创建XMLHttpRequest对象，调用前面定义好的函数
creatXMLHTTP();
if (xmlHttp!=null)
{
//创建响应XMLHttpRequest对象状态变化的函数
//创建http请求
//发送http请求
}
else
{
alert("您的浏览器不支持XMLHTTP");
}
2.注册回调函数。
//创建响应XMLHttpRequest对象状态变化的函数 xmlHttp.onreadystatechange = httpStateChange;
在异步调用时，XMLHttpRequest对象有几个不同的状态，这些状态表示了异步调用的过程。
0：未初始化状态，刚创建完一个XMLHttpRequest对象；
1：初始化状态，即XMLHttpRequest对象已经获得了要将数据发送到哪个服务器上、以什么方式发送等信息；
2：发送状态，XMLHttpRequest开始发送数据；
3：数据传送状态，此时XMLHttpRequest正在接受从服务器端返回的数据，但是数据还没有传送完毕；
4：完成状态：此时XMLHttpRequest对象已经将从服务器端返回的数据接受完毕。
使用XMLHttpRequest对象的onreadystatechange属性，可以设置响应XMLHttpRequest对象状态变化的函数。
3.使用open方法设置和服务器端交互的基本信息。
//创建http请求
xmlHttp.open("get","userName.txt",true);
XMLHttpRequest的open(method,URL,flag,name,password)方法用来初始化对象,后三个参数是可选的。
4.设置发送的数据，开始和服务器端交互。
//发送http请求
xmlHttp.send(null);
发送http请求使用XMLHttpRequest的send(data)方法，data参数就是传递给open()方法中URL参数所指定的文件的参数。若果要传递多个参数，用"&"来分隔，不需要传递参数写"null"。
5.在回调函数中判断交互是否结束，响应是否正确，并根据需要获取服务器端返回的数据，更新页面内容。
1）判断异步调用是否成功：
if (xmlHttp.readyState==4)//异步调用完毕 { if (xmlHttp.status==200 || xmlHttp.status==0)//异步调用成功||在本机上调试 { } }readyState属性值为4，说明异步调用完成，但并不代表异步调用执行成功。XMLHttpRequest的status属性可以获得从服务器返回的状态码。0代表不能理解的http状态，通常只有在本地计算机打开文件时才会返回。比较常用的http状态码有以下三个：
200：服务器成功返回网页。
404：客户端请求的网页不存在。
503：服务器响应超时。
2）获得服务器返回的数据：
<span style="font-family:SimSun;font-size:18px;"><strong> var userNames = xmlHttp.responseText;</strong></span>
异步调用的最终目的是接收从服务器返回的数据，并根据该数据决定如何显示在客户端网页中。异步调用成功后，XMLHttpRequest对象通过使用以下4个属性来获得服务器返回的数据。
responseText：表示将服务器返回的数据以字符串形式返回。
responseXML：表示以XML的形式返回。
responseBody：表示以unsigned byte数组的形式返回。
responseStream：表示以IStream对象的形式返回。
3）局部更新：
<span style="font-family:SimSun;font-size:18px;"><strong>//查找用于显示提示信息的节点 var node = document.getElementById("myDiv"); //更新数据 node.firstChild.nodeValue = text;</strong></span>
获取服务器返回的数据之后就要显示出来。Ajax通过DOM来完成局部更新数据。
在Ajax编程中离不开对XMLHttpRequest对象的使用，每次使用都是做这五步工作。面对重复的事情我们就要想办法了。由于这项编程步骤比较固定现在已经被封装好了，从而使代码重用，简化编程。但是想要成为一名优秀的程序员，还是有必要了解一下这五个步骤。
