如何使用Ajax技术开发Web应用E序(1)
如何使用Ajax技术开发Web应用E序(2)
如何使用Ajax技术开发Web应用E序(3)
到这里，已经可以清楚的知道AJAX是什么，AJAX能做什么，AJAX什么地方不好。如果你觉得AJAX真的能给你的开发工作带来改q的话，那么l箋看看怎么使用AJAX吧?a name="a71"> 7.1、AJAX应用到的技?/strong>
AJAX涉及到的7Ҏ术中Q个为Javascript、XMLHttpRequest、DOM、XML比较有用?br />
A、XMLHttpRequest对象
XMLHttpRequest是XMLHTTPlg的对象，通过q个对象QAJAX可以像桌面应用程序一样只同服务器q行数据层面的交换，而不用每ơ都h界面Q也不用每次数据处理的工作都交l服务器来做Q这h减轻了服务器负担又加快了响应速度、羃短了用户{待的时间?
IE5.0开始，开发h员可以在Web面内部使用XMLHTTP ActiveXlg扩展自n的功能，不用从当前的Web面D可以直接传输数据到服务器或者从服务器接收数据?Mozilla1.0以及NetScape7则是创徏l承XML的代理类XMLHttpRequestQ对于大多数情况QXMLHttpRequest对象和XMLHTTPlg很相|Ҏ和属性类|只是部分属性不同?/p>
XMLHttpRequest对象初始化：
<script language=”javascript?gt;
var http_request = false;
//IE览?
http_request = new ActiveXObject("Msxml2.XMLHTTP");
http_request = new ActiveXObject("Microsoft.XMLHTTP");
//Mozilla览?
http_request = new XMLHttpRequest();
</script>XMLHttpRequest对象的方法：
| Ҏ | 描述 |
| abort() | 停止当前h |
| getAllResponseHeaders() | 作ؓ字符串返回完整的headers |
| getResponseHeader("headerLabel") | 作ؓ字符串返回单个的header标签 |
| open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) | 讄未决的请求的目标 URLQ方法，和其他参?/td> |
| send(content) | 发送请?/td> |
| setRequestHeader("label", "value") | 讄headerq和h一起发?/td> |
XMLHttpRequest对象的属性：
| 属?/td> | 描述 |
| onreadystatechange | 状态改变的事g触发?/td> |
| readyState | 对象状?integer):
0 = 未初始化 1 = d?br />2 = 已读?br />3 = 交互?br />4 = 完成 |
| responseText | 服务器进E返回数据的文本版本 |
| responseXML | 服务器进E返回数据的兼容DOM的XML文档对象 |
| status | 服务器返回的状态码, 如：404 = "文g未找? ?00 ="成功" |
| statusText | 服务器返回的状态文本信?/td> |
B、Javascript
Javascript一直被定位为客L的脚本语aQ应用最多的地方是表单数据的校验。现在，可以通过Javascript操作XMLHttpRequestQ来跟数据库打交道?a>
C、DOM
DOMQDocument Object ModelQ是提供lHTML和XML使用的一lAPIQ提供了文g的表q结构，q可以利用它改变其中的内容和可见物。脚本语a通过DOM才可以跟面q行交互。Web开发h员可操作及徏立文件的属性、方法以及事仉以对象来展现。比如，document׃表页面对象本w?br />
D、XML
通过XMLQExtensible Markup LanguageQ，可以规范的定义结构化数据Q是|上传输的数据和文档W合l一的标准。用XML表述的数据和文档Q可以很Ҏ的让所有程序共享?a name="a72">
7.2、AJAX开发框?/strong>
q里Q我们通过一步步的解析，来Ş成一个发送和接收XMLHttpRequesth的程序框架。AJAX实质上也是遵循Request/Server模式Q所以这个框架基本的程也是Q对象初始化à发送请求à服务器接收à服务器返回à客L接收à修改客户端页面内宏V只不过q个q程是异步的?br />
A、初始化对象q发出XMLHttpRequesth
Z让Javascript可以向服务器发送HTTPhQ必M用XMLHttpRequest对象。用之前，要先XMLHttpRequest对象实例化。之前说q，各个览器对q个实例化过E实C同。IE以ActiveX控g的Ş式提供，而Mozilla{浏览器则直接以XMLHttpRequestcȝ形式提供。ؓ了让~写的程序能够跨览器运行，要这样写Q?
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
http_request = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}有些版本的Mozilla览器处理服务器q回的未包含XML mime-type头部信息的内Ҏ会出错。因此，要确保返回的内容包含text/xml信息?
http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');B、指定响应处理函?br /> 接下来要指定当服务器q回信息时客L的处理方式。只要将相应的处理函数名U赋lXMLHttpRequest对象的onreadystatechange属性就可以了。比如：
http_request.onreadystatechange = processRequest;
需要指出的Ӟq个函数名称不加括号Q不指定参数。也可以用Javascriptx定义函数的方式定义响应函数。比如：
http_request.onreadystatechange = function() { };
C、发出HTTPh
指定响应处理函数之后Q就可以向服务器发出HTTPh了。这一步调用XMLHttpRequest对象的open和sendҎ?/p>
http_request.open('GET', 'http://www.example.org/some.file', true);
http_request.send(null);open的第一个参数是HTTPh的方法，为Get、Post或者Head?/p>
open的第二个参数是目标URL。基于安全考虑Q这个URL只能是同|域的，否则会提C“没有权限”的错误。这个URL可以是Q何的URLQ包括需要服务器解释执行的页面，不仅仅是静态页面。目标URL处理hXMLHttpRequesth则跟处理普通的HTTPh一P比如JSP可以用request.getParameter(“?或者request.getAttribute(“?来取得URL参数倹{?/p>
open的第三个参数只是指定在等待服务器q回信息的时间内是否l箋执行下面的代码。如果ؓTrueQ则不会l箋执行Q直到服务器q回信息。默认ؓTrue?/p>
按照序Qopen调用完毕之后要调用sendҎ。send的参数如果是以Post方式发出的话Q可以是M想传l服务器的内宏V不q，跟form一P如果要传文g或者Post内容l服务器Q必d调用setRequestHeaderҎQ修改MIMEcd。如下：
http_request.setRequestHeader(“Content-Type?”application/x-www-form-urlencoded?;
q时资料则以查询字符串的形式列出Q作为sned的参敎ͼ例如Q?/p>
name=value&anothername=othervalue&so=onD、处理服务器q回的信?
在第二步我们已经指定了响应处理函敎ͼq一步，来看看这个响应处理函数都应该做什么?
首先Q它要检查XMLHttpRequest对象的readyState|判断h目前的状态。参照前文的属性表可以知道QreadyStategؓ4的时候，代表服务器已l传回所有的信息Q可以开始处理信息ƈ更新面内容了。如下：
if (http_request.readyState == 4) {
// 信息已经q回Q可以开始处?
} else {
// 信息q没有返回，{待
}服务器返回信息后Q还需要判断返回的HTTP状态码Q确定返回的面没有错误。所有的状态码都可以在W3C的官方网站上查到。其中，200代表面正常?/p>
if (http_request.status == 200) {
// 面正常Q可以开始处理信?
} else {
// 面有问?
}
XMLHttpRequestҎ功返回的信息有两U处理方式：
responseTextQ将传回的信息当字符串用；
responseXMLQ将传回的信息当XML文档使用Q可以用DOM处理?/p>E、一个初步的开发框?br /> ȝ上面的步骤，我们整理Z个初步的可用的开发框Ӟ供以后调用；q里Q将服务器返回的信息用window.alert以字W串的Ş式显C出来：
<script language="javascript">
var http_request = false;
function send_request(url) {//初始化、指定处理函数、发送请求的函数
http_request = false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest) { //Mozilla 览?
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//讄MiMEcd
http_request.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject) { // IE览?
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // 异常Q创建对象实例失?
window.alert("不能创徏XMLHttpRequest对象实例.");
return false;
}
http_request.onreadystatechange = processRequest;
// 定发送请求的方式和URL以及是否同步执行下段代码
http_request.open("GET", url, true);
http_request.send(null);
}
// 处理q回信息的函?
function processRequest() {
if (http_request.readyState == 4) { // 判断对象状?
if (http_request.status == 200) { // 信息已经成功q回Q开始处理信?
alert(http_request.responseText);
} else { //面不正?
alert("您所h的页面有异常?);
}
}
}
</script>7.3、简单的CZ接下来，我们利用上面的开发框架来做两个简单的应用?br />
A、数据校?br /> 在用h册的表单中，l常到要检验待注册的用户名是否唯一。传l的做法是采用window.open的弹出窗口，或者window. showModalDialog的对话框。不q，q两个都需要打开H口。采用AJAX后，采用异步方式直接参数提交到服务器，用window.alert服务器q回的校验信息显C出来。代码如下：
?lt;body></body>之间增加一Dform表单代码Q?/p>
<form name="form1" action="" method="post">
用户名：<input type="text" name="username" value="">
<input type="button" name="check" value="唯一性检? onClick="userCheck()">
<input type="submit" name="submit" value="提交">
</form>
在开发框架的基础上再增加一个调用函敎ͼ
function userCheck() {
var f = document.form1;
var username = f.username.value;
if(username=="") {
window.alert("用户名不能ؓI?);
f.username.focus();
return false;
}
else {
send_request('sample1_2.jsp?username='+username);
}
}
看看sample1_2.jsp做了什么：
<%@ page contentType="text/html; charset=gb2312" errorPage="" %>
<%
String username = request.getParameter("username");
if("educhina".equals(username)) out.print("用户名已l被注册Q请更换一个用户名?);
else out.print("用户名尚未被使用Q您可以l箋?);
%>q行一下，嗯，没有弹出H口Q没有页面刷斎ͼ跟预想的效果一栗如果需要的话，可以在sample1_2.jsp中实现更复杂的功能。最后，只要反馈信息打印出来就可以了?/p>
首先Q在<body></body>中间增加如下HTML代码Q?/p>
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20">
<a href="javascript:void(0)" onClick="showRoles('pos_1')">l理?lt;/a>
</td>
</tr>
<tr style="display:none">
<td height="20" id="pos_1"> </td>
</tr>
<tr>
<td height="20">
<a href="javascript:void(0)" onClick="showRoles('pos_2')">开发部</a>
</td>
</tr>
<tr style="display:none ">
<td id="pos_2" height="20"> </td>
</tr>
</table>
在框架的基础上增加一个响应函数showRoles(obj)Q?/p>
//昄部门下的岗位
function showRoles(obj) {
document.getElementById(obj).parentNode.style.display = "";
document.getElementById(obj).innerHTML = "正在d数据..."
currentPos = obj;
send_request("sample2_2.jsp?playPos="+obj);
}
修改框架的processRequest函数Q?/p>
// 处理q回信息的函?
function processRequest() {
if (http_request.readyState == 4) { // 判断对象状?
if (http_request.status == 200) { // 信息已经成功q回Q开始处理信?
document.getElementById(currentPos).innerHTML = http_request.responseText;
} else { //面不正?
alert("您所h的页面有异常?);
}
}
}
最后就是smaple2_2.jsp了：
<%@ page contentType="text/html; charset=gb2312" errorPage="" %>
<%
String playPos = request.getParameter("playPos"); if("pos_1".equals(playPos)) out.print(" ȝ?lt;br> 副ȝ?); else if("pos_2".equals(playPos)) out.println(" dE师<br> 软g工程?);
%>
q行一下看看效果：
7.4、文档对象模型（DOMQ?/strong>
文档对象模型QDOMQ是表示文档Q比如HTML和XMLQ和讉K、操作构成文档的各种元素的应用程序接口（APIQ。一般的Q支持Javascript的所有浏览器都支持DOM。本文所涉及的DOMQ是指W3C定义的标准的文档对象模型Q它以树形结构表CHTML和XML文档Q定义了遍历q个树和查、修Ҏ的节点的Ҏ和属性?br />
7.4.1、DOMg的HTML文档Q树
在DOMgQHTML跟XML一h一U树形结构的文档Q?lt;html>是根QrootQ节点，<head>?lt;title>?lt;body>?lt;html>的子QchildrenQ节点，互相之间是兄弟（siblingQ节点；<body>下面才是子节?lt;table>?lt;span>?lt;p>{等。如下图Q?
q个是不是跟XML的结构有点相似呢。不同的是，HTML文档的树形主要包含表C元素、标记的节点和表C文本串的节炏V?/p>7.4.2、HTML文档的节?br /> DOM下，HTML文档各个节点被视为各U类型的Node对象。每个Node对象都有自己的属性和ҎQ利用这些属性和Ҏ可以遍历整个文档树。由于HTML文档的复杂性，DOM定义了nodeType来表C点的cd。这里列出Node常用的几U节点类型：
| 接口 | nodeType帔R | nodeType?/td> | 备注 |
| Element | Node.ELEMENT_NODE | 1 | 元素节点 |
| Text | Node.TEXT_NODE | 3 | 文本节点 |
| Document | Node.DOCUMENT_NODE | 9 | document |
| Comment | Node.COMMENT_NODE | 8 | 注释的文?/td> |
| DocumentFragment | Node.DOCUMENT_FRAGMENT_NODE | 11 | document片断 |
| Attr | Node.ATTRIBUTE_NODE | 2 | 节点属?/td> |
DOM树的根节Ҏ个Document对象Q该对象的documentElement属性引用表C文档根元素的Element对象Q对于HTML文档Q这个就?lt;html>标记Q。Javascript操作HTML文档的时候，documentx向整个文档，<body>?lt;table>{节点类型即为Element。Commentcd的节点则是指文档的注释。具体节点类型的含义Q请参考《Javascript权威指南》，在此不赘q?/p>
Document定义的方法大多数是生产型ҎQ主要用于创建可以插入文档中的各U类型的节点。常用的DocumentҎ有：
| Ҏ | 描述 |
| createAttribute() | 用指定的名字创徏新的Attr节点?/td> |
| createComment() | 用指定的字符串创建新的Comment节点?/td> |
| createElement() | 用指定的标记名创建新的Element节点?/td> |
| createTextNode() | 用指定的文本创徏新的TextNode节点?/td> |
| getElementById() | q回文档中具有指定id属性的Element节点?/td> |
| getElementsByTagName() | q回文档中具有指定标记名的所有Element节点?/td> |
对于Element节点Q可以通过调用getAttribute()、setAttribute()、removeAttribute()Ҏ来查询、设|或者删除一个Element节点的性质Q比?lt;table>标记的border属性。下面列出Element常用的属性：
| 属?/td> | 描述 |
| tagName | 元素的标记名Uͼ比如<p>元素为P。HTML文档q回的tabName均ؓ大写?/td> |
Element常用的方法：
| Ҏ | 描述 |
| getAttribute() | 以字W串形式q回指定属性的倹{?/td> |
| getAttributeNode() | 以Attr节点的Ş式返回指定属性的倹{?/td> |
| getElementsByTabName() | q回一个Node数组Q包含具有指定标记名的所有Element节点的子孙节点，光序ؓ在文档中出现的顺序?/td> |
| hasAttribute() | 如果该元素具有指定名字的属性，则返回true?/td> |
| removeAttribute() | 从元素中删除指定的属性?/td> |
| removeAttributeNode() | 从元素的属性列表中删除指定的Attr节点?/td> |
| setAttribute() | 把指定的属性设|ؓ指定的字W串|如果该属性不存在则添加一个新属性?/td> |
| setAttributeNode() | 把指定的Attr节点d到该元素的属性列表中?/td> |
Attr对象代表文档元素的属性，有name、value{属性，可以通过Node接口的attributes属性或者调用Element接口的getAttributeNode()Ҏ来获取。不q，在大多数情况下，使用Element元素属性的最单方法是getAttribute()和setAttribute()两个ҎQ而不是Attr对象?
7.4.3、用DOM操作HTML文档Node对象定义了一pd属性和ҎQ来方便遍历整个文档。用parentNode属性和childNodes[]数组可以在文档树中上下移动；通过遍历childNodes[]数组或者用firstChild和nextSibling属性进行@环操作，也可以用lastChild和previousSiblingq行逆向循环操作Q也可以枚D指定节点的子节点。而调用appendChild()、insertBefore()、removeChild()、replaceChild()Ҏ可以改变一个节点的子节点从而改变文档树?
需要指出的是，childNodes[]的值实际上是一个NodeList对象。因此，可以通过遍历childNodes[]数组的每个元素，来枚举一个给定节点的所有子节点Q通过递归Q可以枚举树中的所有节炏V下表列ZNode对象的一些常用属性和ҎQ?/p>
Node对象常用属性：
| 属?/td> | 描述 |
| attributes | 如果该节Ҏ一个ElementQ则以NamedNodeMap形式q回该元素的属性?/td> |
| childNodes | 以Node[]的Ş式存攑ֽ前节点的子节炏V如果没有子节点Q则q回I数l?/td> |
| firstChild | 以Node的Ş式返回当前节点的W一个子节点。如果没有子节点Q则为null?/td> |
| lastChild | 以Node的Ş式返回当前节点的最后一个子节点。如果没有子节点Q则为null?/td> |
| nextSibling | 以Node的Ş式返回当前节点的兄弟下一个节炏V如果没有这L节点Q则q回null?/td> |
| nodeName | 节点的名字，Element节点则代表Element的标记名U?/td> |
| nodeType | 代表节点的类型?/td> |
| parentNode | 以Node的Ş式返回当前节点的父节炏V如果没有父节点Q则为null?/td> |
| previousSibling | 以Node的Ş式返回紧挨当前节炏V位于它之前的兄弟节炏V如果没有这L节点Q则q回null?/td> |
Node对象常用ҎQ?/p>
| Ҏ | 描述 |
| appendChild() | 通过把一个节点增加到当前节点的childNodes[]l，l文档树增加节点?/td> |
| cloneNode() | 复制当前节点Q或者复制当前节点以及它的所有子孙节炏V?/td> |
| hasChildNodes() | 如果当前节点拥有子节点，则将q回true?/td> |
| insertBefore() | l文档树插入一个节点，位置在当前节点的指定子节点之前。如果该节点已经存在Q则删除之再插入到它的位|?/td> |
| removeChild() | 从文档树中删除ƈq回指定的子节点?/td> |
| replaceChild() | 从文档树中删除ƈq回指定的子节点Q用另一个节Ҏ换它?/td> |
接下来，让我们用上q的DOM应用~程接口Q来试着操作HTML文档?/p>
A、遍历文档的节点
DOM把一个HTML文档视ؓ树，因此Q遍历整个树是应该是家常侉K。跟之前说过的一Pq里我们提供两个遍历树的例子。通过它，我们能够学会如何使用childNodes[]和firstChile、lastChild、nextSibling、previousSibling遍历整棵树?/p>
例子1-- sample3_1.htmQ?br /> q个例子使用了childNodes[]和递归方式来遍历整个文档，l计文档中出现的Element元素LQƈ把Element标记名全部打印出来。需要特别注意的是，在用DOMӞ必须{文档被装蝲完毕再执行遍历等行ؓ操作文档。sample3_1.htm具体代码如下Q?/p>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文?lt;/title>
<script language="javascript">
var elementName = ""; //全局变量Q保存Element标记名，使用完毕要清I?
function countTotalElement(node) { //参数node是一个Node对象
var total = 0;
if(node.nodeType == 1) { //查node是否为Element对象
total++; //如果是，计数器加1
elementName = elementName + node.tagName + "\r\n"; //保存标记?
}
var childrens = node.childNodes; //获取node的全部子节点
for(var i=0;i<childrens.length;i++) {
total += countTotalElement(childrens[i]); //在每个子节点上进行递归操作
}
return total;
}
</script>
</head>
<body>
<a href="javascript:void(0)"
onClick="alert('标记LQ? + countTotalElement(document) + '\r\n
全部标记如下Q\r\n' + elementName);elementName='';">开始统?lt;/a>
</body>
</html>
例子2 ?sample3_2.htmQ?br /> 接下来用firstChile、lastChild、nextSibling、previousSibling遍历整个文档树。修改一下countTotalElement函数Q其他跟sample3_1.htm一P
function countTotalElement(node) { //参数node是一个Node对象
var total = 0;
if(node.nodeType == 1) { //查node是否为Element对象
total++; //如果是，计数器加1
elementName = elementName + node.tagName + "\r\n"; //保存标记?
}
var childrens = node.childNodes; //获取node的全部子节点
for(var m=node.firstChild; m!=null;m=m.nextSibling) {
total += countTotalElement(m); //在每个子节点上进行递归操作
}
return total;
}
B、搜索文档中特定的元?br /> 在用DOM的过E中Q有时候需要定位到文档中的某个特定节点Q或者具有特定类型的节点列表。这U情况下Q可以调用Document对象的getElementsByTagName()和getElementById()Ҏ来实现?/p>
document.getElementsByTagName()q回文档中具有指定标记名的全部Element节点数组Q也是NodeListcdQ。Element出现在数l中的顺序就是他们在文档中出现的序。传递给getElementsByTagName()的参数忽略大写。比如，惛_位到W一?lt;table>标记Q可以这样写Qdocument.getElementsByTagName(“table?[0]。例外的Q可以用document.body定位?lt;body>标记Q因为它是唯一的?/p>
getElementsByTagName()q回的数l取决于文档。一旦文档改变，q回l果也立x变。相比，getElementById()则比较灵z，可以随时定位到目标，只是要实现给目标元素一个唯一的id属性倹{这个我们在《AJAX开发简略》的“联菜单”例子中已经使用q了?/p>
Element对象也支持getElementsByTagName()和getElementById()。不同的是，搜烦领域只针对调用者的子节炏V?/p>
C、修Ҏ档内?br /> 遍历整棵文档树、搜索特定的节点Q我们最l目的之一是要修改文档内容。接下来的三个例子将使用Node的几个常用方法，来演C如何修Ҏ档内宏V?/p>
例子3 -- sample4_1.htmQ?br /> q个例子包含三个文本节点和一个按钮。点L钮后Q三个文本节点和按钮的顺序将被颠倒。程序用了Node的appendChild()和removeChild()Ҏ?/p>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文?lt;/title>
<script language="javascript">
function reverseNode(node) { // 颠倒节点node的顺?
var kids = node.childNodes; //获取子节点列?
var kidsNum = kids.length; //l计子节ҎL
for(var i=kidsNum-1;i>=0;i--) { //逆向遍历子节点列?
var c = node.removeChild(kids[i]); //删除指定子节点，保存在c?
node.appendChild(c); //c攑֜C|上
}
}
</script>
</head>
<body>
<p>W一?lt;/p>
<p>W二?lt;/p>
<p>W三?lt;/p>
<p><input type="button" name="reverseGo" value="颠?
onClick="reverseNode(document.body)"></p>
</body>
</html>
例子4-- sample4_2.htmQ?br /> 例子1通过直接操作body的子节点来修Ҏ档。在HTML文档中，布局和定位常帔R过表格<table>来实现。因此，例子4演C操作表格内容，表格的四个单元行顺序颠倒。如果没有?lt;tbody>标签Q则<table>把全部的<tr>当做是属于一个子节点<tbody>Q所以我们采用数l缓存的方式Q把行数据颠倒一下。这个例子同时也演示了如何用DOM创徏表格单元行?/p>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文?lt;/title>
<script language="javascript">
function reverseTable() {
var node = document.getElementsByTagName("table")[0]; //W一个表?
var child = node.getElementsByTagName("tr"); //取得表格内的所有行
var newChild = new Array(); //定义~存数组Q保存行内容
for(var i=0;i<child.length;i++) {
newChild[i] = child[i].firstChild.innerHTML;
}
node.removeChild(node.childNodes[0]); //删除全部单元?
var header = node.createTHead(); //新徏表格行头
for(var i=0;i<newChild.length;i++) {
var headerrow = header.insertRow(i); //插入一个单元行
var cell = headerrow.insertCell(0); //在单元行中插入一个单元格
//在单元格中创建TextNode节点
cell.appendChild(document.createTextNode(newChild[newChild.length-i-1]));
}
}
</script>
</head>
<body>
<table width="200" border="1" cellpadding="4" cellspacing="0">
<tr>
<td height="25">W一?lt;/td>
</tr>
<tr>
<td height="25">W二?lt;/td>
</tr>
<tr>
<td height="25">W三?lt;/td>
</tr>
<tr>
<td height="25">W四?lt;/td>
</tr>
</table>
<br>
<input type="button" name="reverse" value="开始颠? onClick="reverseTable()">
</body>
</html>
例子5 -- sample4_3.htmQ?br /> 正如我们在Node节点介绍部分所指出的那PappendChild()、replaceChild()、removeChild()、insertBefore()Ҏ会立x变文档的l构。下面的例子包含两个表格Q我们试着把表g的内Ҏ换表g的内宏V?/p>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文?lt;/title>
<script language="javascript">
function replaceContent() {
var table1 = document.getElementsByTagName("table")[0];
var table2 = document.getElementsByTagName("table")[1];
var kid1 = table1.firstChild.firstChild.firstChild; //定位?lt;td>节点
var kid2 = table2.firstChild.firstChild.firstChild; //定位?lt;td>节点
var repKid = kid2.firstChild; //定位到表g<td>内含的TextNode节点
try {
//用表g的单元格内容替换表格一的单元格内容Q表g变成没有单元格内?
kid1.replaceChild(repKid,kid1.firstChild);
//下面注释如果开放，出现object errorQ因g已经被改?
//kid2.replaceChild(kid1.firstChild,kid2.firstChild);
}catch(e){
alert(e);
}
}
</script>
</head>
<body>
<table width="200" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>表格一</td>
</tr>
</tbody>
</table>
<br>
<table width="200" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>表格?lt;/td>
</tr>
</tbody>
</table>
<br>
<input type="button" name="replaceNode" value="替换" onClick="replaceContent()">
</body>
</html>
注意Q当执行kid1.replaceChild(repKid,kid1.firstChild);的时候，table2的子节点已经被{Udtable1了，table2已经没有子节点，不能再调用table2的子节点。看看代码的注释Q试着q行一下，应该q道文档是怎么改变的了?/p>
D、往文档d新内?br /> 在学会遍历、搜索、修Ҏ档之后，我们现在试着|文档添加新的内宏V其实没有什么新意，只是利用我们上述提到的Node的属性和Ҏ而已Q还是操?lt;table>标记的内宏V有新意的是Q我们要实现一个留aѝ是的，留言，你可以往里面留言Q只是不能刷新噢?/p>
例子6 ?sample5_1.htmQ?/strong>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文?lt;/title>
<script language="javascript">
function insertStr() {
var f = document.form1;
var value = f.str.value;
if(value!="") {
// 从最l的TextNode节点开始，慢慢形成<tbody>l构
var text = document.createTextNode(value); //新徏一个TextNode节点
var td = document.createElement("td"); //新徏一个tdcd的Element节点
var tr = document.createElement("tr"); //新徏一个trcd的Element节点
var tbody = document.createElement("tbody"); //新徏一个tbodycd的Element节点
td.appendChild(text); //节点text加入td?
tr.appendChild(td); //节点td加入tr?
tbody.appendChild(tr); //节点tr加入tbody?
var parNode = document.getElementById("table1"); //定位到table?
parNode.insertBefore(tbody,parNode.firstChild); //节点tbody插入到节炚w?
//parNode.appendChild(tbody); //节点tbody加入节点N
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<input name="str" type="text" id="str" value="">
<input name="insert" type="button" id="insert" value="留言" onClick="insertStr()">
</form>
<table width="400" border="1" cellspacing="0" cellpadding="0" id="table1">
<tbody>
<tr>
<td height="25">|友留言列表Q?lt;/td>
</tr>
</tbody>
</table>
</body>
</html>
我们之前说过Q?lt;table>的子节点?lt;tbody>Q?lt;tbody>的子节点才是<tr>Q?lt;tr>?lt;td>的父节点Q最?lt;td>内部的TextNode节点。所以，往<table>增加单元D要逐形成Q就像往树里面添加一个枝桠一P要有叶子有径。看看，q个留言是不是很简单啊。这个例子同时也演示了往<table>表格标记里面增加内容的另一U方法?/p>
E、用DOM操作XML文档
在数据表C方面，XML文档更加l构化。DOM在支持HTML的基上提供了一pd的APIQ支持针对XML的访问和操作。利用这些APIQ我们可以从XML中提取信息，动态的创徏q些信息的HTML呈现文档。处理XML文档Q通常遵@“加载XML文档à提取信息à加工信息à创徏HTML文档”的q程。下面的例子演示了如何加载ƈ处理XML文档?/p>
q个例子包含两个JS函数。loadXML()负责加蝲XML文档Q其中既包含加蝲XML文档?UDOM代码Q又有实现同h作的Microsoft专有API代码。需要提醒注意的是，文档加蝲q程不是瞬间完成的，所以对loadXML()的调用将在加载文档完成之前返回。因此，需要传递给loadXML()一个引用，以便文档加蝲完成后调用?/p>
例子中的另外一个函数makeTable()Q则在XML文档加蝲完毕之后Q用最后前介绍q的DOM应用~程接口dXML文档信息Qƈ利用q些信息形成一个新的table表格?/p>
例子7 -- sample6_1.htmQ?/strong>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文?lt;/title>
<script language="javascript">
function loadXML(handler) {
var url = "employees.xml";
if(document.implementation&&document.implementation.createDocument) {
var xmldoc = document.implementation.createDocument("", "", null);
xmldoc.onload = handler(xmldoc, url);
xmldoc.load(url);
}
else if(window.ActiveXObject) {
var xmldoc = new ActiveXObject("Microsoft.XMLDOM");
xmldoc.onreadystatechange = function() {
if(xmldoc.readyState == 4) handler(xmldoc, url);
}
xmldoc.load(url);
}
}
function makeTable(xmldoc, url) {
var table = document.createElement("table");
table.setAttribute("border","1");
table.setAttribute("width","600");
table.setAttribute("class","tab-content");
document.body.appendChild(table);
var caption = "Employee Data from " + url;
table.createCaption().appendChild(document.createTextNode(caption));
var header = table.createTHead();
var headerrow = header.insertRow(0);
headerrow.insertCell(0).appendChild(document.createTextNode("姓名"));
headerrow.insertCell(1).appendChild(document.createTextNode("职业"));
headerrow.insertCell(2).appendChild(document.createTextNode("工资"));
var employees = xmldoc.getElementsByTagName("employee");
for(var i=0;i<employees.length;i++) {
var e = employees[i];
var name = e.getAttribute("name");
var job = e.getElementsByTagName("job")[0].firstChild.data;
var salary = e.getElementsByTagName("salary")[0].firstChild.data;
var row = table.insertRow(i+1);
row.insertCell(0).appendChild(document.createTextNode(name));
row.insertCell(1).appendChild(document.createTextNode(job));
row.insertCell(2).appendChild(document.createTextNode(salary));
}
}
</script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body onLoad="loadXML(makeTable)">
</body>
</html>
供读取调用的XML文档 ?employees.xmlQ?/strong>
<?xml version="1.0" encoding="gb2312"?>
<employees>
<employee name="J.Doe">
<job>Programmer</job>
<salary>32768</salary>
</employee>
<employee name="A.Baker">
<job>Sales</job>
<salary>70000</salary>
</employee>
<employee name="Big Cheese">
<job>CEO</job>
<salary>100000</salary>
</employee>
</employees>
7.5、处理XML文档qXML文档的AJAX是不完整的。在本部分未完成之前Q有读者说AJAX改名叫AJAHQH应该代表HTML吧）比较合适。应该承认，XML文档在数据的l构化表CZ及接口对接上有先天的优势Q但也不是所有的数据都应该用XML表示。有些时候单U的文本表示可能会更合适。下面先举个AJAX处理q回XML文档的例子再讨论什么时候用XML?br />
7.5.1、处理返回的XML
例子8 -- sample7_1.htmQ?br /> 在这个例子中Q我们采用之前确定的AJAX开发框ӞE微修改一下body内容和processRequest的相应方式，先前的employees.xml的内容读取出来ƈ昄?
body的内容如下：
<input type="button" name="read"
value="dXML" onClick="send_request('employees.xml')">
processRequest()Ҏ修改如下Q?
// 处理q回信息的函?
function processRequest() {
if (http_request.readyState == 4) { // 判断对象状?
if (http_request.status == 200) { // 信息已经成功q回Q开始处理信?
var returnObj = http_request.responseXML;
var xmlobj = http_request.responseXML;
var employees = xmlobj.getElementsByTagName("employee");
var feedbackStr = "";
for(var i=0;i<employees.length;i++) { // 循环demployees.xml的内?
var employee = employees[i];
feedbackStr += "员工Q? + employee.getAttribute("name");
feedbackStr +=
" 职位Q? + employee.getElementsByTagName("job")[0].firstChild.data;
feedbackStr +=
" 工资Q? + employee.getElementsByTagName("salary")[0].firstChild.data;
feedbackStr += "\r\n";
}
alert(feedbackStr);
} else { //面不正?
alert("您所h的页面有异常?);
}
}
}
q行一下，看来效果q不错：
现在的web应用E序往往采用了MVC三层剥离的设计方式。XML作ؓ一U数据保存、呈现、交互的文档Q其数据往往是动态生成的Q通常由JavaBean转换q来。由JavaBean转换成XML文档的方式有好几U，选择合适的转换方式往往能达C半功倍的效果。下面介l两U常用的方式Q以侉K要的时候根据情况取舍?/p>
A、类自行序列化成XML
c自行序列化成XMLx个类都实现自qtoXML()ҎQ选择合适的API、适当的XMLl构、尽量便L生成逻辑快速生成相应的XML文档。显Ӟq种方式必须要求每个cȝ写专门的XML生成代码Q每个类只能调用自己的toXML()Ҏ。应用诸如JDOM{一些现成的APIQ可以减不开发投入。例?是一个利用JDOM的API形成的toXML()Ҏ?/strong>
例子9 -- toXml() ?JDOM 实现 -- EmploycȝtoXml()ҎQ?/strong>
public Element toXml() {
Element employee = new Element(“employee?;
Employee.setAttribute(“name?name);
Element jobE = new Element(“job?.addContent(job);
employee.setContent(jobE);
Element salaryE = new Element(“salary?.addContent(salary);
employee.setContent(salaryE);
return employee;
}
JDOM提供了现成的APIQ得序列化成XML的工作更加简单，我们只需要把toXML()外面包装一个DocumentQ然后用XMLOutputter把文档写入servlet可以了。toXml()允许递归调用其子cȝtoXML()ҎQ以便生成包含子囄XML文档?/p>
使用c自行序列化成XML的方式，要每个类都实现自qtoXML()ҎQ而且存在数据模型与视图耦合的问题，卌么ؓ每个可能的视囄写独立的toXML()ҎQ要么心甘情愿接收冗余的数据Q一旦数据结构或者文档发生改变，toXML()p做必要的修改?/p>
B、页面模板生成XML方式
一般的Q可以采用通用的页面模板技术来生成XML文档Q这个XML文档可以W合M需要的数据模型Q供AJAX灉|的调用。另外，模板可以采用M标记语言~写Q提高工作效率。下面是一个采用Struts标签库编写的XML文档Q输Z前提到的employees.xmlQ?/p>
Sample8_2.jspQ?/strong>
<%@ page contentType="application/xml; charset=gb2312" import="Employee"%>
<%@ page import="java.util.Collection,java.util.ArrayList"%>
<?xml version="1.0"?>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%
Employee em1 = new Employee();
em1.setName("J.Doe");
em1.setJob("Programmer");
em1.setSalary("32768");
Employee em2 = new Employee();
em2.setName("A.Baker");
em2.setJob("Sales");
em2.setSalary("70000");
Employee em3 = new Employee();
em3.setName("Big Cheese");
em3.setJob("CEO");
em3.setSalary("100000");
Collection employees = new ArrayList();
employees.add(em1);
employees.add(em2);
employees.add(em3);
pageContext.setAttribute("employees",employees);
%>
<employees>
<logic:iterate name="employees" id="employee">
<employee name="<bean:write name='employee' property='name'/>">
<job><bean:write name="employee" property="job"/></job>
<salary><bean:write name="employee" property="salary"/></salary>
</employee>
</logic:iterate>
</employees>
采用面模板生成XML方式Q需要ؓ每个需要的的数据模型徏立一个对立的JSP文gQ用来生成符合规范的XML文档Q而不能仅仅在cȝtoXML()Ҏ中组l对象图来实现。不q，倒是可以更加方便的确保标记匹配、元素和属性的序正确以及XML实体正确转义?/p>
参考资料中Philip McCarthy的文章还描述了一UJavascript对象标注的生成方式，本文在此不赘q。有兴趣的读者可以自行查看了解?/p>7.5.3、如何在使用XMLq是普通文本间权衡
使用XML文档实有其方便之处。不qXML文档的某些问题倒是要考虑一下，比如说gq，x务器不能立即解析XML文档成ؓDOM模型。这个问题在一定程度上会媄响AJAX要求的快速反应能力。另外，某些情况下我们ƈ不需要用XML来表C数据，比如说数据够简单成只有一个字W串而已。就好像我们之前提到的数据校验和U联菜单的例子一栗所以，个h认ؓ在下面这些情况下可以考虑使用XML来作为数据表C的介质Q?
- 数据比较复杂Q需要用XML的结构化方式来表C?
- 不用考虑带宽和处理效率支?
- 与系l其他API或者其他系l交互，作ؓ一U数据中转中?
- 需要特定各式的输出视图而文本无法表C的
MQ要认真评估两种表示方式的表C成本和效率Q选择合适的合理的表C方式。
在关于AJAX的系列文章的下一，我们综合用DOM和XMLQ来实现一个可以持久化的简单留aѝ另外，q将试着模拟MSN Space的部分功能，来体会AJAX的魅力?a name="a8">
参考文章：| 作者： | fanscial | 标题Q?/td> | 《AJAX介?/td> |
| |址Q?/td> | http://m.tkk7.com/fanscial/archive/2005/08/31/11628.html | ||
| 作者： | Amour GUO | 标题Q?/td> | 《AJAX内部交流文档?/td> |
| |址Q?/td> | http://www.dragonson.com/doc/ajax.html | ||
| 作者： | MoztwWiki | 标题Q?/td> | 《AJAX上手?/td> |
| |址Q?/td> | http://wiki.moztw.org/index.php/AJAX_%E4%B8%8A%E6%89%8B%E7%AF%87 | ||
| 作者： | Philip McCarthy | 标题Q?/td> | 面向Java开发h员的Ajax:构徏动态的Java应用E序 |
| |址Q?/td> | http://kb.csdn.net/java/Articles/200510/bed0423e-5297-49c9-9464-0e3eb733c8b5.html | ||
| 作者： | Philip McCarthy | 标题Q?/td> | 面向Java开发h员的Ajax:Ajax的Java对象序列?/td> |
| |址Q?/td> | http://kb.csdn.net/java/Articles/200510/a5b630cf-a2c2-46f1-8e3b-eadde723e734.html | ||
| 作者： | David Flanagan | 书名Q?/td> | 《Javascript权威指南?/td> |
AJAXQAsynchronous JavaScript and XMLQ其实是多种技术的l合Q包括Javascript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest。其中：
使用XHTML和CSS标准化呈玎ͼ使用DOM实现动态显C和交互Q用XML和XSTLq行数据交换与处理，使用XMLHttpRequest对象q行异步数据dQ用Javascriptl定和处理所有数据?/p>
在AJAX提出之前Q业界对于上q技术都只是单独的用，没有l合使用Q也是由于之前的技术需求所军_的。随着应用的广泛，AJAX也成为香饽饽了?/p>二、现状与需要解决的问题
传统的Web应用采用同步交互q程Q这U情况下Q用户首先向HTTP服务器触发一个行为或h的呼求。反q来Q服务器执行某些dQ再向发求的用户q回一个HTML面。这是一U不q诏的用户体验，服务器在处理h的时候，用户多数旉处于{待的状态，屏幕内容也是一片空白。如下图Q?
自从采用文本作为Web传输和呈C后，我们都是采用q么一套传输方式。当负蝲比较的时候，qƈ不会体现出有什么不妥。可是当负蝲比较大，响应旉要很长，1分钟?分钟……数分钟的时候，q种{待׃可忍受了。严重的Q超q响应时_服务器干脆告诉你面不可用。另外，某些时候，我只是想改变面一部分的数据Q那Z么我必须重新加蝲整个面呢？Q当软g设计来讲Ih性化的时候，q么p糕的用户体验简直与q种原则背道而驰。ؓ什么老是要让用户{待服务器取数据呢？臛_Q我们应该减用L待的旉。现在，除了E序设计、编码优化和服务器调优之外，q可以采用AJAX?/p>三、ؓ什么用AJAX
与传l的Web应用不同QAJAX采用异步交互q程。AJAX在用户与服务器之间引入一个中间媒介，从而消除了|络交互q程中的处理—等待—处理—等待缺炏V用L览器在执行d时即装蝲了AJAX引擎。AJAX引擎用JavaScript语言~写Q通常藏在一个隐藏的框架中。它负责~译用户界面及与服务器之间的交互。AJAX引擎允许用户与应用Y件之间的交互q程异步q行Q独立于用户与网l服务器间的交流。现在，可以用Javascript调用AJAX引擎来代替生一个HTTP的用户动作，内存中的数据~辑、页面导航、数据校验这些不需要重新蝲入整个页面的需求可以交lAJAX来执行?
使用AJAXQ可以ؓISP、开发h员、终端用户带来可见的便捷Q?/p>
- 减轻服务器的负担。AJAX的原则是“按需取数据”，可以最大程度的减少冗余hQ和响应Ҏ务器造成的负担?
- 无刷新更新页面，减少用户心理和实际的{待旉。特别的Q当要读取大量的数据的时候，不用像Reload那样出现白屏的情况，AJAX使用XMLHTTP对象发送请求ƈ得到服务器响应，在不重新载入整个面的情况下用Javascript操作DOM最l更新页面。所以在d数据的过E中Q用h面对的不是白屏，是原来的面内容Q也可以加一个Loading的提C框让用L道处于读取数据过E）Q只有当数据接收完毕之后才更新相应部分的内容。这U更新是瞬间的，用户几乎感觉不到?
- 带来更好的用户体验?
- 可以把以前一些服务器负担的工作{嫁到客户端，利用客户端闲|的能力来处理，减轻服务器和带宽的负担，节约I间和宽带租用成本?
- 可以调用外部数据?
- Z标准化的q被q泛支持的技术，不需要下载插件或者小E序?
- q一步促q页面呈现和数据的分R?
在应用AJAX开发上面，Google当仁不让是表率。Orkut、Gmail、Google Groups、Google Maps、Google Suggest都应用了q项技术。Amazon的A9.com搜烦引擎也采用了cM的技术?
微Y也在U极开发更为完善的AJAX应用Q它卛_推出代号为Atlas的AJAX工具。Atlas的功能超了AJAX本nQ包括整合Visual Studio的调试功能。另外，新的ASP.NET控g客户端控件与服务器端代码的捆l更为简ѝAtlas客户脚本框架QAtlas Clent Script FrameworkQ也使与|页及相关项目的交互更ؓ便利。但Visual Studio 2005中ƈ不包含此功能?/p>
微Y最q宣布Atlas客户脚本框架包含如下内容（详细资料误问Atlas计划|站Q：
- 一个可扩展的核心框Ӟ它添加了JavaScript功能Q如生命同时期管理、承管理、多点传送处理器和界面管理?
- 一个常见功能的基本cdQ有丰富的字W串处理、计时器和运行Q务?
- 为HTML附加动态行为的用户界面框架?
- 一l用来简化服务器q通和|络讉K的网l堆栈?
- 一l丰富的用户界面开发控Ӟ如：自动完成的文本框、动d拖放?
- 处理览器脚本行为差异的览器兼容层面?
典型的，微YAJAX技术应用在MSN Space上面。很多h一直都对MS Space服务感到很奇怪，当提交回复评Z后，览器会暂时停顿一下，然后在无h的情况下把我提交的评论显C出来。这个就是应用了AJAX的效果。试惻I如果d一个评论就要重新刷新整个页面，那可真费事?/p>
目前QAJAX应用最普遍的领域是GIS-Map斚w。GIS的区域搜索强调快速响应，AJAX的特Ҏ好符合这U需求?/p>五、用AJAX改进你的设计
AJAX虽然可以实现无刷新更新页面内容，但是也不是什么地斚w可以用，主要应用在交互较多、频J读数据、数据分c良好的Web应用中。现在，让我们D两个例子Q看看如何用AJAX改进你的设计?a>
例子1Q数据校?br /> 在输入form表单内容的时候，我们通常需要确保数据的唯一性。因此，常常在页面上提供“唯一性校验”按钮，让用L击，打开一个校验小H口Q或者等form提交到服务器端，由服务器判断后在q回相应的校验信息。前者，window.open操作本来是比较耗费资源的，通常由window. showModalDialog代替Q即使这样也要弹Z个对话框Q后者，需要把整个面提交到服务器q由服务器判断校验，q个q程不仅旉长而且加重了服务器负担。而用AJAXQ这个校验请求可以由XMLHttpRequest对象发出Q整个过E不需要弹出新H口Q也不需要将整个面提交到服务器Q快速又不加重服务器负担?a>例子2Q按需取数据—联菜?br /> 以前Qؓ了避免每ơ对菜单的操作引L重蝲面Q不采用每次调用后台的方式，而是一ơ性将U联菜单的所有数据全部读取出来ƈ写入数组Q然后根据用L操作用JavaScript来控制它的子集项目的呈现Q这栯然解决了操作响应速度、不重蝲面以及避免向服务器频繁发送请求的问题Q但是如果用户不对菜单进行操作或只对菜单中的一部分q行操作的话Q那d的数据中的一部分׃成ؓ冗余数据而浪费用L资源Q特别是在菜单结构复杂、数据量大的情况下（比如菜单有很多、每一U菜又有上百个项目）Q这U弊端就更ؓH出?
现在应用AJAXQ在初始化页面时我们只读出它的第一U的所有数据ƈ昄Q在用户操作一U菜单其中一ҎQ会通过Ajax向后台请求当前一U项目所属的二子菜单的所有数据，如果再l请求已l呈现的二菜单中的一ҎQ再向后面请求所操作二菜单对应的所有三U菜单的所有数据，以此cL……这P用什么就取什么、用多少取多少Q就不会有数据的冗余和浪费，减少了数据下载总量Q而且更新面时不用重载全部内容，只更新需要更新的那部分即可，相对于后台处理ƈ重蝲的方式羃短了用户{待旉Q也把对资源的浪贚w到最低?/p>例子3Q读取外部数?br /> AJAX可以调用外部数据Q因此，可以对一些开发的数据比如XML文档、RSS文档q行二次加工Q实现数据整合或者开发应用程序?a>六、AJAX的缺?/a>
AJAX不是完美的技术。用AJAXQ它的一些缺陷不得不权衡一下：
- AJAX大量使用了Javascript和AJAX引擎Q而这个取决于览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持QMozilla虽然也支持AJAXQ但是提供XMLHttpRequest的方式不一栗所以，使用AJAX的程序必L试针对各个浏览器的兼Ҏ?
- AJAX更新面内容的时候ƈ没有h整个面Q因此，|页的后退功能是失效的Q有的用戯l常搞不清楚现在的数据是旧的q是已经更新q的。这个就需要在明显位置提醒用户“数据已更新”?
- Ҏ媒体的支持没有FLASH、Java Applet好?
- 一些手持设备（如手机、PDA{）现在q不能很好的支持Ajax?/li>
2006 q?1 ?04 ?/p>
五年前，如果不知?XMLQ您是一只无人重视的丑小鸭。十八个月前QRuby 成了x的中心，不知?Ruby 的程序员只能坐冷板凳了。今天，如果惌上最新的技术时，那您的目标就?Ajax?/p>
但是QAjax ?em>仅仅 是一U时，它是一U构建网站的强大ҎQ而且不像学习一U全新的语言那样困难?/p>
但在详细探讨 Ajax 是什么之前，先让我们花几分钟了解 Ajax ?/em> 什么。目前，~写应用E序时有两种基本的选择Q?/p>
两者是cM的，桌面应用E序通常?CD Z质（有时候可从网站下载）q完全安装到您的计算Z。桌面应用程序可能用互联网下蝲更新Q但q行q些应用E序的代码在桌面计算Z。Web 应用E序q行在某处的 Web 服务器上 —?毫不奇怪，要通过 Web 览器访问这U应用程序?/p>
不过Q比q些应用E序的运行代码放在何处更重要的是Q应用程序如何运转以及如何与其进行交互。桌面应用程序一般很快（在您的计算Zq行Q不用等待互联网q接Q，h漂亮的用L面（通常和操作系l有养I和非凡的动态性。可以单凅R选择、输入、打开菜单和子菜单、到处E游，基本上不需要等待?/p>
另一斚wQWeb 应用E序是最新的潮流Q它们提供了在桌面上不能实现的服务（比如 Amazon.com ?eBayQ。但是，伴随着 Web 的强大而出现的是等待，{待服务器响应，{待屏幕hQ等待请求返回和生成新的面?/p>
昄q样说过于简略了Q但基本的概念就是如此。您可能已经猜到QAjax 试建立桌面应用E序的功能和交互性，与不断更新的 Web 应用E序之间的桥梁。可以用像桌面应用E序中常见的动态用L面和漂亮的控Ӟ不过是在 Web 应用E序中?/p>
q等什么呢Q我们来看看 Ajax 如何笨拙的 Web 界面转化成能q速响应的 Ajax 应用E序吧?/p>
在谈?Ajax Ӟ实际上涉及到多种技术，要灵zdq用它必L入了解这些不同的技术（本系列的头几文章将分别讨论q些技术）。好消息是您可能已经非常熟悉其中的大部分技术，更好的是q些技术都很容易学习，q不像完整的~程语言Q如 Java ?RubyQ那样困难?/p>
Z说一下，Ajax ?Asynchronous JavaScript and XMLQ以?DHTML {）的羃写。这个短语是 Adaptive Path ?Jesse James Garrett 发明的（请参?参考资?/font>Q，按照 Jesse 的解释，q?em>不是 个首字母~写词?/p>
下面?Ajax 应用E序所用到的基本技术： 我们来进一步分析这些技术的职责。以后的文章中我深入讨些技术，目前只要熟悉q些lg和技术就可以了。对q些代码熟悉，pҎ从对q些技术的零散了解转变到真正把握这些技术（同时也真正打开?Web 应用E序开发的大门Q?/p>
要了解的一个对象可能对您来说也是最陌生的，? 下一期文章中进一步讨个对象，现在要知道这是处理所有服务器通信的对象。l阅M前，先停下来想一惻I通过 在一般的 Web 应用E序中，用户填写表单字段q单?Submit 按钮。然后整个表单发送到服务器，服务器将它{发给处理表单的脚本（通常?PHP ?JavaQ也可能?CGI q程或者类似的东西Q，脚本执行完成后再发送回全新的页面。该面可能是带有已l填充某些数据的新表单的 HTMLQ也可能是确认页面，或者是hҎ原来表单中输入数据选择的某些选项的页面。当Ӟ在服务器上的脚本或程序处理和q回新表单时用户必须{待。屏q变成一片空白，{到服务器返回数据后再重新绘制。这是交互性差的原因，用户得不到立卛_馈，因此感觉不同于桌面应用程序?/p>
Ajax 基本上就是把 JavaScript 技术和
Ajax 的定?/strong>
div?code>span 和其他动?HTML 元素来标?HTML?
XMLHttpRequest。这是一?JavaScript 对象Q创对象很简单，?font color="#996699">清单 1 所C?/p>
<script language="javascript" type="text/javascript">
var xmlHttp = new XMLHttpRequest();
</script>
XMLHttpRequest 对象与服务器q行对话的是 JavaScript 技术。这不是一般的应用E序，q恰恰是 Ajax 的强大功能的来源?/p>
XMLHttpRequest 对象攑֜ Web 表单和服务器之间。当用户填写表单Ӟ数据发送给一?JavaScript 代码?em>不是
然后Q服务器数据返?JavaScript 代码Q仍然在 Web 表单中）Q后者决定如何处理这些数据。它可以q速更新表单数据，让h感觉应用E序是立卛_成的Q表单没有提交或h而用户得C新数据。JavaScript 代码甚至可以Ҏ到的数据执行某种计算Q再发送另一个请求，完全不需要用户干预！q就?XMLHttpRequest 的强大之处。它可以Ҏ需要自行与服务器进行交互，用户甚至可以完全不知道幕后发生的一切。结果就是类g桌面应用E序的动态、快速响应、高交互性的体验Q但是背后又拥有互联|的全部强大力量?/p>
得到 XMLHttpRequest 的句柄后Q其他的 JavaScript 代码非常简单了。事实上Q我们将使用 JavaScript 代码完成非常基本的Q务：
- 获取表单数据QJavaScript 代码很容易从 HTML 表单中抽取数据ƈ发送到服务器?
- 修改表单上的数据Q更新表单也很简单，从设|字D值到q速替换图像?
- 解析 HTML ?XMLQ?JavaScript 代码操纵 DOMQ请参阅 下一?/font>Q，处理 HTML 表单服务器返回的 XML 数据的结构?
对于前两点，需要非常熟?getElementById() ҎQ如 清单 2 所C?/p>
清单 2. ?JavaScript 代码捕获和设|字D?/strong>
|
q里没有特别需要注意的地方Q真是好极了Q您应该认识到这里ƈ没有非常复杂的东ѝ只要掌握了 XMLHttpRequestQAjax 应用E序的其他部分就是如 清单 2 所C的?JavaScript 代码了，混合有少量的 HTML。同Ӟq要用一点儿 DOMQ我们就来看看吧?/p>
最后还?DOMQ即文档对象模型。可能对有些读者来?DOM 有点儿o人生畏，HTML 设计者很用它Q即?JavaScript E序员也不大用到它，除非要完成某w端编EQ务。大量?DOM ?em>?/em> 复杂?Java ?C/C++ E序Q这可能是 DOM 被认为难以学习的原因?/p>
q运的是Q在 JavaScript 技术中使用 DOM 很容易，也非常直观。现在，按照常规也许应该说明如何使用 DOMQ或者至要l出一些示例代码，但这样做也可能误导您。即使不理会 DOMQ仍然能深入地探?AjaxQ这也是我准备采用的Ҏ。以后的文章再ơ讨?DOMQ现在只要知道可能需?DOM 可以了。当需要在 JavaScript 代码和服务器之间传?XML 和改?HTML 表单的时候，我们再深入研I?DOM。没有它也能做一些有的工作Q因此现在就?DOM 攑ֈ一边吧?/p>
有了上面的基知识后，我们来看看一些具体的例子?code>XMLHttpRequest ?Ajax 应用E序的核心，而且对很多读者来说可能还比较陌生Q我们就从这里开始吧。从 清单 1 可以看出Q创建和使用q个对象非常单，不是吗？{一{?/p>
q记得几q前的那些讨厌的览器战争吗Q没有一样东西在不同的浏览器上得到同Ll果。不您是否怿Q这些战争仍然在l箋Q虽然规模较。但令h奇怪的是，XMLHttpRequest 成了q场战争的牺牲品之一。因此获?XMLHttpRequest 对象可能需要采用不同的Ҏ。下面我详l地q行解释?/p>
Microsoft 览?Internet Explorer 使用 MSXML 解析器处?XMLQ可以通过 参考资?/font> q一步了?MSXMLQ。因此如果编写的 Ajax 应用E序要和 Internet Explorer 打交道，那么必须用一U特D的方式创徏对象?/p>
但ƈ不是q么单。根?Internet Explorer 中安装的 JavaScript 技术版本不同，MSXML 实际上有两种不同的版本，因此必须对这两种情况分别~写代码。请参阅 清单 3Q其中的代码?Microsoft 览器上创徏了一?XMLHttpRequest?/p>
清单 3. ?Microsoft 览器上创徏 XMLHttpRequest 对象
|
您对q些代码可能q不完全理解Q但没有关系。当本系列文章结束的时候，您将?JavaScript ~程、错误处理、条件编译等有更q了解。现在只要牢牢记住其中的两行代码Q?/p>
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
?/p>
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");?/p>
q两行代码基本上是试使用一个版本的 MSXML 创徏对象Q如果失败则使用另一个版本创对象。不错吧Q如果都不成功，则将 xmlHttp 变量设ؓ falseQ告诉您的代码出C问题。如果出现这U情况，可能是因为安装了?Microsoft 览器，需要用不同的代码?/p>
处理 Mozilla 和非 Microsoft 览?/font>
如果选择的浏览器不是 Internet ExplorerQ或者ؓ?Microsoft 览器编写代码，需要用不同的代码。事实上是 清单 1 所C的一行简单代码：
var xmlHttp = new XMLHttpRequest object;?/p>
q行单得多的代码?Mozilla、Firefox、Safari、Opera 以及基本上所有以M形式或方式支?Ajax 的非 Microsoft 览器中Q创Z XMLHttpRequest 对象?/p>
关键是要支持所?/em> 览器。谁愿意~写一个只能用?Internet Explorer 或者非 Microsoft 览器的应用E序呢？或者更p，要编写一个应用程序两ơ？当然不！因此代码要同时支?Internet Explorer 和非 Microsoft 览器?font color="#996699">清单 4 昄了这L代码?/p>
现在先不那些注释掉的奇怪符P? 最后， 安全性如何呢Q现在浏览器允许用户提高他们的安全等U，关闭 JavaScript 技术，用览器中的Q何选项。在q种情况下，代码无论如何都不会工作。此时必适当地处理问题，q需要单独的一文章来讨论Q要攑ֈ以后了（q个pd够长了吧Q不用担心，d之前也许您就掌握了）。现在要~写一D健壮但不够完美的代码，对于掌握 Ajax 来说很好了。以后我们还讨论更多的l节?/p>
现在我们介绍?AjaxQ对 q缺什么呢Q到底如何? 您已l有了一个崭新的
清单 5 中的CZ Ajax Ҏ是按照q个序l织的： 其中大部分代码意义都很明。开始的代码使用基本 JavaScript 代码获取几个表单字段的倹{然后设|一?PHP 脚本作ؓ链接的目标。要注意脚本 URL 的指定方式，city ?stateQ来自表单）使用单的 GET 参数附加?URL 之后?/p>
然后打开一个连接，q是您第一ơ看C?
清单 4. 以支持多U浏览器的方式创?XMLHttpRequest 对象
/* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
@end @*/
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
@cc_onQ这是特D的 JavaScript ~译器命令，在下一期针?XMLHttpRequest 的文章中详细讨论。这D代码的核心分ؓ三步Q?/p>
xmlHttp 来引用即创建的 XMLHttpRequest 对象?
Msxml2.XMLHTTP 对象创徏它?
Microsoft.XMLHTTP 对象?xmlHttpQ则以非 Microsoft 的方式创对象?xmlHttp 应该引用一个有效的 XMLHttpRequest 对象Q无行什么样的浏览器?/p>
XMLHttpRequest 对象以及如何创徏它也有了基本的了解。如果阅d很仔l，您可能已l知道与服务器上?Web 应用E序打交道的?JavaScript 技术，而不是直接提交给那个应用E序?HTML 表单?/p>
XMLHttpRequest。因D代码非帔R要，您编写的每个 Ajax 应用E序都要以某UŞ式用它Q先看看 Ajax 的基本请?响应模型是什么样吧?/p>
XMLHttpRequest 对象Q现在让它干Ҏ儿吧。首先需要一?Web 面能够调用?JavaScript ҎQ比如当用户输入文本或者从菜单中选择一ҎQ。接下来是在所?Ajax 应用E序中基本都雷同的流E：
function callServer() {
// Get the city and state from the web form
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
// Only go on if there are values for both fields
if ((city == null) || (city == "")) return;
if ((state == null) || (state == "")) return;
// Build the URL to connect to
var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);
// Open a connection to the server
xmlHttp.open("GET", url, true);
// Setup a function for the server to run when it's done
xmlHttp.onreadystatechange = updatePage;
// Send the request
xmlHttp.send(null);
}
XMLHttpRequest。其中指定了q接ҎQGETQ和要连接的 URL。最后一个参数如果设?trueQ那么将h一个异步连接（q就?Ajax 的由来）。如果?falseQ那么代码发求后等待服务器q回的响应。如果设?trueQ当服务器在后台处理h的时候用户仍然可以用表单（甚至调用其他 JavaScript ҎQ?/p>
xmlHttpQ要CQ这?XMLHttpRequest 对象实例Q的 onreadystatechange 属性可以告诉服务器在运?em>完成updatePage() 的方法将被触发?/p>
最后，使用?null 调用 send()。因为已l在h URL 中添加了要发送给服务器的数据Qcity ?stateQ，所以请求中不需要发送Q何数据。这样就发出了请求，服务器按照您的要求工作?/p>
如果没有发现M新鲜的东西，您应该体会到q是多么单明了！除了牢牢C Ajax 的异步特性外Q这些内定w相当单。应该感Ȁ Ajax 使您能够专心~写漂亮的应用程序和界面Q而不用担心复杂的 HTTP h/响应代码?/p>
清单 5 中的代码说明?Ajax 的易用性。数据是单的文本Q可以作?URL 的一部分。用 GET 而不是更复杂?POST 发送请求。没?XML 和要d的内容头部，h体中没有要发送的数据Q换句话_q就?Ajax 的乌托邦?/p>
不用担心Q随着本系列文章的展开Q事情会变得来复杂。您看到如何发?POST h、如何设|请求头部和内容cd、如何在消息中编?XML、如何增加请求的安全性，可以做的工作q有很多Q暂时先不用那些难点，掌握好基本的东西p了，很快我们׃建立一整套?Ajax 工具库?/p>
现在要面Ҏ务器的响应了。现在只要知道两点：
- 什么也不要做，直到
xmlHttp.readyState属性的值等?4? - 服务器将把响应填充到
xmlHttp.responseText属性中?
其中的第一点，卛_l状态，在下一文章中详细讨论Q您进一步了?HTTP h的阶D，可能比您设想的还多。现在只要检查一个特定的|4Q就可以了（下一期文章中q有更多的D介绍Q。第二点Q?xmlHttp.responseText 属性获得服务器的响应，q很单?font color="#996699">清单 6 中的CZҎ可供服务器根?清单 5 中发送的数据调用?/p>
|
q些代码同样既不难也不复杂。它{待服务器调用，如果是就l状态，则用服务器q回的|q里是用戯入的城市和州?ZIP ~码Q设|另一个表单字D늚倹{于是包?ZIP ~码?zipCode 字段H然出现了，而用?em>没有按Q何按?/em>Q这是前面所说的桌面应用E序的感觉。快速响应、动态感受等{，q些都只因ؓ有了小的一D?Ajax 代码?/p>
l心的读者可能注意到 zipCode 是一个普通的文本字段。一旦服务器q回 ZIP ~码Q?code>updatePage() Ҏq城市/州的 ZIP ~码讄那个字段的|用户可以改写该倹{这样做有两个原因：保持例子单，说明有时候可?em>希望 用户能够修改服务器返回的数据。要Cq两点，它们对于好的用户界面设计来说很重要?/p>
q有什么呢Q实际上没有多少了。一?JavaScript Ҏ捕捉用户输入表单的信息ƈ其发送到服务器，另一?JavaScript Ҏ监听和处理响应，q在响应q回时设|字D늚倹{所有这些实际上都依赖于调用 W一?JavaScript ҎQ它启动了整个过E。最明显的办法是?HTML 表单中增加一个按钮，但这?2001 q的办法Q您不这栯为吗Q还是像 清单 7 q样利用 JavaScript 技术吧?/p>
|
如果感觉q像是一D늛当普通的代码Q那对了，正是如此Q当用户?city ?state 字段中输入新的值时Q?code>callServer() Ҏp触发Q于?Ajax 开始运行了。有点儿明白怎么回事了吧Q好Q就是如此！
现在您可能已l准备开始编写第一?Ajax 应用E序了，臛_也希望认真读一?参考资?/font> 中的那些文章了吧Q但可以首先从这些应用程序如何工作的基本概念开始，?XMLHttpRequest 对象有基本的了解。在下一期文章中Q您掌握这个对象，学会如何处理 JavaScript 和服务器的通信、如何?HTML 表单以及如何获得 DOM 句柄?/p>
现在先花点儿旉考虑考虑 Ajax 应用E序有多么强大。设想一下，当单L钮、输入一个字Dc从l合框中选择一个选项或者用鼠标在屏q上拖动ӞWeb 表单能够立刻作出响应会是什么情形。想一?em>异步 I竟意味着什么，想一?JavaScript 代码q行而且不等?/em> 服务器对它的h作出响应。会遇到什么样的问题？会进入什么样的领域？考虑到这U新的方法，~程的时候应如何改变表单的设计？
如果在这些问题上׃点儿旉Q与单地剪切/_脓某些代码到您Ҏ不理解的应用E序中相比，收益会更多。在下一期文章中Q我们将把这些概念付诸实践，详细介绍使应用程序按照这U方式工作所需要的代码。因此，现在先n受一?Ajax 所带来的可能性吧?/p>
学习
- 您可以参阅本文在 developerWorks 全球站点上的 英文原文?br />
-
Adaptive Path
是一安先的用户界面设计公司Q仔l阅M们的|站可以更多C?Ajax?
- 如果兛_ Ajax 一词的来历Q请看一?Jesse James Garrett 和他?Ajax 文章Q比?q一?/font>Q?
- 可以先了解下一期文章的主题
XMLHttpRequest对象Q请阅读 关于XMLHttpRequest对象的这文?/font>? - 如果使用 Internet ExplorerQ可以访?Microsoft Developer Network ?XML Developer Center?
-
面向 Java 开发h员的 Ajax: 构徏动态的 Java 应用E序
QdeveloperWorksQ?005 q?9 月）介绍了这U革新方法，它解决了面重新加蝲NQ可以创建动态的 Web 应用E序体验?
-
面向 Java 开发h员的 Ajax: Ajax ?Java 对象序列?/font>
QdeveloperWorksQ?005 q?10 月）介绍了在 Ajax 应用E序中对数据q行序列化的五种Ҏ?
-
Using Ajax with PHP and Sajax
QdeveloperWorksQ?005 q?10 月）Q这教E针寚w些对开发丰?Web 应用E序感兴的人，介绍了?Ajax ?PHP 动态更新内宏V?
-
Call SOAP Web services with AJAX, Part 1: Build the Web services client
QdeveloperWorksQ?005 q?10 月）介绍了如何?Ajax 设计模式实现Z Web 览器的 SOAP Web 服务客户机?
-
XML 问题: 越 DOM
QdeveloperWorksQ?005 q?5 月）详细阐述了如何用文档对象模型来构徏动?Web 应用E序?
-
Build apps with Asynchronous JavaScript with XML, or AJAX
QdeveloperWorksQ?005 q?11 月）演示了如何?Ajax 构造支持实时检验的 Web 应用E序?
-
面向 Java 开发h员的 Ajax: l合 Direct Web Remoting 使用 Ajax
QdeveloperWorksQ?005 q?11 月）演示了如何实?Ajax 的繁琐细节的自动化处理?
- OSA Foundation 有一?wiki 调查?AJAX/JavaScript ?/font>?
- XUL Planet ?对象参考部?/font> 详细介绍?XMLHttpRequest 对象Q更不用说其他各U?XML 对象了，?DOM、CSS、HTML、Web Service 以及 Windows ?Navigation 对象Q?
- 关于 AJax 的基本原理，请阅?{略白皮?/font>?
- L?Flickr.com 上展C的一些很的 Ajax 应用E序?
- Google ?GMail 是另一个利?Ajax 的革命?Web 应用E序的例子?
-
Head Rush Ajax
QO'Reilly Media, Inc.Q?006 q?2 月）包含了本文以及本pd文章所q的内容Q还有更多）Qƈ采用了创新的获奖格式 Head First?
-
JavaScript: The Definitive Guide
Q第 4 版（O'Reilly Media, Inc.Q?001 q?11 月）是关?JavaScript 语言和用动态网늚好资料?
- developerWorks Web 体系l构专区 专门发表关于各种Z Web 的解x案的文章?
讨论
- 加入本文?a href="javascript:void forumWindow()">论坛 ?您也可以通过点击文章剙或者底部的论坛链接参加讨论?
-
Ajax.NET Professional
是关?Ajax 各个斚w的很好的 blog?
- 通过参与 developerWorks blog 加入 developerWorks C?
本文介绍一U方法，AjaxQ用它可以构徏更ؓ动态和响应更灵敏的Web应用E序。该Ҏ的关键在于对览器端的JavaScript、DHTML和与服务器异步通信的组合。本文也演示了启用这U方法是多么单：利用一个Ajax框架Q指DWRQ构造一个应用程序，它直接从览器与后端服务q行通信。如果用得当，q种强大的力量可以应用E序更加自然和响应灵敏，从而提升用L览体验?/p>
该应用程序中所使用的示例代码已打包为单独的WAR文gQ可供下载?/p>
?/strong>
术语Ajax用来描述一l技术，它ɋ览器可以ؓ用户提供更ؓ自然的浏览体验。在Ajax之前QWeb站点强制用户q入提交/{待/重新昄范例Q用L动作L与服务器的“思考时间”同步。Ajax提供与服务器异步通信的能力，从而用户从请?响应的@环中解脱出来。借助于AjaxQ可以在用户单击按钮Ӟ使用JavaScript和DHTML立即更新UIQƈ向服务器发出异步hQ以执行更新或查询数据库。当hq回Ӟ可以用JavaScript和CSS来相应地更新UIQ而不是刷新整个页面。最重要的是Q用L至不知道览器正在与服务器通信QWeb站点看v来是x响应的?/p>
虽然Ajax所需的基架构已经出现了一D|_但直到最q异步请求的真正威力才得到利用。能够拥有一个响应极其灵敏的Web站点实Ȁ动h心，因ؓ它最l允许开发h员和设计人员使用标准的HTML/CSS/JavaScript堆栈创徏“桌面风格的Qdesktop-likeQ”可用性?/p>
通常Q在J2EE中，开发h员过于关注服务和持久性层的开发，以至于用L面的可用性已l落后。在一个典型的J2EE开发周期中Q常怼听到q样的话Q“我们没有可投入UI的时间”或“不能用HTML实现”。但是，以下Web站点证明Q这些理由再也站不住脚了Q?/p>
所有这些Web站点都告诉我们，Web应用E序不必完全依赖于从服务器重新蝲入页面来向用户呈现更攏V一切似乎就在瞬间发生。简而言之，在涉及到用户界面的响应灵敏度Ӟ基准讑־更高了?/p>
定义Ajax
Adaptive Path公司的Jesse James Garrettq样定义AjaxQ?/p>
Ajax不是一U技术。实际上Q它由几U蓬勃发展的技术以新的强大方式l合而成。Ajax包含Q?/p>
- ZXHTML?a target="_blank">CSS标准的表C；
- 使用Document Object Modelq行动态显C和交互Q?
- 使用XMLHttpRequest与服务器q行异步通信Q?
- 使用JavaScriptl定一切?
q非常好Q但Z么要以Ajax命名呢？其实术语Ajax是由Jesse James Garrett创造的Q他说它是“Asynchronous JavaScript + XML的简写”?/p>
Ajax的工作原?/strong>
Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首ơ引入，它是一U支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出hq处理响应，而不d用户?/p>
在创建Web站点Ӟ在客L执行屏幕更新为用h供了很大的灵zL。下面是使用Ajax可以完成的功能：
- 动态更新购物R的物品LQ无需用户单击Updateq等待服务器重新发送整个页面?
- 提升站点的性能Q这是通过减少从服务器下蝲的数据量而实现的。例如，在Amazon的购物R面Q当更新子中的一物品的数量Ӟ会重新蝲入整个页面，q必M?2K的数据。如果用Ajax计算新的总量Q服务器只会q回新的总量|因此所需的带宽仅为原来的癑ֈ之一?
- 消除了每ơ用戯入时的页面刷新。例如，在Ajax中，如果用户在分列表上单击NextQ则服务器数据只h列表而不是整个页面?
- 直接~辑表格数据Q而不是要求用户导航到新的面来编辑数据。对于AjaxQ当用户单击EditӞ可以静态表格刷Cؓ内容可编辑的表格。用户单击Done之后Q就可以发出一个Ajaxh来更新服务器Qƈh表格Q其包含静态、只ȝ数据?
一切皆有可能！但愿它能够激发您开始开发自qZAjax的站炏V然而，在开始之前，让我们介l一个现有的Web站点Q它遵@传统的提?{待/重新昄的范例，我们q将讨论Ajax如何提升用户体验?/p>
Ajax可用于那些场景？——一个例子：MSN Money面
前几天，在浏览MSN Money面的时候，有一?a target="_blank">关于房地产投资的文章引v了我的好奇心。我军_使用站点的“Rate this article”（评h本文Q功能，鼓励其他的用戯一Ҏ间来阅读q篇文章。在我单击vote按钮q等待了一会儿之后Q整个页面被hQ在原来投票问题所在的地方出现了一个漂亮的感谢画面?/p>
而Ajax能够使用L体验更加愉快Q它可以提供响应更加灉|的UIQƈ消除面h所带来的闪烁。目前，׃要刷新整个页面，需要传送大量的数据Q因为必重新发送整个页面。如果用AjaxQ服务器可以q回一个包含了感谢信息?00字节的消息，而不是发?6,813字节的消息来h整个面。即使用的是高速InternetQ传?6K?/2K的差别也非常大。同样重要的是，只需要刷C投票相关的一节Q而不是刷新整个屏q?/p>
让我们利用Ajax实现自己的基本投系l?/p>
原始的AjaxQ直接用XmlHttpRequest
如上所qͼAjax的核心是JavaScript对象XmlHttpRequest。下面的CZ文章评hpȝ带您熟悉Ajax的底层基本知识：http://tearesolutions.com/ajax-demo/raw-ajax.html。注Q如果您已经在本地WebLogic容器中安装了ajax-demo.warQ可以导航到http://localhost:7001/ajax-demo/raw-ajax.htmlQ?/p>
览应用E序Q参与投，q亲眼看它如何运转。熟悉了该应用程序之后，l箋阅读Q进一步了解其工作原理l节?/p> 首先Q您拥有一些简单的定位Ҏ讎ͼ它连接到一个JavaScriptcastVote(rank)函数?
function castVote(rank) {
var url = "/ajax-demo/static-article-ranking.html";
var callback = processAjaxResponse;
executeXhr(callback, url);
}
该函Cؓ您想要与之通信的服务器资源创徏一个URLq调用内部函数executeXhrQ提供一个回调JavaScript函数Q一旦服务器响应可用Q该函数p执行。由于我希望它运行在一个简单的Apache环境中，“cast vote URL”只是一个简单的HTML面。在实际情况中，被调用的URL记录票数ƈ动态地呈现包含投票L的响应?/p> 下一步是发出一个XmlHttpRequesthQ?
function executeXhr(callback, url) {
// branch for native XMLHttpRequest object
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = callback;
req.open("GET", url, true);
req.send(null);
} // branch for IE/Windows ActiveX version
else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = callback;
req.open("GET", url, true);
req.send();
}
}
}
如您所见，执行一个XmlHttpRequestq不单，但非常直观。和q_一P在JavaScript领域Q大部分的工作量都花在确保浏览器兼容斚w。在q种情况下，首先要确定XmlHttpRequest是否可用。如果不能用Q很可能要用Internet ExplorerQ这样就要用所提供的ActiveX实现?/p>
executeXhr()Ҏ中最关键的部分是q两行：
req.onreadystatechange = callback;
req.open("GET", url, true);
W一行定义了JavaScript回调函数Q您希望一旦响应就l它p动执行，而req.open()Ҏ中所指定的“true”标志说明您惌异步执行该请求?/p> 一旦服务器处理完XmlHttpRequestq返回给览器，使用req.onreadystatechange指派所讄的回调方法将被自动调用?
function processAjaxResponse() {
// only if req shows "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
502 502'votes').innerHTML = req.responseText;
} else {
alert("There was a problem retrieving the XML data:
" +
req.statusText);
}
}
}
该代码相当简z，q且使用了几个敎ͼq得难以一下子看出发生了什么。ؓ了弄清楚q一点，下面的表|引用?a target="_blank">http://developer.apple.com/internet/webcontent/xmlhttpreq.htmlQ列举了常用的XmlHttpRequest对象属性?/p>
属?/strong> | 描述 |
onreadystatechange | 每次状态改变所触发事g的事件处理程?/p> |
readyState | 对象状态|
|
responseText | 从服务器q程q回的数据的字符串Ş?/p> |
responseXML | 从服务器q程q回的DOM兼容的文档数据对?/p> |
status | 从服务器q回的数字代码，比如404Q未扑ֈQ或200Q就l） |
statusText | 伴随状态码的字W串信息 |
现在processVoteResponse()函数开始显C出其意义了。它首先查XmlHttpRequest的整体状态以保证它已l完成（readyStatus == 4Q，然后Ҏ服务器的讑֮询问h状态。如果一切正常（status == 200Q?׃用innerHTML属性重写DOM的“votes”节点的内容?/p>
既然您亲眼看CXmlHttpRequest对象是如何工作的Q就让我们利用一个旨在简化JavaScript与Java应用E序之间的异步通信的框架来对具体的l节q行抽象?/p>
Ajax: DWR方式
按照与文章评Ll相同的程Q我们将使用Direct Web RemotingQDWRQ框架实现同L功能?/p>
假定文章和投结果存储在一个数据库中，使用某种对象/关系映射技术来完成抽取工作。ؓ了部|v来尽可能地简单，我们不会使用数据库进行持久性存储。此外，Z应用E序可能通用Q也不用Web框架。相反，应用E序从一个静态HTML文g开始，可以认ؓ它由服务器动态地呈现。除了这些简化措施，应用E序q应该用Spring Framework兌一切，以便L看出如何在一个“真实的”应用程序中使用DWR?/p>
现在应该下蝲CZ应用E序q熟悉它。该应用E序被压~ؓ标准的WAR文gQ因此您可以把它攄CQ何一个Web容器中——无需q行配置。部|完毕之后，可以导航到http://localhost:7001/ajax-demo/dwr-ajax.html来运行程序?/p>
?. 可用的服?/p> 单击ajaxSampleSvc链接Q查看有兛_何在HTML面内直接用服务的CZ实现。其中包含的两个JavaScript文g完成了大部分的功能：
<script type='text/javascript' src='/ajax-demo/dwr/interface/ajaxSampleSvc.js'></script> <script type='text/javascript' src='/ajax-demo/dwr/engine.js'></script>
ajaxSampleSvc.js是动态生成的Q?/p>
function ajaxSampleSvc() { }
ajaxSampleSvc.castVote = function(callback, p0)
{
DWREngine._execute(callback, '/ajax-demo/dwr',
'ajaxSampleSvc', 'castVote', p0);
}
现在可以使用JavaScript对象ajaxSampleSvc替换所有的XmlHttpRequest代码Q从而重构raw-ajax.html文g。可以在dwr-ajax.html文g中看到改动的l果Q下面是新的JavaScript函数Q?/p>
function castVote(rank) {
ajaxSampleSvc.castVote(processResponse, rank);
}
function processResponse(data) {
var voteText = "Thanks for Voting!
"
+ "Current ranking: " + data.voteAverage
+ " out of 5
"
+ "Number of votes placed: "
+ data.numberOfVotes + "
";
502 502'votes').innerHTML = voteText;
}
惊h地简单，不是吗？由ajaxSampleSvc对象q回的Article域对象序列化Z个JavaScript对象Q允许在它上面调用诸如numberOfVotes()和voteAverage()之类的方法。在动态生成ƈ插入到DIV元素“votes”中的HTML代码内用这些数据?/p>
下一步工?/strong>
在后l文章中Q我l有关Ajax的话题，涉及下面q些斚wQ?/p>
- Ajax最佛_?
像许多技术一PAjax是一把双刃剑。对于一些用例，其应用程序其实没有必要用AjaxQ用了反而有损可用性。我介l一些不适合使用的模式，H出说明Ajax的一些消极方面，q展CZ些有助于~和q些消极斚w的机制。例如，?a target="_blank">Netflix电媄览?/a>来说QAjax是合适的解决Ҏ吗？或者，如何提示用户实Z一些问题，而再ơ单L钮也无济于事Q?/p>
- 理跨请求的状?
在用AjaxӞ最初的文档DOM会发生一些变化，q且有大量的面状态信息存储在客户端变量中。当用户跟踪一个链接到应用E序中的另一个页面时Q状态就丢失了。当用户按照惯例单击Back按钮Ӟ呈现l他们的是缓存中的初始页面。这会用户感到非常qhQ?/p>
- 调试技?
使用JavaScript在客L执行更多的工作时Q如果事情不按预期方式进行，需要一些调试工h帮助弄清出现了什么问题?/p>
l束?/strong>
本文介绍了AjaxҎQƈ展示了如何用它来创Z个动态且响应灉|的Web应用E序。通过使用DWR框架Q可以轻村֜把Ajax融合到站点中Q而无需担心所有必L行的实际道工作?/p>
特别感谢Getahead IT咨询公司的Joe Walker和他的团队开发出DWRq样奇的工兗感谢你们与世界׃n它！
下蝲
本文中演C的应用E序源代码可供下载：ajax-demo.warQ?.52 MBQ?/p>