动态网络页面和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" οnkeyup="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的代码中放入敏感信息，以免造成泄密。

转载于:https://www.cnblogs.com/KUDO/archive/2006/08/04/467886.html