揭开AJAX神秘面纱

AJAX，即"Asynchronous JavaScript And XML"的缩写，可翻译为异步JavaScript及XML技术。其核心是一个寄宿在浏览器中名为XMLHTTPRequest的类。通过此类，可以做到无需提交表单就可以实现与服务器的连接;无需刷新整个页面，就可以动态更新页面中一部分的内容。XMLHTTPRequest通常使用XML作为数据交换的载体，但也可使用其他的载体，如纯文本。简单来说，就是通过XMLHTTPRequest发送信息给服务器，异步接收服务器处理并返回信息，然后通过JavaScript动态更新页面的部分内容。
尽管AJAX近来非常火爆，但AJAX并非新的技术，正如其名所示，只不过是JavaScript加上XML的技术罢了。而且使用上非常简单。
应用AJAX的流程:

[list]
[*]1、定义一个事件处理器
[*]2、获取XMLHTTPRequest，并将事件处理器注册给它
[*]3、与服务器连接
[*]4、发送信息
[*]5、服务器返回处理完毕的信息
[*]6、每当XMLHTTPRequest的状态发生变化，自动触发事件处理器
[*]7、事件处理器动态更新页面
[/list]

1、定义事件处理器
readyState属性用来判断服务器返回信息的状态。其值是一个从0至4的整数，对应于:

0:对象已创建，但未初始化(未调用open()方法)
1:对象已创建，但未调用send()方法
2:已调用send()方法，但status及headers还未可用
3:已经传回部分数据，但status及headers还未完全可用
4:已经收到所有数据，可使用所有数据
2、获取XMLHTTPRequest，并将事件处理器注册给它
注意:要使用XMLHTTPRequest，需要IE5.0以上的版本。
2.1 取得XMLHTTPRequest
在IE7.0之前获得XMLHTTPRequest，使用如下代码:
if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }
而在IE7.0中:
if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest }
2.2 注册事件处理器
xmlHttp.onreadystatechange = showGift;
showGift为传入的方法名，每当XMLHTTPRequest的状态发生改变时，将执行此方法

3. 与服务器连接并发送 xmlHttp.open("GET", url , true)
其方法签名如下: xmlHttp.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword)
其中:
bstrMethod: 连接方式，可用的有GET, POST, PUT, or PROPFIND
bstrUrl: 服务器的url
varAsync(可选): 调用是否异步，默认为true(调用立即返回)
bstrUser(可选):用户名，如果url需要验证时附上
bstrPassword(可选):密码，如果url需要验证时附上
open()方法可以直接打开一个xml文档，并通过xmlHttp的responseXML来读取相应的节点。如下例: xmlHttp.open("GET","http://localhost/books.xml", false); xmlHttp.send(); var book = xmlhttp.responseXML.selectSingleNode("//book[@id='bk101']");


4、发送信息 xmlHttp.send(null)
其方法签名如下: xmlHttp.send( [varBody])
varBody(可选): 可为字符串或xml等数据，可以为null。无返回值 此方法在open()设为异步时，立即返回;在open()设为同步时，必须等到reponse对象从服务器中返回时才返回。

5、服务器返回处理完毕的信息

6、客户端自动探知XMLHTTPRequest的状态已经发生变化，自动触发事件处理器

7、事件处理器动态更新页面

结语:
由上7步可见，AJAX并不复杂，远比想像中要简单得多。牢牢记住这一点，“AJAX让我们在不用刷新页面的情况下，可以动态地更新网页部分内容”，然后运用到各种需要用到这种性能的场合，将使我们的网页更有创意。