中英文对照如下、全是我自己译的、水平有限（6级考78分）、欢迎指正：
AsynchronousJavaScriptTechnologyandXML(AJAX)
WithJava2Platform,EnterpriseEdition
——《异步JavaScript+XML技术与J2EE》
ByGregMurray,June9,2005
AnyonewhohasusedFlickr,GMail,GoogleSuggest,orGoogleMapswillrealizethatanewbreedofdynamicwebapplicationsisemerging.Theseapplicationslookandactverysimilartotraditionaldesktopapplicationswithoutrelyingonplug-insorbrowser-specificfeatures.WebapplicationshavetraditionallybeenasetofHTMLpagesthatmustbereloadedtochangeanyportionofthecontent.TechnologiessuchasJavaScriptprogramminglanguageandcascadingstylesheets(CSS)havematuredtothepointwheretheycanbeusedeffectivelytocreateverydynamicwebapplicationsthatwillworkonallofthemajorbrowsers.Thisarticlewilldetailseveraltechniquesthatyoucanusetodaytoenableyourwebapplicationstobemorerichandinteractivelikedesktopapplications.——使用过Flickr、GMail,、Google、Suggest或Google地图的人都知道一种全新的动态WEB应用正在成型、这些应用看上去和传统桌面应用非常相似、他们不依赖于插件或者浏览器特效。传统意义上的WEB应用就是一组网页、当页面上有任何一点内容有所变化的时候必须更新整个网页。一些技术比如JavaScript和CSS已经非常成熟、你可以使用他们高效的创建动态网页、并可以跑在大多数主流浏览器上。本文将细述数种可以使你的WEB应用更丰富更具交互性（就象桌面应用一样）的技术。
IntroducingAsynchronousJavaScriptTechnologyandXML(AJAX)
——AJAX介绍
UsingJavaScripttechnology,anHTMLpagecanasynchronouslymakecallstotheserverfromwhichitwasloadedandfetchXMLdocuments.TheXMLdocumentsmaythenbeusedbytheJavaScripttechnologytoupdateormodifytheDocumentObjectModel(DOM)oftheHTMLpage.ThetermAsynchronousJavaScriptTechnologyandXML(AJAX)hasemergedrecentlytodescribethisinteractionmodel.——使用JavaScript技术、HTML网页可以异步调用生成它的服务器上的服务并可以获取返回的XML文档形式的结果。JavaScript再使用这个XML文档更新或改动本网页的文档对象模型（DOM）、名词AJAX就是近年来出现的用与描述这种交互模式的新名词。
AJAXisnotnew.ThesetechniqueshavebeenavailabletodeveloperstargetingInternetExplorerontheWindowsplatformformanyyears.Untilrecently,thetechnologywasknownaswebremotingorremotescripting.Webdevelopershavealsousedacombinationofplug-ins,Javaapplets,andhiddenframestoemulatethisinteractionmodelforsometime.WhathaschangedrecentlyisthattheinclusionofsupportfortheXMLHttpRequestobjecthasbecameubiquitousinthemainstreambrowsersacrossallplatforms.TherealmagicistheresultoftheJavaScripttechnology’sXMLHttpRequestobject.AlthoughthisobjectisnotspecifiedintheformalJavaScripttechnologyspecification,alloftoday’smainstreambrowserssupportit.ThesubtledifferenceswiththeJavaScripttechnologyandCSSsupportamongcurrentgenerationbrowserssuchasFirefox,InternetExplorer,andSafariaremanageable.Ifyouarerequiredtosupportolderbrowsers,AJAXmaynotbetheanswerforyou.——AJAX并不是新事物、数年前使用微软IE浏览器的开发者们就在使用它、直到最近、这项技术被冠以远程脚本而更出名了。以前WEB开发者使用插件、applets或者隐藏框架来仿效这种交互模式。但是现在由于XMLHttpRequest对象技术已经在各大平台的主流浏览器上普及、所以这种模仿的情况越来越少了。真正神奇的事情在于JavaScript和XMLHttpRequest对象技术的结合、尽管XMLHttpRequest对象技术并不属于JavaScript标准规范、但是现代的主流浏览器都支持、在Firefox、IE、Safari这些浏览器对JavaScript和CSS的执行有微小不同、但这些不同之处很容易理解和处理。如果你一定要兼容老一代浏览器那还是不要用AJAX了。
//////////////////////////////////////////////////////////////////////////////////////////
1楼
BS娄猪
2楼
WhatmakesAJAX-basedclientsuniqueisthattheclientcontainspage-specificcontrollogicembeddedasJavaScripttechnology.ThepageinteractswiththeJavaScripttechnologybasedoneventssuchasthedocumentbeingloaded,amouseclick,focuschanges,orevenatimer.AJAXinteractionsallowforaclearseparationofpresentationlogicfromthedata.AnHTMLpagecanpullinbite-sizepiecesofdataasneededratherthanreloadingthewholepageeverytimeachangeneedstobedisplayed.AJAXwillrequireadifferentserver-sidearchitecturetosupportthisinteractionmodel.Traditionally,server-sidewebapplicationshavefocusedongeneratingHTMLdocumentsforeveryclienteventresultinginacalltotheserver.Theclientswouldthenrefreshandre-renderthecompleteHTMLpageforeachresponse.RichwebapplicationsfocusonaclientfetchinganHTMLdocumentthatactsasatemplateorcontainerintowhichtoinjectcontent,basedonclienteventsusingXMLdataretrievedfromaserver-sidecomponent.——是什么使得基于AJAX的客户端如此独特？那就是客户端所嵌入的页面特定的控制逻辑、这些控制逻辑以JavaScript代码的形式存在。页面与JavaScript的交互建立在事件的基础上（比如文档加载事件、鼠标点击事件、焦点变化事件、甚至一个时钟事件）。AJAX清楚的将表示逻辑和数据分离开来、一个HTML网页能够在需要的时候获取以比特为单位的数据片段！这不同于以前的有一点变化就必须刷新整个页面的做法。同时AJAX也需要一种完全不同的服务端架构来支持这种交互模式。以前的传统服务端WEB应用专注于为每一个客户端的每一次请求生成HTML页面、每一次客户端接到响应都要刷新和重新渲染整个页面。而我们所谈的WEB应用专注于客户端把HTML文档当作模版或容器、客户端向这个容器中插入内容、作到这些的原理就是每当客户端发生事件、客户端都可以向服务端发出请求并使用服务端返回的XML数据。
SomeusesforAJAXinteractionsarethefollowing:
Real-TimeFormDataValidation:FormdatasuchasuserIDs,serialnumbers,postalcodes,orevenspecialcouponcodesthatrequireserver-sidevalidationcanbevalidatedinaformbeforetheusersubmitsaform.
Autocompletion:Aspecificportionofformdatasuchasanemailaddress,name,orcitynamemaybeautocompletedastheusertypes.
MasterDetailsOperations:Basedonaclientevent,anHTMLpagecanfetchmoredetailedinformationondatasuchasaproductlistingthatenablestheclienttoviewtheindividualproductinformationwithoutrefreshingthepage.
SophisticatedUserInterfaceControls:Controlssuchastreecontrols,menus,andprogressbarsmaybeprovidedthatdonotrequirepagerefreshes.
RefreshingDataonthePage:HTMLpagesmaypolldatafromaserverforup-to-datedatasuchasscores,stockquotes,weather,orapplication-specificdata.
——一些AJAX的使用例子如下：
实时的表单数据验证：象ID号、序列号、邮政编码、优惠卷号码这样的表单数据可以在用户提交整个表单之前就得到验证！
自动补全：一些特定表单数据比如email、姓名、城市名可以根据用户的类型自动填写。
细节操作：基于客户端事件、客户可以不刷新页面就可以查看某一种产品的细节信息。
智能客户端接口控制：诸如树、菜单、工具条都可以在不刷新页面的情况下随时提供服务。
刷新实时数据：页面可以从服务端筛选动态数据并显示、诸如：比分、股票报价、天气预报等。
Thislistisnotall-inclusive,butitshowsthatAJAXinteractionsallowwebapplicationstodomuchmorethantheyhavedoneinthepast.Althoughmanyofthesebenefitsarenoteworthy,thisapproachhassomedrawbacksaswell:
Complexity:Server-sidedeveloperswillneedtounderstandthatpresentationlogicwillberequiredintheHTMLclientpagesaswellasintheserver-sidelogictogeneratetheXMLcontentneededbytheclientHTMLpages.HTMLpagedevelopersmusthaveJavaScripttechnologyskills.CreatingAJAX-enabledapplicationswillbecomeeasierasnewframeworksarecreatedandexistingframeworksevolvetosupporttheinteractionmodel.
StandardizationoftheXMLHttpRequestObject:TheXMLHttpRequestobjectisnotyetpartoftheJavaScripttechnologyspecification,whichmeansthatthebehaviormayvarydependingontheclient.
JavaScriptTechnologyImplementations:AJAXinteractionsdependheavilyonJavaScripttechnology,whichhassubtledifferencesdependingontheclient.SeeQuirksMode.orgformoredetailsonbrowser-specificdifferences.
Debugging:AJAXapplicationsarealsodifficulttodebugbecausetheprocessinglogicisembeddedbothintheclientandontheserver.
ViewableSource:Theclient-sideJavaScripttechnologymaybeviewedsimplybyselectingViewSourcefromanAJAX-enabledHTMLpage.ApoorlydesignedAJAX-basedapplicationcouldopenitselfuptohackersorplagiarism.
FrameworksandpatternsforAJAXtechnologyarelikelytoemergeasdevelopersgainmoreexperiencewritingapplicationsthatusetheAJAXinteractionmodel.Itisstillearlytofocusonaone-size-fits-allframeworkforAJAXinteractions.ThisarticleandtheassociatedsolutionsfocusonhowAJAXinteractionscanbesupportedtodaybyexistingJava2Platform,EnterpriseEdition(J2EE)technologiessuchasservlets,JavaServerPages(JSP)software,JavaServerFacesapplications,andtheJavaStandardTagLibraries(JSTL).
——这些用处并不全、但是它们说明了AJAX交互使得WEB应用可以作到大量以前无法作到的事情。这些事情可能并不多么引人注目、而且还有一些缺陷：
复杂性：服务端开发者必须掌握XML、页面开发者必须掌握JavaScript技术。
XMLHttpRequest对象的标准化：XMLHttpRequest对象仍不是JavaScript标准规范。
JavaScript技术实现：AJAX严重依赖与JavaScript技术。可参考QuirksMode.org。
Debugging：AJAX难于调试。
查看原文件：使用这种方法可以容易的看到JavaScript源码、给黑客、剽窃者以可乘之机。
AJAX技术框架和模式还在探索和经验形成阶段、固化形成一个真正的框架还为时过早。本文只是探讨如何使用J2EE技术来支持AJAX交互。
TheAnatomyofanAJAXInteraction
NowthatwehavediscussedwhatAJAXisandwhatsomehigher-levelissuesare,let’sputallthepiecestogetherandshowanAJAX-enabledJ2EEapplication.
Let’sconsideranexample.AwebapplicationcontainsastaticHTMLpage,oranHTMLpagegeneratedinJSPtechnologycontainsanHTMLformthatrequiresserver-sidelogictovalidateformdatawithoutrefreshingthepage.Aserver-sidewebcomponent(servlet)namedValidateServletwillprovidethevalidationlogic.Figure1describesthedetailsoftheAJAXinteractionthatwillprovidethevalidationlogic
——AJAX交互剖析：来看一个AJAX使能的J2EE应用：名为ValidateServlet的Servlet验证表单数据、但是要求不能对整个页面刷新。步骤如下：
1、Aclienteventoccurs.——客户端事件发生。
2、AnXMLHttpRequestobjectiscreatedandconfigured.——一个XMLHttpRequest对象被创建并配置。
3、TheXMLHttpRequestobjectmakesacall.——XMLHttpRequest对象发出请求。
4、TherequestisprocessedbytheValidateServlet.——请求被ValidateServlet处理。
5、TheValidateServletreturnsanXMLdocumentcontainingtheresult.——ValidateServlet返回一个包含结果的XML文档。
6、TheXMLHttpRequestobjectcallsthecallback()functionandprocessestheresult.——XMLHttpRequest对象调用callback()函数并处理结果。
7、TheHTMLDOMisupdated.——HTML文档对象被更新。
3楼
各个步骤细节如下：
1.Aclienteventoccurs.——客户端事件发生：
点击链接或表单元素的键盘事件引发JavaScript函数validate()：
size="20"
id="userid"
name="id"
onkeyup="validate();">
2.AXMLHttpRequestobjectiscreatedandconfigured.——一个XMLHttpRequest对象被创建并配置：
varreq;
functionvalidate(){
varidField=document.getElementById("idField");
varurl="validate?id="+escape(idField.value);
if(window.XMLHttpRequest){
req=newXMLHttpRequest();
}elseif(window.ActiveXObject){
req=newActiveXObject("Microsoft.XMLHTTP");——创建XMLHttpRequest对象
}
req.open("GET",url,true);——调用XMLHttpRequest对象的open方法、url为所请求的服务端组件路径、true表示这个调用是异步的、
如果设置为异步就必须还要有一个callback函数如下：
req.onreadystatechange=callback;
req.send(null);
}
3.TheXMLHttpRequestobjectmakesacall.——XMLHttpRequest对象发出请求：
执行到req.send(null)的时候发出请求。
如果是GET请求那么内容可以为空、在url附加参数。
如果是POST请求那么就需要一个Content-Type头的设置如下：
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
req.send("id="+escape(idTextField.value));
如果用JavaScript产生表单元素值、必须确保值编码的正确、JavaScript有一个escape()函数用于保障正确的编码、并把特定字符正确的忽略掉。
4.TherequestisprocessedbytheValidateServlet.——请求被ValidateServlet所处理:
servlet处理XMLHttpRequest就和处理其他HTTP请求一样：
publicclassValidateServletextendsHttpServlet{
privateServletContextcontext;
privateHashMapusers=newHashMap();
publicvoidinit(ServletConfigconfig)throwsServletException{
this.context=config.getServletContext();
users.put("greg","accountdata");
users.put("duke","accountdata");
}
publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
throwsIOException,ServletException{
StringtargetId=request.getParameter("id");
if((targetId!=null)&&!users.containsKey(targetId.trim())){
response.setContentType("text/xml");
response.setHeader("Cache-Control","no-cache");
response.getWriter().write("valid");
}else{
response.setContentType("text/xml");
response.setHeader("Cache-Control","no-cache");
response.getWriter().write("invalid");
}
}
}
5.TheValidateServletreturnsanXMLdocumentcontainingtheresults.——ValidateServlet返回一个包含结果的XML文档。
ValidateServlet生成一个XML文档作为响应、更复杂的情况可能用到DOM、XSLT等。
response.setContentType("text/xml");
response.setHeader("Cache-Control","no-cache");
response.getWriter().write("invalid");
开发者必须了解两件事：第一：Content-Type必须设置为text/xml；第二：Cache-Control必须设置为no-cache。
4楼
up
5楼
6.TheXMLHttpRequestobjectcallsthecallback()functionandprocessestheresult.
——XMLHttpRequest对象调用callback()函数并处理结果。
TheXMLHttpRequestobjectwasconfiguredtocallthecallback()functionwhentherearechangestothereadyStateoftheXMLHttpRequestobject.LetusassumethecalltotheValidateServletwasmadeandthereadyStateis4,signifyingtheXMLHttpRequestcalliscomplete.TheHTTPstatuscodeof200signifiesasuccessfulHTTPinteraction.
——XMLHttpRequest对象的准备状态有所变化的时候则调用callback()方法、我们假定已经请求完毕ValidateServlet、准备状态为4、表示XMLHttpRequest调用已经完成、HTTP状态码为200、表示HTTP交互已经成功。
functioncallback(){
if(req.readyState==4){
if(req.status==200){
//updatetheHTMLDOMbasedonwhetherornotmessageisvalid
}
}
}
Browsersmaintainanobjectrepresentationofthedocumentsbeingdisplayed(referredtoastheDocumentObjectModelorDOM).JavaScripttechnologyinanHTMLpagehasaccesstotheDOM,andAPIsareavailablethatallowJavaScripttechnologytomodifytheDOMafterthepagehasloaded.
——浏览器维护着一个文档的对象表示模型、既：DOM。网页中的JavaScript方法可以访问这个模型、并且可以在页面已经全部加载完成后再次改变这个模型。
Followingasuccessfulrequest,JavaScripttechnologycodemaymodifytheDOMoftheHTMLpage.TheobjectrepresentationoftheXMLdocumentthatwasretrievedfromtheValidateServletisavailabletoJavaScripttechnologycodeusingthereq.responseXML,wherereqisanXMLHttpRequestobject.TheDOMAPIsprovideameansforJavaScripttechnologytonavigatethecontentfromthatdocumentandusethatcontenttomodifytheDOMoftheHTMLpage.ThestringrepresentationoftheXMLdocumentthatwasreturnedmaybeaccessedbycallingreq.responseText.Nowlet’slookathowtousetheDOMAPIsinJavaScripttechnologybylookingatthefollowingXMLdocumentreturnedfromtheValidateServlet.
——使用JavaScript代码：req.responseXML可以得到服务端返回的XML文档、req为XMLHttpRequest对象、DOM为JavaScript提供了一种搜索文档内容以及根据搜索结果改变网页DOM的手段。可以使用req.responseText来访问返回的XML文档的字符串表示、如下所示：
valid
ThisexampleisasimpleXMLfragmentthatcontainsthesenderofthemessageelement,whichissimplythestringvalidorinvalid.Amoreadvancedsamplemaycontainmorethanonemessageandvalidnamesthatmightbepresentedtotheuser:
——上面的例子是一个简单的XML片段、实际应用可能包含更多：
functionparseMessage(){
varmessage=req.responseXML.getElementsByTagName("message")[0];
setMessage(message.childNodes[0].nodeValue);
}
TheparseMessages()functionwillprocessanXMLdocumentretrievedfromtheValidateServlet.ThisfunctionwillcallthesetMessage()withthevalueofthemessageelementtoupdatetheHTMLDOM.
——parseMessages()方法处理从服务端返回的XML文档、该方法使用message元素的值去调用setMessage()方法来改变HTMLDOM。
6楼
厉害。佩服。。。谢谢楼主
7楼
不错不错！翻译得很好！楼主得英语很好啊！6级碍………嘻嘻……
8楼
7.TheHTMLDOMisupdated.——HTML文档对象被更新。
JavaScripttechnologycangainareferencetoanyelementintheHTMLDOMusinganumberofAPIs.Therecommendedwaytogainareferencetoanelementistocalldocument.getElementById("userIdMessage"),where"userIdMessage"istheIDattributeofanelementappearingintheHTMLdocument.Withareferencetotheelement,JavaScripttechnologymaynowbeusedtomodifytheelement’sattributes;modifytheelement’sstyleproperties;oradd,remove,ormodifychildelements.
OnecommonmeanstochangethebodycontentofanelementistosettheinnerHTMLpropertyontheelementasinthefollowingexample.
——JavaScript可以获得HTMLDOM中任何元素（对象）的引用、推荐使用document.getElementById("userIdMessage")方法来获龋userIdMessage就是网页上任意元素的ID属性、有了元素（对象）的引用、JavaScript就可以改变这个元素的属性以及这个元素的样式属性、还可以增加删除或改变这个元素的子元素。通用的方法是设置innerHTML属性、如下所示：
functionsetMessage(message){
varuserMessageElement=document.getElementById("userIdMessage");
userMessageElement.innerHTML=" }