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内容：
<%@page contentType="text/html"%><%@page pageEncoding="gb2312"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>AJAX Demo</title> <script language="JavaScript"> var xmlHttp; function getGiftFromServer（） { var url = "http://localhost:8084/ajax/server.jsp"; if （window.ActiveXObject） { xmlHttp = new ActiveXObject（"Microsoft.XMLHTTP"）； } xmlHttp.onreadystatechange = showGift; xmlHttp.open（"GET", url, true）； xmlHttp.send（null）； setTimeout（"getGiftFromServer（）",10000）； } function showGift（） { if （xmlHttp.readyState == 4 || xmlHttp.readyState == "complete"） { document.getElementById（"output"）。innerHTML = "Time is for " + xmlHttp.responseText + "."; } } </script> </head> <body onload="getGiftFromServer（）"> <h1>AJAX例子</h1> <div id="output"></div> </body></html>
-
加载页面时，将调用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的整数，对应于：
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 注册事件处理器xmlHttp.onreadystatechange = showGift;showGift为传入的方法名，每当XMLHTTPRequest的状态发生改变时，将执行此方法3. 与服务器连接并发送xmlHttp.open（"GET", url , true）其方法签名如下：xmlHttp.open（bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword）其中：bstrMethod: 连接方式，可用的有GET, POST, PUT, or PROPFINDbstrUrl: 服务器的urlvarAsync（可选）： 调用是否异步，默认为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、服务器返回处理完毕的信息此时，该是服务器端工作了，server.jsp的代码如下：<%String[] str = new String[] {"Love", "Power", "Peace"};int number = new java.util.Random（）。nextInt（2+1）；response.getWriter（）。 write（str[number]）；%>从三个字符串中随机挑选一个写入到response中，返回客户端。6、客户端自动探知 XMLHTTPRequest的状态已经发生变化，自动触发事件处理器7、事件处理器动态更新页面处理器读取xmlHttp.responseText的 值，并通过JavaScript动态更新<div id="output">的内容。document.getElementById（"output"）。innerHTML = "Time is for " + xmlHttp.responseText + ".";结语：由上7步可见，AJAX并不复杂，远比想像中要简单得多。牢牢记住这一点，“AJAX让我们在不用刷新页面的情况下，可以动态地更新网页部 分内容”，然后运用到各种需要用到这种性能的场合，将使我们的网页更有创意。
发表回复