AJAX技术及实例

来源：互联网发布：python future 编辑：程序博客网时间：2024/06/05 05:52

实例

ajaxServlet.java程序清单:

package com;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ajaxServlet extends HttpServlet{
private static final String CONTENT_TYPE="text/xml; charset=gb2312";
public void init()throws ServletException{
}
public void doGet(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException{
  response.setContentType(CONTENT_TYPE);
  PrintWriter out=response.getWriter();
  String action=request.getParameter("action");
  if(("send").equals(action)){
   StringBuffer sb=new StringBuffer("<type>");
   sb.append("<type_name>AA</type_name>");
   sb.append("<type_name>BB</type_name>");
   sb.append("<type_name>CC</type_name>");
   sb.append("<type_name>DD</type_name>");
   sb.append("</type>");
   out.write(sb.toString());
   out.close();
  }
}
}

html页面:

<html>
<head>
<title>AJAX.html</title>
</head>
<script type="text/javascript">
/*通过异步传输XMLHTTP发送参数到ajaxServlet，返回符合条件的XML文档*/
function getResult(){
var url = "servlet/com.ajaxServlet?action=send";
if (window.XMLHttpRequest){
  req = new XMLHttpRequest();
}else if (window.ActiveXObject){
  req = new ActiveXObject("Microsoft.XMLHTTP");
  if(req){
   req.open("GET",url, true);
   req.onreadystatechange = complete;
   req.send(null);
  }
}
/*分析返回的XML文档*/
function complete(){
if (req.readyState == 4){
  if (req.status == 200){
   var type = req.responseXML.getElementsByTagName("type_name");
   var str=new Array();
   for(var i=0;i<type.length;i++){
    str[i]=type[i].firstChild.data;
    document.all['td'].innerHTML+=str[i]+"<BR>";
   }
  }
}
}
</script>
<body onLoad="getResult()">
<table width="80%" border="0" cellspacing="0" cellpadding="0">
<tr>
  <td id="td"> </td>
</tr>
</table>
</body>

动态网络页面和AJAX技术文/李涛

传统的网络页面是一个个的HTML文件。其内容在不刷新整个页面的情况下不会改变。可能
有读者会问，网络页面能否做得像桌面程序一样，具有丰富、适时的人机交互功能呢？如
果读者用过Google Map、Google Suggest或GMail，可能就会意识到我们离这个时代已经不
远了。现在炒得很热的Web2.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文件。XMLHttpR
equest最早由微软作为一个ActiveX对象实现，之后其它流行的浏览器步其后尘都实现了XM
LHttpRequest。在定义XMLHttpRequest对象时，IE和别的浏览器略有不同，这在后面的例
子中会有说明。

学习使用AJAX
本文将用一个例子来进一步说明AJAX。在这个例子中，服务器端有一个Servlet会生成0~10
0的整数。在用户端的用户会被要求输入框中输入一个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，当用户在输入框输入时，valid
ate()函数就会被调用。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){
        req=new XMLHttpRequest();
    }else if(window.ActiveXObject)
    {
        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对象被建立之后，它的状态就在这五个值之间转换，每次状态转变都会触
发一个readStateChange的事件，可定义listener来对事件进行处理。

onreadystatechange=handleResponse

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

XMLHttpRequest还有其它的参数和函数，想要进一步了解的读者可在http://ww.xmlplanet

.com/references/objref/XMLHttpRequest.html找到关于XMLHttpRequest的详细文本。

第三步：处理readyStateChange事件

前面提到XMLHttpRequest的onreadystatechange的参数被定为handleResponse，每当XMLHt
tpRequest的状态改变时，这个函数都会被调用，但我们只对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()通过mdi
v.innerHTML动态地改变它的内容。

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

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

1，只有比较新的网络浏览器支持AJAX，如果您的程序运用需要支持比较老的网络浏览器，
或者是基于移动设备的浏览器，AJAX将不是个好的选择。以下是支持AJAX的浏览器：
·Microsoft IE 5.0以上
·Apple Sfari 1.2以上
·Firefox 1.0以上
·Netscape 7.1以上
·Opera 7.6以上

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

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

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