动态网络页面和AJAX技术

　　传统的网络页面是一个个的HTML文件，其内容在不刷新整个页面的情况下将不会改变。可能有读者会问，网络页面能否做得像桌面程序一样，具有丰富、适时的人机交互功能呢？如果读者用过Google Map、Google Suggest或GMail，可能就会意识到我们离这个时代已经不远了。现在炒得很热的Web 2.0概念，其实说白了就是使桌面运用网络化。这些运用可说是Web 2.0的先驱，它们在看起来、用起来都和桌面程序相似，而且它们的实现都不依靠于任何插件。这到底是什么一种技术？使Google能开发出如此炫酷的系统呢——这就是本文要介绍的AJAX技术。

AJAX简介

　　AJAX是Asynchronous JavaScript and XML的简称。AJAX其实并非一种新的技术，而是网络浏览器里已有的三项重要特征的结合：

　　1. 浏览器可通过JavaScript和Web Server通讯。
　　2. JavaScript能在不刷新页面的情况下动态地改变页面的值。
　　3. 浏览器能解析XML文件。

　　作为AJAX的组成部分，这三项特征已经存在很久了，直至Google推出Google Map、GMail和Google Suggest后，AJAX才风行起来，以致于很多人误认为AJAX是Google发明的新技术。

　　传统的网络页面工作流程是浏览器向Web Server发送请求（Request），在收到数据后刷新整个页面以显示新的数据，如下图所示：

　　在服务器端进行操作的时候，用户能做的就是等待，以致于用户做网上操作的体验不比使用客户端程序来得连贯。

　　运用AJAX，可在用户进行操作的同时通过事件触发JavaScript，在后台连接到服务器得到数据，然后在不刷新整个页面的情况下动态地改变页面的数值，其过程如下图所示：

　　用户在用户页面上做操作，比如在输入筐内输入、点击按钮……这些都会产生事件，并触发JavaScript。JavaScript执行时可通过 XMLHttpRequest向服务器发送Http Request，并从服务器得到Http Response，根据Http Response的内容在不刷新页面的情况下动态地改变页面的内容。XMLHttpRequest是浏览器里已定义的对象，它是AJAX技术的核心组成部分，JavaScript通过它和服务器通讯，并通过它来解析从服务器传回来的XML文件。XMLHttpRequest最早由微软作为一个 ActiveX对象实现，之后其它流行的浏览器步其后尘都实现了XMLHttpRequest。在定义XMLHttpRequest对象时，IE和别的浏览器略有不同，这在后面的例子中会有说明。

学习使用AJAX

　　本文将用一个例子来进一步说明AJAX。在这个例子中，服务器端有一个Servlet会生成一个0～100的整数。在用户端的用户会被要求在输入筐中输入一个0～100的数，如果这个数和服务器端自动生成的数一致，页面则会出现“恭喜，您猜对了！”的字样。在用户输入的同时，在输入筐的右端有提示告诉用户，输入的数是大了还是小了。这些提示都是在不刷新页面的情况下，动态完成的。如下图示：

　　接下来，我们就边编程序边学习AJAX。

　　准备工作一：建立服务器端的Servlet

　　在例子中，这个Servlet叫“ValidateGuess”，它的URL pattern是/ValidateGuess，这个Servlet可以做以下几件事：

　　1.随机产生一个0～100之间的整数。
　　2.在收到Http Request的时候，从Http Request中拿到传入的数，将它和上一步产生的整数比较，并通过Http Response传回比较结果，结果的形式是一段XML文本，比如:
　　……
　　<message>
　　tooSmall
　　</message>
　　……

　　准备工作二：建立用户页面Ajax.jsp

　　页面很简单，如图所示：

　　

　　要注意的有两点：

　　1. 输入筐的定义是<input type="text" id="guess" name="id" onkeyup="validate()">，onkeyup定义了validate()函数为keyup事件的listener，当用户在输入筐内输入时，validate()函数就会被调用。validate()函数的程序如下：
　　function validate() {
　　var aNumber = document.getElementById("guess");
　　var url = "http://localhost:8080/AJAX/ValidateGuess?guess=" + escape(aNumber.value);
　　initRequest();
　　sendRequest(url);
　　}
　　

　　initRequest()和sendRequest()函数在下文会做进一步解释。

　　2. 在输入筐右侧有一个<div id="messageText"><div>，这在JSP初始时是看不到的，它的内容会随用户的输入动态地出现并改变。

　　准备工作做好了，现在我们就可以在Ajax.jsp中加入JavaScript来实现AJAX了。

第一步：建立XMLHttpRequest对象

　　前面已提到XMLHttpRequest是浏览器里已定义的对象，它先由微软在IE5里实现，后来其它主流的浏览器也加入了对它的支持，所以在定义这个对象时IE和别的浏览器略有不同，如以下的程序所示（在文中只包括了主要的程序片断）：
　　……
　　var req;
　　function initRequest() {
　　if (window.XMLHttpRequest) { //IE之外的浏览器
　　req = new XMLHttpRequest();
　　} else if (window.ActiveXObject) {//IE 5.0 and up
　　req = new ActiveXObject("Microsoft.XMLHTTP");
　　}
　　}
　　……
　　至此,在Javascript里就得到了一个XMLHttpRequest对象，以下的程序就可以对这个名为“req”的XMLHttpRequest的对象进行操作了。

　　

第二步：用XMLHttpRequest来向服务器发Request

　　function sendRequest(url){
　　req.open("GET", url, true);
　　req.onreadystatechange = handleResponse;
　　req.send(null);
　　}

　　在这一步骤中调用了几个重要的XMLHttpRequest函数和参数：

• 　open（”method”, “URL”[, asyncFlag[, username[,password]]]）

　　open是XMLHttpRequest的函数，此函数有五个参数，后三个为可选参数。

　　method——Http需求方式，支持“Post”和“Get”。
　　URL——服务器端程序的URL。
　　asyncFlag——定义Request是否是并发；如果asyncFlag＝true，send（）函数在发送Request后马上返回；如果 asyncFlag＝false，send（）函数必须在收到回执后才返回。缺省值是true。
　　username——用户名，有些URL要求request带有用户名；一般不会用到。
　　password——密码；一般不会用到。

• 　readyState

　　readyState是XMLHttpRequest对象的参数，用于表示此对象的状态，可能的状态有五个：

　　
　　0 UNINITIALIZED——表示open（）函数还未调用。
　　1 LOADING——表示send（）函数还未调用。
　　2 LOADED——表示send（）函数已调用。
　　3 INTERACTIVE——表示send（）函数调用后，但需求还未被满足时的状态。
　　4 COMPLETED——需求被满足。

　　XMLHttpRequest对象被建立之后，它的状态就在这五个值之间转换，每次状态转变都会触发一个readyStateChange的事件，可定义listener来对事件进行处理。

• 　onreadystatechange＝handleResponse

　　onreadystatechange是XMLHttpRequest对象的参数，用来定义此对象状态改变事件发生时的listenser，它的值对应一个JavaScript函数——在这个例子中我们的listenser叫“handleResponse”。注意，handleResponse是一个你自己定义的函数，但要保证onreadysatechange的值和你自己定义的函数名一致。

　　XMLHttpRequest还有其它参数和函数，想要进一步了解的读者可在http://www.xulplanet.com/references /objref/XMLHttpRequest.html找到关于XMLHttpRequest的详细文本和信息。

第三步：处理readyStateChange事件

　　前面提到XMLHttpRequest的onreadystatechange的参数被定为handleResponse，每当 XMLHttpRequest的状态改变时，这个函数都会被调用，但我们只对readyState＝4（COMPLETED）感兴趣。 handleResponse的程序如下：

　　function handleResponse() {
　　　　if (req.readyState == 4) {
　　　　if (req.status == 200) {
　　　　　　　　processMessage();
　　　　　　}
　　　　　}
　　　　}

• 　status

　　status是XMLHttpRequest的参数，代表Http request的状态，比如说404是没有找到服务器，500是服务器端程序出错，200代表一切OK。当XMLHttpRequest的readyState是4，并且Http Request的状态是200时，就可调用processMessage（）函数来对服务器返回的结果进行处理了，processMessage（）的程序如下：

　　function processMessage() {
　　　　var messageElement = req.responseXML.getElementsByTagName("message")[0];
　　　　var message = messageElement.childNodes[0].nodeValue;
　　　　var mdiv = document.getElementById("messageText");
　　　　if (message == "tooBig") {
　　　　　　　　mdiv.innerHTML = "<div style="color:red">太大</ div>"；
　　　　　　　} else if(message == "tooSmall"){
　　　　　　　　mdiv.innerHTML = "<div style="color:red">太小</ div>";
　　　　　　　} else if(message == "invalid"){
　　　　　　　　mdiv.innerHTML = "<div style="color:red">不是数字</ div>";
　　　　　　　} else if(message =="outOfRange") {
　　　　　　　　mdiv.innerHTML = "<div style="color:red">超出范围</ div>";
　　　　　　　} else {
　　　　　　　　mdiv.innerHTML = "<div style="color:green">恭喜，您猜对了！</ div>";
　　　　　　　}
　　}

　　processMessage函数做了两件事：

　　1. 解析了服务器的返回值

　　XMLHttpRequest自动地把从服务器端返回的Http Response中的XML，转换成了树状的DOM Document结构并存在responseXML参数里，通过它可解析返回的XML文件并最终获得返回值。读者可到http: //www.xulplanet.com/references/objref/Document.html找到详细的关于DOM Document的文本。

　　2. 动态地更新页面

　　前面提到在页面的输入筐右侧有一个<div id=”messageText”>，processMessage（）通过mdiv.innerHTML动态地改变它的内容。

 

　　至此，一个完整的AJAX程序就开发完毕，只要把完整的源程序进行编译并部署到服务器上就可以运行了。AJAX能开发出像Google Map那样完美的应用，但它的基本原理其实是很简单的，熟悉JavaScript的读者在原来的基础上只需要再学习使用XMLHttpRequest就行了。但要把AJAX的潜力发挥得淋漓尽致，开发出像Google Map那样熟练的应用程序还得下很大的功夫。

AJAX的注意事项

　　AJAX作为一种新一代的网络页面开发架构，使我们开发具有丰富人机交互功能的页面成为可能。但AJAX也有它的不足之处，在您决定使用AJAX之前，一定要确定下列AJAX的不足不会对您的应用程序的开发造成影响：

　　1. 只有比较新的网络浏览器支持AJAX，如果您的程序运用需要支持比较老的网络浏览器，或者是基于移动设备的浏览器，AJAX将不是个好的选择。以下是支持AJAX的浏览器：

• 　Microsoft IE 5.0以上
• 　Apple Safari 1.2以上
• 　Firefox 1.0以上
• 　Netscape 7.1以上
• 　Opera 7.6以上

　　2. 因为AJAX的运作是在不刷新页面的情况下进行的，浏览器中的地址栏将不再反映当前页面的状态，所以，书签功能将不能保证用户在下一次访问时，可得到相同的内容，同时AJAX也会打乱浏览器里的“Back”键。

　　3. 如果使用不当，AJAX会不必要地增大网络数据的流量，从而降低整个系统的性能。

　　4. AJAX中的JavaScript在客户端执行，和服务器端的代码不同，AJAX的代码会被下载到客户端，要注意不要在AJAX的代码中放入敏感信息，以免造成泄密。