畢業(yè)設(shè)計(jì)(論文)外文資料翻譯

畢業(yè)設(shè)計(jì)(論文)外文資料翻譯學(xué)院：計(jì)算機(jī)工程學(xué)院專業(yè)班級(jí)：計(jì)算機(jī)科學(xué)與技術(shù)056附件：1.外文資料翻譯譯文；2.外文原文指導(dǎo)教師評(píng)語(yǔ)：簽名：年月日

異步JavaScript技術(shù)和XML（AJAX）與Java平臺(tái)使用過(guò)Flickr、GMail,、Google、Suggest或Google地圖的人都知道一種全新的動(dòng)態(tài)WEB應(yīng)用正在成型、這些應(yīng)用看上去和傳統(tǒng)桌面應(yīng)用非常相似、他們不依賴于插件或者瀏覽器特效。傳統(tǒng)意義上的WEB應(yīng)用就是一組網(wǎng)頁(yè)、當(dāng)頁(yè)面上有任何一點(diǎn)內(nèi)容有所變化的時(shí)候必須更新整個(gè)網(wǎng)頁(yè)。一些技術(shù)比如JavaScript和CSS已經(jīng)非常成熟、你可以使用他們高效的創(chuàng)建動(dòng)態(tài)網(wǎng)頁(yè)、并可以跑在大多數(shù)主流瀏覽器上。本文將細(xì)述數(shù)種可以使你的WEB應(yīng)用更豐富更具交互性（就象桌面應(yīng)用一樣）的技術(shù)。使用JavaScript技術(shù)、HTML網(wǎng)頁(yè)可以異步調(diào)用生成它的服務(wù)器上的服務(wù)并可以獲取返回的XML文檔形式的結(jié)果。JavaScript再使用這個(gè)XML文檔更新或改動(dòng)本網(wǎng)頁(yè)的文檔對(duì)象模型（DOM）、名詞AJAX就是近年來(lái)出現(xiàn)的用與描述這種交互模式的新名詞。AJAX并不是新事物、數(shù)年前使用微軟IE瀏覽器的開發(fā)者們就在使用它、直到最近、這項(xiàng)技術(shù)被冠以遠(yuǎn)程腳本而更出名了。以前WEB開發(fā)者使用插件、applets或者隱藏框架來(lái)仿效這種交互模式。但是現(xiàn)在由于XMLHttpRequest對(duì)象技術(shù)已經(jīng)在各大平臺(tái)的主流瀏覽器上普及、所以這種模仿的情況越來(lái)越少了。真正神奇的事情在于JavaScript和XMLHttpRequest對(duì)象技術(shù)的結(jié)合、盡管XMLHttpRequest對(duì)象技術(shù)并不屬于JavaScript標(biāo)準(zhǔn)規(guī)范、但是現(xiàn)代的主流瀏覽器都支持、在Firefox、IE、Safari這些瀏覽器對(duì)JavaScript和CSS的執(zhí)行有微小不同、但這些不同之處很容易理解和處理。如果你一定要兼容老一代瀏覽器那還是不要用AJAX了。是什么使得基于AJAX的客戶端如此獨(dú)特？那就是客戶端所嵌入的頁(yè)面特定的控制邏輯、這些控制邏輯以JavaScript代碼的形式存在。頁(yè)面與JavaScript的交互建立在事件的基礎(chǔ)上（比如文檔加載事件、鼠標(biāo)點(diǎn)擊事件、焦點(diǎn)變化事件、甚至一個(gè)時(shí)鐘事件）。AJAX清楚的將表示邏輯和數(shù)據(jù)分離開來(lái)、一個(gè)HTML網(wǎng)頁(yè)能夠在需要的時(shí)候獲取以比特為單位的數(shù)據(jù)片段！這不同于以前的有一點(diǎn)變化就必須刷新整個(gè)頁(yè)面的做法。同時(shí)AJAX也需要一種完全不同的服務(wù)端架構(gòu)來(lái)支持這種交互模式。以前的傳統(tǒng)服務(wù)端WEB應(yīng)用專注于為每一個(gè)客戶端的每一次請(qǐng)求生成HTML頁(yè)面、每一次客戶端接到響應(yīng)都要刷新和重新渲染整個(gè)頁(yè)面。而我們所談的WEB應(yīng)用專注于客戶端把HTML文檔當(dāng)作模版或容器、客戶端向這個(gè)容器中插入內(nèi)容、作到這些的原理就是每當(dāng)客戶端發(fā)生事件、客戶端都可以向服務(wù)端發(fā)出請(qǐng)求并使用服務(wù)端返回的XML數(shù)據(jù)。一些AJAX的應(yīng)用如下：實(shí)時(shí)數(shù)據(jù)驗(yàn)證表單：實(shí)時(shí)的表單數(shù)據(jù)驗(yàn)證：象ID號(hào)、序列號(hào)、郵政編碼、優(yōu)惠卷號(hào)碼這樣的表單數(shù)據(jù)可以在用戶提交整個(gè)表單之前就得到驗(yàn)證！自動(dòng)補(bǔ)全：一些特定表單數(shù)據(jù)比如email、姓名、城市名可以根據(jù)用戶的類型自動(dòng)填寫。負(fù)荷需求：基于客戶端的事件，一個(gè)HTML頁(yè)面可以在后臺(tái)獲取更多的數(shù)據(jù)，讓網(wǎng)頁(yè)瀏覽器加載更快智能客戶端接口控制：諸如樹，菜單，數(shù)據(jù)表，豐富的文本編輯器，日歷和進(jìn)度條允許用戶更好地互動(dòng)和互動(dòng)的HTML網(wǎng)頁(yè)，一般而言不需要重新加載頁(yè)面。更新數(shù)據(jù)和服務(wù)器推：HTML網(wǎng)頁(yè)可能從一個(gè)服務(wù)器獲得最新數(shù)據(jù)，如分?jǐn)?shù)，股票報(bào)價(jià)，天氣預(yù)報(bào)，或適用的具體數(shù)據(jù)?？蛻艨梢允褂肁jax技術(shù)得到了一套最新數(shù)據(jù)不重載整頁(yè)。民調(diào)不是最有效的手段來(lái)確保數(shù)據(jù)在網(wǎng)頁(yè)上是最電流。新興技術(shù)，如彗星正在制定，提供真正的服務(wù)器端通過(guò)HTTP的推動(dòng)保持持久連接用戶端與服務(wù)器之間。看到這個(gè)博客條目對(duì)彗星使用灰熊更多的發(fā)展，推動(dòng)服務(wù)器與Java技術(shù)。部分更新：一個(gè)HTML頁(yè)面可以提交表單數(shù)據(jù)的需要，而不需要一整頁(yè)刷新。混搭：一個(gè)HTML頁(yè)面可以獲取數(shù)據(jù)使用的是服務(wù)器端的代理或由包括外部腳本組合外部數(shù)據(jù)與您的應(yīng)用程序或您的服務(wù)的資料。例如，您可以混合內(nèi)容或數(shù)據(jù)的第三方應(yīng)用程序，例如谷歌地圖與您自己的應(yīng)用程序。網(wǎng)頁(yè)作為一種應(yīng)用：Ajax技術(shù)，可創(chuàng)造單一網(wǎng)頁(yè)的應(yīng)用程序的外觀和感覺(jué)很像一個(gè)桌面應(yīng)用程序。看到一篇關(guān)于使用Ajax和門戶提供更多關(guān)于如何使用的portlet應(yīng)用的。這些用處并不全、但是它們說(shuō)明了AJAX交互使得WEB應(yīng)用可以作到大量以前無(wú)法作到的事情。解剖一個(gè)AJAX交互：現(xiàn)在我們已經(jīng)討論了Ajax與一些較高級(jí)別的問(wèn)題，讓我們把所有的放在一起，看一個(gè)基于AJAX的Java應(yīng)用程序。讓我們考慮一個(gè)例子。一個(gè)web應(yīng)用包含一個(gè)靜態(tài)的網(wǎng)頁(yè)，或HTML頁(yè)面中生成的JSP技術(shù)包含HTML表單，需要服務(wù)器端的邏輯來(lái)驗(yàn)證表單數(shù)據(jù)而無(wú)需刷新頁(yè)面。服務(wù)器端Web組件（servlet的）命名ValidateServlet將提供驗(yàn)證邏輯。圖1描述的細(xì)節(jié)，AJAX的相互作用，將提供驗(yàn)證邏輯。下列項(xiàng)目代表設(shè)置的一個(gè)AJAX的交互，如圖1:1.客戶端事件發(fā)生。2.一個(gè)XMLHttpRequest對(duì)象的創(chuàng)建和配置。3.XMLHttpRequest對(duì)象提出了要求。4.請(qǐng)求處理的ValidateServlet。5.該ValidateServlet返回一個(gè)XML文件，其中載有結(jié)果。6.XMLHttpRequest對(duì)象調(diào)用callback()函數(shù)和過(guò)程的結(jié)果。7.在HTML的DOM更新。現(xiàn)在讓我們來(lái)詳細(xì)看看每一步AJAX互動(dòng)1．客戶端事件發(fā)生。JavaScript技術(shù)的功能就是一個(gè)結(jié)果的事件。在這種情況下，功能validate()可能會(huì)映射到onkeyup事件的鏈接或形式的組成部分。<inputtype="text"

size="20"

id="userid"

name="id"

onkeyup="validate();">點(diǎn)擊鏈接或表單元素的鍵盤事件引發(fā)JavaScript函數(shù)validate()：2.XMLHttpRequest對(duì)象的創(chuàng)建和配置。創(chuàng)建和配置一個(gè)XMLHttpRequest對(duì)象。varreq;functionvalidate(){varidField=document.getElementById("userid");varurl="validate?id="+encodeURIComponent(idField.value);if(typeofXMLHttpRequest!="undefined"){req=newXMLHttpRequest();}elseif(window.ActiveXObject){req=newActiveXObject("Microsoft.XMLHTTP");}req.open("GET",url,true);req.onreadystatechange=callback;req.send(null);}該validate()函數(shù)創(chuàng)建一個(gè)XMLHttpRequest對(duì)象，并要求公開功能的對(duì)象。open功能需要三個(gè)參數(shù)：HTTP方法，這是GET或POST;URL服務(wù)器端組件，該對(duì)象將互動(dòng);和一個(gè)布爾說(shuō)明是否要求將異步。這個(gè)API是XMLHttpRequest.open(Stringmethod,StringURL,booleanasynchronous)，如果一個(gè)互動(dòng)設(shè)置為異步（true）則必須有一個(gè)回調(diào)函數(shù)：req.onreadystatechange=callback;見(jiàn)第6條的更詳細(xì)的信息。3.XMLHttpRequest對(duì)象提出了要求。執(zhí)行到req.send(null)的時(shí)候發(fā)出請(qǐng)求。如果一個(gè)HTTPGET，此內(nèi)容可能是null或空白。當(dāng)此功能要求XMLHttpRequest對(duì)象，調(diào)用的URL是在配置的對(duì)象是所謂的。如這個(gè)例子中，數(shù)據(jù)公布（id）是作為一個(gè)URL參數(shù)。使用HTTPGET請(qǐng)求時(shí)，是冪等，也就是說(shuō)，兩個(gè)重復(fù)的請(qǐng)求將返回同樣的結(jié)果。當(dāng)使用HTTPGET方法，長(zhǎng)度的網(wǎng)址，包括轉(zhuǎn)義網(wǎng)址參數(shù)，限制了一些瀏覽器和服務(wù)器端的Web容器。在HTTPPOST法時(shí)，應(yīng)當(dāng)使用發(fā)送數(shù)據(jù)到服務(wù)器，這將影響服務(wù)器端的應(yīng)用程序狀態(tài)。一個(gè)HTTPPOST需要一個(gè)Content-Type標(biāo)頭設(shè)置上XMLHttpRequest對(duì)象使用了如下聲明：req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

req.send("id="+escape(idTextField.value));如果用JavaScript產(chǎn)生表單元素值、必須確保值編碼的正確、JavaScript有一個(gè)escape()函數(shù)用于保障正確的編碼、并把特定字符正確的忽略掉。4.請(qǐng)求被ValidateServlet所處理:映射到一個(gè)servlet的URI“驗(yàn)證”檢查用戶是否ID是在用戶數(shù)據(jù)庫(kù)。servlet處理XMLHttpRequest就和處理其他HTTP請(qǐng)求一樣：下面的例子顯示一個(gè)服務(wù)器提取id參數(shù)的要求，并確認(rèn)是否已采取參數(shù)。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");}}}在這個(gè)例子中，一個(gè)簡(jiǎn)單的hashmap是用來(lái)控制用戶。在這個(gè)例子中，我們假設(shè)，使用者輸入duke的編號(hào)。5.ValidateServlet返回一個(gè)包含結(jié)果的XML文檔。用戶IDduke是本列表中的用戶ID的usersHashMap。ValidateServlet生成一個(gè)XML文檔作為響應(yīng)、更復(fù)雜的情況可能用到DOM、XSLT等。response.setContentType("text/xml");response.setHeader("Cache-Control","no-cache");response.getWriter().write("invalid");開發(fā)者必須了解兩件事：第一：Content-Type必須設(shè)置為text/xml；第二：Cache-Control必須設(shè)置為no-cache。是XMLHttpRequest對(duì)象將只處理請(qǐng)求并在Content-Type的唯一text/xml，并設(shè)置Cache-Control，以no-cache將瀏覽器從本地緩存響應(yīng)情況下，重復(fù)請(qǐng)求相同的URL（包括URL參數(shù)）可能會(huì)返回不同的反應(yīng)。6.XMLHttpRequest對(duì)象調(diào)用callback()函數(shù)并處理結(jié)果。XMLHttpRequest對(duì)象的準(zhǔn)備狀態(tài)有所變化的時(shí)候則調(diào)用callback()方法、我們假定已經(jīng)請(qǐng)求完畢ValidateServlet、準(zhǔn)備狀態(tài)為4、表示XMLHttpRequest調(diào)用已經(jīng)完成、HTTP狀態(tài)碼為200、表示HTTP交互已經(jīng)成功。functioncallback(){

if(req.readyState==4){

if(req.status==200){

//updatetheHTMLDOMbasedonwhetherornotmessageisvalid

}}}瀏覽器維護(hù)著一個(gè)文檔的對(duì)象表示模型、既：DOM。網(wǎng)頁(yè)中的JavaScript方法可以訪問(wèn)這個(gè)模型、并且可以在頁(yè)面已經(jīng)全部加載完成后再次改變這個(gè)模型。使用JavaScript代碼：req.responseXML可以得到服務(wù)端返回的XML文檔、req為XMLHttpRequest對(duì)象、DOM為JavaScript提供了一種搜索文檔內(nèi)容以及根據(jù)搜索結(jié)果改變網(wǎng)頁(yè)DOM的手段?？梢允褂胷eq.responseText來(lái)訪問(wèn)返回的XML文檔的字符串表示、如下所示：<message>valid</message>上面的例子是一個(gè)簡(jiǎn)單的XML片段、實(shí)際應(yīng)用可能包含更多：functionparseMessage(){varmessage=req.responseXML.getElementsByTagName("message")[0];setMessage(message.childNodes[0].nodeValue);}parseMessages()方法處理從服務(wù)端返回的XML文檔、該方法使用message元素的值去調(diào)用setMessage()方法來(lái)改變HTMLDOM。7.HTML文檔對(duì)象被更新。JavaScript可以獲得HTMLDOM中任何元素（對(duì)象）的引用、推薦使用document.getElementById("userIdMessage")方法來(lái)獲取。userIdMessage就是網(wǎng)頁(yè)上任意元素的ID屬性、有了元素（對(duì)象）的引用、JavaScript就可以改變這個(gè)元素的屬性以及這個(gè)元素的樣式屬性、還可以增加刪除或改變這個(gè)元素的子元素。通用的方法是設(shè)置innerHTML屬性、如下所示：<scripttype="text/javascript">functionsetMessage(message){varuserMessageElement=document.getElementById("userIdMessage");userMessageElement.innerHTML="<fontcolor=\"red\">"+message+"</font>";}</script><body><divid="userIdMessage"></div></body>innerHTML屬性被改變以后網(wǎng)頁(yè)可以立即體現(xiàn)出變化、如果innerHTML屬性內(nèi)部包含象<image>、<iframe>這樣的元素、那么其所指定的資源內(nèi)容一樣被瀏覽器解析顯示。這種方法最大的缺點(diǎn)是在JavaScript代碼里面難于以字符串形式書寫HTML、內(nèi)嵌于JavaScript中的HTML也難以看懂、維護(hù)和更改。另外的改變HTMLDOM的方法是動(dòng)態(tài)創(chuàng)建新元素然后將其作為子元素插入目標(biāo)元素下、如下所示：<scripttype="text/javascript">functionsetMessage(message){varuserMessageElement=document.getElementById("userIdMessage");varuserIdMessageFont=document.getElementById("userIdMessageFont");varmessageElement=document.createTextNode(message);if(userMessageElement.childNodes[0]){//updatetheelementsuserIdMessageFont.replaceChild(messageElement,userIdMessageFont.childNodes[0]);}else{//createthenewelementsvarfontElement=document.createTextNode("font");fontElement.setAtribute("id","userIdMessageFont");fontElement.setAtribute("color","red");userMessageElement.appendChild(fontElement);fontElement.appendChild(messageElement);}}</script><body><divid="userIdMessage"></div></body>代碼示例顯示了DOMAPI的JavaScript的技術(shù)可能被用來(lái)創(chuàng)造一個(gè)因素，或者改變?cè)鼐幊?。支持的JavaScript的DOMAPI的技術(shù)可以在各種不同的瀏覽器，所以你必須照顧到正在發(fā)展中的應(yīng)用軟件。最后的想法:這些事情可能并不多么引人注目、而且還有一些缺陷：復(fù)雜性：服務(wù)器端的開發(fā)將需要演示的邏輯的理解是，將需要在客戶端的HTML網(wǎng)頁(yè)，以及在服務(wù)器端的邏輯來(lái)生成XML內(nèi)容所需要的客戶端的HTML網(wǎng)頁(yè)。HTML網(wǎng)頁(yè)開發(fā)人員需要有一個(gè)基本的了解的JavaScript技術(shù)來(lái)創(chuàng)造新的Ajax功能。其他選項(xiàng)，如項(xiàng)目jMaki和項(xiàng)目動(dòng)態(tài)工作面提供一種面向Java開發(fā)人員能夠更好地利用Ajax功能，而不需要深入了解的JavaScript技術(shù)。標(biāo)準(zhǔn)化XMLHttpRequest對(duì)象：XMLHttpRequest對(duì)象是尚未加入的JavaScript技術(shù)規(guī)范，這意味著行為可能會(huì)有所變化，這取決于客戶端。這是最有效地利用圖書館，如道場(chǎng)，提供備用的解決方案使AJAX互動(dòng)透明甚至舊版本的瀏覽器不支持XMLHttpRequest對(duì)象：JavaScript的技術(shù)實(shí)施：Ajax的相互作用在很大程度上取決于JavaScript的技術(shù)，具有微妙的差異取決于客戶端。見(jiàn)QuirksM的更詳細(xì)的針對(duì)特定瀏覽器的差別?？紤]使用的圖書館，如道場(chǎng)，其中涉及許多分歧。調(diào)試：Ajax應(yīng)用也很難調(diào)試，因?yàn)樘幚磉壿嬍乔度朐诳蛻舳撕头?wù)器上。瀏覽器加載項(xiàng)，如Mozilla的螢火蟲出現(xiàn)，使調(diào)試更加容易?？蚣?，如谷歌的Web工具包已經(jīng)出現(xiàn)，使客戶端和服務(wù)器來(lái)回調(diào)試。獲取資源和保護(hù)您的數(shù)據(jù)：您可以查看客戶端JavaScript技術(shù)只需通過(guò)選擇查看源文件從一個(gè)基于AJAX的網(wǎng)頁(yè)。不善的設(shè)計(jì)基于Ajax的應(yīng)用程序可以打開自己黑客的攻擊或剽竊。當(dāng)提供AJAX服務(wù)后，你就可以確保這些服務(wù)只提供給那些已打算好的。見(jiàn)限制進(jìn)入您的Ajax服務(wù)的更多信息，保護(hù)您的服務(wù)。我們已經(jīng)看到，Ajax的相互作用可以解決許多問(wèn)題。Java技術(shù)提供了一個(gè)良好的基礎(chǔ)，以開發(fā)和部署基于Ajax的應(yīng)用程序的API的滯留在HTTP處理，數(shù)據(jù)庫(kù)，Web服務(wù)，XML處理，和BusinessObjects。更好地了解這種互動(dòng)模式，今天的應(yīng)用可以成為更具互動(dòng)性，為最終用戶提供一個(gè)更好的經(jīng)驗(yàn)。使用AJAX，您需要使用最新的瀏覽器版本它支持XMLHttpRequest對(duì)象需要AJAX的相互作用。使用AJAX還需要大量的客戶端JavaScript技術(shù)和CSS。作為應(yīng)用架構(gòu)師或開發(fā)人員，您將要權(quán)衡這樣的需要具有豐富的應(yīng)用程序?qū)g覽器的支持，結(jié)構(gòu)復(fù)雜，技術(shù)和開發(fā)培訓(xùn)。隨著Ajax編程模型的發(fā)展，現(xiàn)有的技術(shù)和框架，使這一過(guò)渡更加容易。什么是顯而易見(jiàn)的事，著名的Web應(yīng)用正日益成為并更具互動(dòng)性。是嗎？AsynchronousJavaScriptTechnologyandXML(Ajax)WiththeJavaPlatformAnyonewhohasusedFlickr,GMail,GoogleSuggest,orGoogleMapswillrealizethatanewbreedofdynamicwebapplicationsisemerging.Theseapplicationslookandactverysimilartotraditionaldesktopapplicationswithoutrelyingonplug-insorbrowser-specificfeatures.WebapplicationshavetraditionallybeenasetofHTMLpagesthatmustbereloadedtochangeanyportionofthecontent.TechnologiessuchasJavaScriptprogramminglanguageandcascadingstylesheets(CSS)havematuredtothepointwheretheycanbeusedeffectivelytocreateverydynamicwebapplicationsthatwillworkonallofthemajorbrowsers.Thisarticlewilldetailseveraltechniquesthatyoucanusetodaytoenableyourwebapplicationstobemorerichandinteractivelikedesktopapplications.UsingJavaScripttechnology,anHTMLpagecanasynchronouslymakecallstotheserverfromwhichitwasloadedandfetchcontentthatmaybeformattedasXMLdocuments,HTMLcontent,plaintext,orJavaScriptObjectNotation(JSON).TheJavaScripttechnologymaythenusethecontenttoupdateormodifytheDocumentObjectModel(DOM)oftheHTMLpage.ThetermAsynchronousJavaScriptTechnologyandXML(Ajax)hasemergedrecentlytodescribethisinteractionmodel.Ajaxisnotnew.ThesetechniqueshavebeenavailabletodeveloperstargetingInternetExplorerontheWindowsplatformformanyyears.Untilrecently,thetechnologywasknownaswebremotingorremotescripting.Webdevelopershavealsousedacombinationofplug-ins,Javaapplets,andhiddenframestoemulatethisinteractionmodelforsometime.WhathaschangedrecentlyistheinclusionofsupportfortheXMLHttpRequestobjectintheJavaScriptruntimesofthemainstreambrowsers.TherealmagicistheresultoftheJavaScripttechnology'sXMLHttpRequestobject.AlthoughthisobjectisnotspecifiedintheformalJavaScripttechnologyspecification,alloftoday'smainstreambrowserssupportit.ThesubtledifferenceswiththeJavaScripttechnologyandCSSsupportamongcurrentgenerationbrowserssuchasMozillaFirefox,InternetExplorer,andSafariaremanageable.JavaScriptlibrariessuchasDojo,Prototype,andtheYahooUserInterfaceLibraryhaveemergedtofillinwherethebrowsersarenotasmanageableandtoprovideastandardizedprogrammingmodel.Dojo,forexample,isaddressingaccessibility,internationalization,andadvancedgraphicsacrossbrowsers--allofwhichhadbeenthornsinthesideofearlieradoptersofAjax.Moreupdatesaresuretooccurastheneedarises.WhatmakesAjax-basedclientsuniqueisthattheclientcontainsspecificcontrollogicembeddedasJavaScripttechnology.ThepageinteractswiththeJavaScripttechnologybasedoneventssuchastheloadingofadocument,amouseclick,focuschanges,orevenatimer.Ajaxinteractionsallowforaclearseparationofpresentationlogicfromthedata.AnHTMLpagecanpullinbite-sizepiecestobedisplayed.Ajaxwillrequireadifferentserver-sidearchitecturetosupportthisinteractionmodel.Traditionally,server-sidewebapplicationshavefocusedongeneratingHTMLdocumentsforeveryclienteventresultinginacalltotheserver.Theclientswouldthenrefreshandre-renderthecompleteHTMLpageforeachresponse.RichwebapplicationsfocusonaclientfetchinganHTMLdocumentthatactsasatemplateorcontainerintowhichtoinjectcontent,basedonclienteventsusingXMLdataretrievedfromaserver-sidecomponent.SomeusesforAjaxinteractionsarethefollowing:Real-timeformdatavalidation:FormdatasuchasuserIDs,serialnumbers,postalcodes,orevenspecialcouponcodesthatrequireserver-sidevalidationcanbevalidatedinaformbeforetheusersubmitsaform.SeeRealtimeFormValidationfordetails.Autocompletion:Aspecificportionofformdatasuchasanemailaddress,name,orcitynamemaybeautocompletedastheusertypes.Loadondemand:Basedonaclientevent,anHTMLpagecanfetchmoredatainthebackground,allowingthebrowsertoloadpagesmorequickly.Sophisticateduserinterfacecontrolsandeffects:Controlssuchastrees,menus,datatables,richtexteditors,calendars,andprogressbarsallowforbetteruserinteractionandinteractionwithHTMLpages,generallywithoutrequiringtheusertoreloadthepage.Refreshingdataandserverpush:HTMLpagesmaypolldatafromaserverforup-to-datedatasuchasscores,stockquotes,weather,orapplication-specificdata.AclientmayuseAjaxtechniquestogetasetofcurrentdatawithoutreloadingafullpage.Pollingisnotthemosteffecientmeansofensuringthatdataonapageisthemostcurrent.EmergingtechniquessuchasCometarebeingdevelopedtoprovidetrueserver-sidepushoverHTTPbykeepingapersistentconnectionbetweentheclientandserver.SeethisblogentryonCometusingGrizzlyformoreonthedevelopmentofserverpushwithJavatechnology.Partialsubmit:AnHTMLpagecansubmitformdataasneededwithoutrequiringafullpagerefresh.Mashups:AnHTMLpagecanobtaindatausingaserver-sideproxyorbyincludinganexternalscripttomixexternaldatawithyourapplication'soryourservice'sdata.Forexample,youcanmixcontentordatafromathird-partyapplicationsuchasGoogleMapswithyourownapplication.Pageasanapplication:Ajaxtechniquescanbemadetocreatesingleapplicationsthatlookandfeelmuchlikeadesktopapplication.SeethearticleontheuseofAjaxandportletsformoreonhowyoucanuseportletapplicationstoday.Thoughnotall-inclusive,thislistshowsthatAjaxinteractionsallowwebapplicationstodomuchmorethantheyhavedoneinthepast.TheAnatomyofanAjaxInteractionNowthatwehavediscussedwhatAjaxisandwhatsomehigher-levelissuesare,let'sputallthepiecestogetherandlookatanAjax-enabledJavaapplication.Let'sconsideranexample.AwebapplicationcontainsastaticHTMLpage,oranHTMLpagegeneratedinJSPtechnologycontainsanHTMLformthatrequiresserver-sidelogictovalidateformdatawithoutrefreshingthepage.Aserver-sidewebcomponent(servlet)namedValidateServletwillprovidethevalidationlogic.Figure1describesthedetailsoftheAjaxinteractionthatwillprovidethevalidationlogic.Figure1:AnAjaxInteractionProvidesValidationLogicThefollowingitemsrepresentthesetupsofanAjaxinteractionastheyappearinFigure1.Aclienteventoccurs.AnXMLHttpRequestobjectiscreatedandconfigured.TheXMLHttpRequestobjectmakesacall.TherequestisprocessedbytheValidateServlet.TheValidateServletreturnsanXMLdocumentcontainingtheresult.TheXMLHttpRequestobjectcallsthecallback()functionandprocessestheresult.TheHTMLDOMisupdated.Nowlet'slookateachstepoftheAjaxinteractioninmoredetail.1.Aclienteventoccurs.JavaScripttechnologyfunctionsarecalledastheresultofanevent.Inthiscase,thefunctionvalidate()maybemappedtoaonkeyupeventonalinkorformcomponent.<inputtype="text"size="20"id="userid"name="id"onkeyup="validate();">

Thisformelementwillcallthevalidate()functioneachtimetheuserpressesakeyintheformfield.2.AXMLHttpRequestobjectiscreatedandconfigured.AnXMLHttpRequestobjectiscreatedandconfigured.varreq;functionvalidate(){varidField=document.getElementById("userid");varurl="validate?id="+encodeURIComponent(idField.value);if(typeofXMLHttpRequest!="undefined"){req=newXMLHttpRequest();}elseif(window.ActiveXObject){req=newActiveXObject("Microsoft.XMLHTTP");}req.open("GET",url,true);req.onreadystatechange=callback;req.send(null);}

Thevalidate()functioncreatesanXMLHttpRequestobjectandcallstheopenfunctionontheobject.Theopenfunctionrequiresthreearguments:theHTTPmethod,whichisGETorPOST;theURLoftheserver-sidecomponentthattheobjectwillinteractwith;andabooleanindicatingwhetherornotthecallwillbemadeasynchronously.TheAPIisXMLHttpRequest.open(Stringmethod,StringURL,booleanasynchronous).Ifaninteractionissetasasynchronous(true)acallbackfunctionmustbespecified.Thecallbackfunctionforthisinteractionissetwiththestatementreq.onreadystatechange=callback;.Seesection6formoredetails.3.TheXMLHttpRequestobjectmakesacall.Whenthestatementreq.send(null);isreached,thecallwillbemade.InthecaseofanHTTPGET,thiscontentmaybenullorleftblank.WhenthisfunctioniscalledontheXMLHttpRequestobject,thecalltotheURLthatwassetduringtheconfigurationoftheobjectiscalled.Inthecaseofthisexample,thedatathatisposted(id)isincludedasaURLparameter.UseanHTTPGETwhentherequestisidempotent,meaningthattwoduplicaterequestswillreturnthesameresults.WhenusingtheHTTPGETmethod,thelengthofURL,includingescapedURLparameters,islimitedbysomebrowsersandbyserver-sidewebcontainers.TheHTTPPOSTmethodshouldbeusedwhensendingdatatotheserverthatwillaffecttheserver-sideapplicationstate.AnHTTPPOSTrequiresaContent-TypeheadertobesetontheXMLHttpRequestobjectbyusingthefollowingstatement:req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");req.send("id="+encodeURIComponent(idTextField.value));

WhensendingformvaluesfromJavaScripttechnology,youshouldtakeintoconsiderationtheencodingofthefieldvalues.JavaScripttechnologyincludesanencodeURIComponent()functionthatshouldbeusedtoensurethatlocalizedcontentisencodedproperlyandthatspecialcharactersareencodedcorrectlytobepassedinanHTTPrequest.4.TherequestisprocessedbytheValidateServlet.AservletmappedtotheURI"validate"checkswhethertheuserIDisintheuserdatabase.AservletprocessesanXMLHttpRequestjustasitwouldanyotherHTTPrequest.Thefollowingexampleshowaserverextractingtheidparameterfromtherequestandvalidatingwhethertheparameterhasbeentaken.publicclassValidateServletextendsHttpServlet{privateServletContextcontext;privateHashMapusers=newHashMap();publicvoidinit(ServletConfigconfig)throwsServletException{super.init(config);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("<message>valid</message>");}else{response.setContentType("text/xml");response.setHeader("Cache-Control","no-cache");response.getWriter().write("<message>invalid</message>");}}}Inthisexample,asimpleHashMapisusedtocontaintheusers.Inthecaseofthisexample,letusassumethattheusertypeddukeastheID.5.TheValidateServletreturnsanXMLdocumentcontainingtheresults.TheuserIDdukeispresentinthelistofuserIDsintheusersHashMap.TheValidateServletwillwriteanXMLdocumenttotheresponsecontainingamessageelementwiththevalueofinvalid.MorecomplexusecasesmayrequireDOM,XSLT,orotherAPIstogeneratetheresponse.response.setContentType("text/xml");response.setHeader("Cache-Control","no-cache");response.getWriter().write("invalid");

Thedevelopermustbeawareoftwothings.First,theContent-Typemustbesettotext/xml.Second,theCache-Controlmustbesettono-cache.TheXMLHttpRequestobjectwillprocessonlyr