揭开AJAX神秘面纱

作者：佚名    教程来源：不详    点击数：加载中...    更新时间：2008-5-8 字体:[大 中 小]

AJAX，即"Asynchronous JavaScript And XML"的缩写，可翻译为异步JavaScript及XML技术。其核心是一个寄宿在浏览器中名为XMLHTTPRequest的类。通过此类，可以做到无需提交表单就可以实现与服务器的连接;无需刷新整个页面，就可以动态更新页面中一部分的内容。

XMLHTTPRequest通常使用XML作为数据交换的载体，但也可使用其他的载体，如纯文本。简单来说，就是通过XMLHTTPRequest发送信息给服务器，异步接收服务器处理并返回信息，然后通过JavaScript动态更新页面的部分内容。
　　尽管AJAX近来非常火爆，但AJAX并非新的技术，正如其名所示，只不过是JavaScript加上XML的技术罢了。而且使用上非常简单。

　　应用AJAX的流程:

　　1、定义一个事件处理器 　　2、获取XMLHTTPRequest，并将事件处理器注册给它 　　3、与服务器连接 　　4、发送信息 　　5、服务器返回处理完毕的信息 　　6、每当XMLHTTPRequest的状态发生变化，自动触发事件处理器 　　7、事件处理器动态更新页面
　　本文通过一个简单的例子来说明如何在IE6中使用AJAX技术。在这例子中，客户端每隔十秒，从服务器端取回一个随机的字符串，在不重新刷新页情况下，自动更新部分页面内容。例子仅用到了两个jsp文件，client.jsp及server.jsp。为了方便说明，我用server.jsp来代替本应作为Servlet的Server.java。

　　先看client.jsp内容:

　　
　　 "http://www.w3.org/TR/html4/loose.dtd">
　　
　　　　
　　　　
　　　　
　　
　　AJAX例子
　　
　　加载页面时，将调用JavaScript的getGiftFromServer()函数，此函数完成了上面所提的应用AJAX的流程中第1至第4步，同时设定了一个每隔十秒自动调用此函数的定时器。而showGift()函数完成所提流程中的第5至第7步。下面详细说明每一步骤。

　　1、定义事件处理器，此处理器将在服务器端返回数据时自动被触发执行。

　　function showGift() {
　　　　if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
　　　　　　document.getElementById("output").innerHTML = "Time is for " + xmlHttp.responseText + ".";
　　　　}
　　}
　　因为我们这里使用异步，readyState属性用来判断服务器返回信息的状态。其值是一个从0至4的整数，对应于: