計算機(jī)專業(yè)畢業(yè)設(shè)計外文資料翻譯--異步j(luò)avascript技術(shù)和xml （ ajax ）與java平臺

1、<p>　　畢業(yè)設(shè)計(論文)外文資料翻譯</p><p>　　異步JavaScript技術(shù)和XML （ AJAX ）與Java平臺</p><p>　　使用過Flickr、GMail,、Google、Suggest或Google地圖的人都知道一種全新的動態(tài)WEB應(yīng)用正在成型、這些應(yīng)用看上去和傳統(tǒng)桌面應(yīng)用非常相似、他們不依賴于插件或者瀏覽器特效。傳統(tǒng)意義上的WEB應(yīng)用就是一組網(wǎng)頁、

2、當(dāng)頁面上有任何一點內(nèi)容有所變化的時候必須更新整個網(wǎng)頁。一些技術(shù)比如JavaScript和CSS已經(jīng)非常成熟、你可以使用他們高效的創(chuàng)建動態(tài)網(wǎng)頁、并可以跑在大多數(shù)主流瀏覽器上。本文將細(xì)述數(shù)種可以使你的WEB應(yīng)用更豐富更具交互性（就象桌面應(yīng)用一樣）的技術(shù)。</p><p>　　使用JavaScript技術(shù)、HTML網(wǎng)頁可以異步調(diào)用生成它的服務(wù)器上的服務(wù)并可以獲取返回的XML文檔形式的結(jié)果。JavaScript再使用這個

3、XML文檔更新或改動本網(wǎng)頁的文檔對象模型（DOM）、名詞AJAX就是近年來出現(xiàn)的用與描述這種交互模式的新名詞。</p><p>　　AJAX并不是新事物、數(shù)年前使用微軟IE瀏覽器的開發(fā)者們就在使用它、直到最近、這項技術(shù)被冠以遠(yuǎn)程腳本而更出名了。以前WEB開發(fā)者使用插件、applets或者隱藏框架來仿效這種交互模式。但是現(xiàn)在由于XMLHttpRequest對象技術(shù)已經(jīng)在各大平臺的主流瀏覽器上普及、所以這種模仿的情況

4、越來越少了。真正神奇的事情在于JavaScript和XMLHttpRequest對象技術(shù)的結(jié)合、盡管XMLHttpRequest對象技術(shù)并不屬于JavaScript標(biāo)準(zhǔn)規(guī)范、但是現(xiàn)代的主流瀏覽器都支持、在Firefox、IE、 Safari這些瀏覽器對JavaScript和CSS的執(zhí)行有微小不同、但這些不同之處很容易理解和處理。如果你一定要兼容老一代瀏覽器那還是不要用AJAX了。</p><p>　　是什么使得基

5、于AJAX的客戶端如此獨特？那就是客戶端所嵌入的頁面特定的控制邏輯、這些控制邏輯以JavaScript代碼的形式存在。頁面與JavaScript的交互建立在事件的基礎(chǔ)上（比如文檔加載事件、鼠標(biāo)點擊事件、焦點變化事件、甚至一個時鐘事件）。AJAX清楚的將表示邏輯和數(shù)據(jù)分離開來、一個HTML網(wǎng)頁能夠在需要的時候獲取以比特為單位的數(shù)據(jù)片段！這不同于以前的有一點變化就必須刷新整個頁面的做法。同時AJAX也需要一種完全不同的服務(wù)端架構(gòu)來支持這種交

6、互模式。以前的傳統(tǒng)服務(wù)端WEB應(yīng)用專注于為每一個客戶端的每一次請求生成HTML頁面、每一次客戶端接到響應(yīng)都要刷新和重新渲染整個頁面。而我們所談的WEB應(yīng)用專注于客戶端把HTML文檔當(dāng)作模版或容器、客戶端向這個容器中插入內(nèi)容、作到這些的原理就是每當(dāng)客戶端發(fā)生事件、客戶端都可以向服務(wù)端發(fā)出請求并使用服務(wù)端返回的XML數(shù)據(jù)。</p><p>　　一些AJAX的應(yīng)用如下：</p><p>　　實時

7、數(shù)據(jù)驗證表單：實時的表單數(shù)據(jù)驗證：象ID號、序列號、郵政編碼、優(yōu)惠卷號碼這樣的表單數(shù)據(jù)可以在用戶提交整個表單之前就得到驗證！</p><p>　　自動補(bǔ)全：一些特定表單數(shù)據(jù)比如email、姓名、城市名可以根據(jù)用戶的類型自動填寫。</p><p>　　負(fù)荷需求：基于客戶端的事件，一個HTML頁面可以在后臺獲取更多的數(shù)據(jù)，讓網(wǎng)頁瀏覽器加載更快</p><p>　　智能客

8、戶端接口控制：諸如樹，菜單，數(shù)據(jù)表，豐富的文本編輯器，日歷和進(jìn)度條允許用戶更好地互動和互動的HTML網(wǎng)頁，一般而言不需要重新加載頁面。</p><p>　　更新數(shù)據(jù)和服務(wù)器推： HTML網(wǎng)頁可能從一個服務(wù)器獲得最新數(shù)據(jù)，如分?jǐn)?shù)，股票報價，天氣預(yù)報，或適用的具體數(shù)據(jù)。 A client may use Ajax techniques to get a set of current data without relo

9、ading a full page.客戶可以使用Ajax技術(shù)得到了一套最新數(shù)據(jù)不重載整頁。 Polling is not the most effecient means of ensuring that data on a page is the most current.民調(diào)不是最有效的手段來確保數(shù)據(jù)在網(wǎng)頁上是最電流。 Emerging techniques such as Comet are being developed to

10、provide true server-side push over HTTP by keeping a persistent connection between the client and server.新興技術(shù)，如彗星正在制定，提供真正的服務(wù)器端通過HTTP的推動保持持久連接用戶端與服務(wù)器之</p><p>　　部分更新：一個HTML頁面可以提交表單數(shù)據(jù)的需要，而不需要一整頁刷新。</p>

11、<p>　　混搭：一個HTML頁面可以獲取數(shù)據(jù)使用的是服務(wù)器端的代理或由包括外部腳本組合外部數(shù)據(jù)與您的應(yīng)用程序或您的服務(wù)的資料。 For example, you can mix content or data from a third-party application such as Google Maps with your own application.例如，您可以混合內(nèi)容或數(shù)據(jù)的第三方應(yīng)用程序，例如谷歌地圖與您自己

12、的應(yīng)用程序。</p><p>　　網(wǎng)頁作為一種應(yīng)用：Ajax技術(shù)，可創(chuàng)造單一網(wǎng)頁的應(yīng)用程序的外觀和感覺很像一個桌面應(yīng)用程序。See the article on the use of Ajax and portlets for more on how you can use portlet applications today.看到一篇關(guān)于使用Ajax和門戶提供更多關(guān)于如何使用的portlet應(yīng)用的。</p

13、><p>　　這些用處并不全、但是它們說明了AJAX交互使得WEB應(yīng)用可以作到大量以前無法作到的事情。</p><p>　　解剖一個AJAX交互：</p><p>　　現(xiàn)在我們已經(jīng)討論了Ajax與一些較高級別的問題，讓我們把所有的放在一起，看一個基于AJAX的Java應(yīng)用程序。</p><p>　　Let's consider an ex

14、ample.讓我們考慮一個例子。 A web application contains a static HTML page, or an HTML page generated in JSP technology contains an HTML form that requires server-side logic to validate form data without refreshing the page.一個web應(yīng)用包

15、含一個靜態(tài)的網(wǎng)頁，或HTML頁面中生成的JSP技術(shù)包含HTML表單，需要服務(wù)器端的邏輯來驗證表單數(shù)據(jù)而無需刷新頁面。 A server-side web component ( servlet ) named ValidateServlet will provide the validation logic.服務(wù)器端Web組件（ servlet的）命名ValidateServlet將提供驗證邏輯。 Figure 1 describes

16、the details of the Ajax interaction that</p><p>　　下列項目代表設(shè)置的一個AJAX的交互，如圖1:</p><p>　　1.客戶端事件發(fā)生。</p><p>　　2.An XMLHttpRequest object is created and configured.一個XMLHttpRequest對象的創(chuàng)建和配置。

17、 </p><p>　　3.The XMLHttpRequest object makes a call.XMLHttpRequest對象提出了要求。 </p><p>　　4.The request is processed by the ValidateServlet .請求處理的ValidateServlet 。 </p><p>　　5.The Valida

18、teServlet returns an XML document containing the result.該ValidateServlet返回一個XML文件 ， 其中載有結(jié)果。 </p><p>　　6.The XMLHttpRequest object calls the callback() function and processes the result. XMLHttpRequest對象調(diào)用cal

19、lback()函數(shù)和過程的結(jié)果。 </p><p>　　7. The HTML DOM is updated.在HTML的DOM更新。</p><p>　　現(xiàn)在讓我們來詳細(xì)看看每一步AJAX互動</p><p>　　1．A client event occurs.客戶端事件發(fā)生。 </p><p>　　JavaScript technolog

20、y functions are called as the result of an event. JavaScript技術(shù)的功能就是一個結(jié)果的事件。 In this case, the function validate() may be mapped to a onkeyup event on a link or form component.在這種情況下，功能validate()可能會映射到onkeyup事件的鏈接或形式的組

21、成部分。</p><p>　　<input type="text" size="20" id="userid" name="id" onkeyup="validate();"></p><p>　　點擊鏈接或表單元素的鍵盤事件引發(fā)JavaScript函數(shù)validate(

22、)： </p><p>　　2 .A XMLHttpRequest object is created and configuredXMLHttpRequest對象的創(chuàng)建和配置。 </p><p>　　An XMLHttpRequest object is created and configured.創(chuàng)建和配置一個XMLHttpRequest對象。</p><p>

23、;<b>　　var req;</b></p><p>　　function validate() {</p><p>　　var idField = document.getElementById("userid");</p><p>　　var url = "validate?id=" + encod

24、eURIComponent(idField.value);</p><p>　　if (typeof XMLHttpRequest != "undefined") {</p><p>　　req = new XMLHttpRequest();</p><p>　　} else if (window.ActiveXObject) {</p&g

25、t;<p>　　req = new ActiveXObject("Microsoft.XMLHTTP");</p><p><b>　　}</b></p><p>　　req.open("GET", url, true);</p><p>　　req.onreadystatechange =

26、 callback;</p><p>　　req.send(null);</p><p><b>　　}</b></p><p>　　該validate()函數(shù)創(chuàng)建一個XMLHttpRequest對象，并要求公開功能的對象。 The open function requires three arguments: the HTTP method,

27、 which is GET or POST ; the URL of the server-side component that the object will interact with; and a boolean indicating whether or not the call will be made asynchronously.open功能需要三個參數(shù)： HTTP方法，這是GET或POST ;URL服務(wù)器端組件，該對象

28、將互動;和一個布爾說明是否要求將異步。這個API是AXMLHttpRequest.open(String method, String URL, boolean asynchronous)，如果一個互動設(shè)置為異步（ true ）則必須有一個The callback function for this interaction is set with</p><p>　　3The XMLHttpRequest obj

29、ect makes a call. .XMLHttpRequest對象提出了要求。</p><p>　　When the statement req.send(null); is reached, the call will be made.執(zhí)行到req.send(null)的時候發(fā)出請求。 In the case of an HTTP GET , this content may be null or left

30、 blank.如果一個HTTP GET ，此內(nèi)容可能是null或空白。 When this function is called on the XMLHttpRequest object, the call to the URL that was set during the configuration of the object is called.當(dāng)此功能要求XMLHttpRequest對象，調(diào)用的URL是在配置的對象是所謂的。 I

31、n the case of this example, the data that is posted ( id ) is included as a URL parameter.如這個例子中，數(shù)據(jù)公布（ id ）是作為一個URL參數(shù)。 </p><p>　　Use an HTTP GET when the request is idempotent, meaning that two duplicate req

32、uests will return the same results.使用HTTP GET請求時，是冪等，也就是說，兩個重復(fù)的請求將返回同樣的結(jié)果。 When using the HTTP GET method, the length of URL, including escaped URL parameters, is limited by some browsers and by server-side web container

33、s.當(dāng)使用HTTP GET方法，長度的網(wǎng)址，包括轉(zhuǎn)義網(wǎng)址參數(shù)，限制了一些瀏覽器和服務(wù)器端的Web容器。 The HTTP POST method should be used when sending data to the server that will affect the server-side application state.在HTTP POST法時，應(yīng)當(dāng)使用發(fā)送數(shù)據(jù)到服務(wù)器，這將影響服</p><p&

34、gt;　　req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); req.send("id=" + escape(idTextField.value));</p><p>　　如果用JavaScript產(chǎn)生表單元素值、必須確保值編碼的正確、JavaScript

35、有一個escape()函數(shù)用于保障正確的編碼、并把特定字符正確的忽略掉。 </p><p>　　4 .請求被ValidateServlet所處理: </p><p>　　A servlet mapped to the URI "validate" checks whether the user ID is in the user database.映射到一個servle

36、t的URI “驗證”檢查用戶是否ID是在用戶數(shù)據(jù)庫。 servlet處理XMLHttpRequest就和處理其他HTTP請求一樣：</p><p>　　The following example show a server extracting the id parameter from the request and validating whether the parameter has been

37、 taken.下面的例子顯示一個服務(wù)器提取id參數(shù)的要求，并確認(rèn)是否已采取參數(shù)。</p><p>　　public class ValidateServlet extends HttpServlet { </p><p>　　private ServletContext context; </p><p>　　private HashMap users = new

38、HashMap(); </p><p>　　public void init(ServletConfig config) throws ServletException { </p><p>　　this.context = config.getServletContext(); </p><p>　　users.put("greg","

39、;account data"); </p><p>　　users.put("duke","account data"); </p><p><b>　　} </b></p><p>　　public void doGet(HttpServletRequest request, HttpServ

40、letResponse response) </p><p>　　throws IOException, ServletException { </p><p>　　String targetId = request.getParameter("id"); </p><p>　　if ((targetId != null) &&

41、!users.containsKey(targetId.trim())) { </p><p>　　response.setContentType("text/xml"); </p><p>　　response.setHeader("Cache-Control", "no-cache"); </p><p&g

42、t;　　response.getWriter().write("valid"); </p><p><b>　　} else { </b></p><p>　　response.setContentType("text/xml"); </p><p>　　response.setHeader("

43、Cache-Control", "no-cache"); </p><p>　　response.getWriter().write("invalid"); </p><p><b>　　} } } </b></p><p>　　在這個例子中，一個簡單的hashmap是用來控制用戶。在這個例子中

44、，我們假設(shè)，使用者輸入duke的編號。</p><p>　　5 . The ValidateServlet returns an XML document containing the results.ValidateServlet返回一個包含結(jié)果的XML文檔。 </p><p>　　用戶ID duke是本列表中的用戶ID的users HashMap 。ValidateServlet生成一

45、個XML文檔作為響應(yīng)、更復(fù)雜的情況可能用到DOM、XSLT等。 </p><p>　　response.setContentType("text/xml"); </p><p>　　response.setHeader("Cache-Control", "no-cache"); </p><p>　　res

46、ponse.getWriter().write("invalid"); </p><p>　　開發(fā)者必須了解兩件事：第一：Content-Type必須設(shè)置為text/xml；第二：Cache-Control必須設(shè)置為no-cache。是XMLHttpRequest對象將只處理請求并在Content-Type的唯一text/xml ，并設(shè)置Cache-Control ，以no- cache將瀏覽

47、器從本地緩存響應(yīng)情況下，重復(fù)請求相同的URL （包括URL參數(shù)）可能會返回不同的反應(yīng)。 </p><p>　　6 .The XMLHttpRequest object calls the callback() function and processes the result.XMLHttpRequest對象調(diào)用callback()函數(shù)并處理結(jié)果。</p><p>　　The XMLHtt

48、pRequest object was configured to call the callback() function when there are changes to the readyState of the XMLHttpRequest object. XMLHttpRequest對象的準(zhǔn)備狀態(tài)有所變化的時候則調(diào)用callback()方法、我們假定已經(jīng)請求完畢ValidateServlet、準(zhǔn)備狀態(tài)為4、表示XMLH

49、ttpRequest調(diào)用已經(jīng)完成、HTTP狀態(tài)碼為200、表示HTTP交互已經(jīng)成功。</p><p>　　function callback() { if (req.readyState == 4) { if (req.status == 200) { // update the HTML DOM based on whether or not message is valid } } }</p&g

50、t;<p>　　瀏覽器維護(hù)著一個文檔的對象表示模型、既：DOM。網(wǎng)頁中的JavaScript方法可以訪問這個模型、并且可以在頁面已經(jīng)全部加載完成后再次改變這個模型。 </p><p>　　使用JavaScript代碼：req.responseXML可以得到服務(wù)端返回的XML文檔、req為XMLHttpRequest對象、DOM為JavaScript提供了一種搜索文檔內(nèi)容以及根據(jù)搜索結(jié)果改變網(wǎng)頁DOM

51、的手段?？梢允褂胷eq.responseText來訪問返回的XML文檔的字符串表示、如下所示： </p><p>　　<message> </p><p><b>　　valid </b></p><p>　　</message> </p><p>　　上面的例子是一個簡單的XML片段、實際應(yīng)用可

52、能包含更多： </p><p>　　function parseMessage() { </p><p>　　var message = req.responseXML.getElementsByTagName("message")[0]; </p><p>　　setMessage(message.childNodes[0].nodeValue

53、); </p><p><b>　　} </b></p><p>　　parseMessages()方法處理從服務(wù)端返回的XML文檔、該方法使用message元素的值去調(diào)用setMessage()方法來改變HTML DOM。 </p><p>　　7. HThe HTML DOM is updaTML文檔對象被更新。</p>&l

54、t;p>　　JavaScript technology can gain a reference to any element in the HTML DOM using a number of APIs. JavaScript可以獲得HTML DOM中任何元素（對象）的引用、推薦使用document.getElementById("userIdMessage")方法來獲取。userIdMessage就是網(wǎng)頁上

55、任意元素的ID屬性、有了元素（對象）的引用、JavaScript就可以改變這個元素的屬性以及這個元素的樣式屬性、還可以增加刪除或改變這個元素的子元素。通用的方法是設(shè)置innerHTML屬性、如下所示：</p><p>　　<script type="text/javascript"> </p><p>　　function setMessage(messag

56、e) { </p><p>　　var userMessageElement = document.getElementById("userIdMessage"); </p><p>　　userMessageElement.innerHTML = "<font color=\"red\">" + message +

57、" </font>"; </p><p><b>　　} </b></p><p>　　</script> </p><p><b>　　<body> </b></p><p>　　<div id="userIdMessage&

58、quot;></div> </p><p><b>　　</body> </b></p><p>　　innerHTML屬性被改變以后網(wǎng)頁可以立即體現(xiàn)出變化、如果innerHTML屬性內(nèi)部包含象<image>、<iframe>這樣的元素、那么其所指定的資源內(nèi)容一樣被瀏覽器解析顯示。 </p><

59、p>　　這種方法最大的缺點是在JavaScript代碼里面難于以字符串形式書寫HTML、內(nèi)嵌于JavaScript中的HTML也難以看懂、維護(hù)和更改。</p><p>　　另外的改變HTML DOM的方法是動態(tài)創(chuàng)建新元素然后將其作為子元素插入目標(biāo)元素下、如下所示：</p><p>　　<script type="text/javascript"> &l

60、t;/p><p>　　function setMessage(message) { </p><p>　　var userMessageElement = document.getElementById("userIdMessage"); </p><p>　　var userIdMessageFont = document.getElementBy

61、Id("userIdMessageFont"); </p><p>　　var messageElement = document.createTextNode(message); </p><p>　　if (userMessageElement.childNodes[0]) { </p><p>　　// update the element

62、s </p><p>　　userIdMessageFont.replaceChild(messageElement, userIdMessageFont.childNodes[0]); </p><p><b>　　} else { </b></p><p>　　// create the new elements </p>&

63、lt;p>　　var fontElement = document.createTextNode("font"); </p><p>　　fontElement.setAtribute("id", "userIdMessageFont"); </p><p>　　fontElement.setAtribute("c

64、olor", "red"); </p><p>　　userMessageElement.appendChild(fontElement); </p><p>　　fontElement.appendChild(messageElement); </p><p><b>　　} } </b></p>

65、<p>　　</script> </p><p><b>　　<body> </b></p><p>　　<div id="userIdMessage"></div> </p><p><b>　　</body> </b></p

66、><p>　　代碼示例顯示了DOM API 的JavaScript的技術(shù)可能被用來創(chuàng)造一個因素，或者改變元素編程。The support for JavaScript technology DOM APIs can differ in various browsers, so you must take care when developing applications.支持的JavaScript的DOM API的技

67、術(shù)可以在各種不同的瀏覽器，所以你必須照顧到正在發(fā)展中的應(yīng)用軟件。</p><p><b>　　最后的想法:</b></p><p>　　這些事情可能并不多么引人注目、而且還有一些缺陷：</p><p>　　復(fù)雜性：服務(wù)器端的開發(fā)將需要演示的邏輯的理解是，將需要在客戶端的HTML網(wǎng)頁，以及在服務(wù)器端的邏輯來生成XML內(nèi)容所需要的客戶端的HTML網(wǎng)

68、頁。 HTML page developers need to have a basic understanding of JavaScript technology to create new Ajax functionality. HTML網(wǎng)頁開發(fā)人員需要有一個基本的了解的JavaScript技術(shù)來創(chuàng)造新的Ajax功能。 Other options such as Project jMaki and Project Dynamic

69、Faces provide a way for Java developers to better use Ajax functionality without requiring deep knowledge of JavaScript technology.其他選項，如項目jMaki和項目動態(tài)工作面提供一種面向Java開發(fā)人員能夠更好地利用Ajax功能，而不需要深入了解的JavaScript技術(shù)。</p><p&

70、gt;　　標(biāo)準(zhǔn)化XMLHttpRequest對象：XMLHttpRequest對象是尚未加入的JavaScript技術(shù)規(guī)范，這意味著行為可能會有所變化，這取決于客戶端。 It's best to use libraries such as Dojo , which provides fallback solutions for making Ajax interactions transparently even on olde

71、r browsers that do not support the XMLHttpRequest Object: .這是最有效地利用圖書館，如道場 ，提供備用的解決方案使AJAX互動透明甚至舊版本的瀏覽器不支持XMLHttpRequest對象：</p><p>　　JavaScript的技術(shù)實施： Ajax的相互作用在很大程度上取決于JavaScript的技術(shù)，具有微妙的差異取決于客戶端。 See Quirks

72、Mode.org for more details on browser-specific differences.見QuirksMode.org的更詳細(xì)的針對特定瀏覽器的差別。 Consider using a library such as Dojo , which addresses many of the differences.考慮使用的圖書館，如道場 ，其中涉及許多分歧。</p><p>　　調(diào)試：

73、Ajax應(yīng)用也很難調(diào)試，因為處理邏輯是嵌入在客戶端和服務(wù)器上。 Browser add-ons such as Mozilla Firebug have emerged to make debuging easier.瀏覽器加載項，如Mozilla的螢火蟲出現(xiàn)，使調(diào)試更加容易。 Frameworks such as the Google Web Toolkit have emerged to allow for client and s

74、erver round-trip debugging.框架，如谷歌的Web工具包已經(jīng)出現(xiàn)，使客戶端和服務(wù)器來回調(diào)試。</p><p>　　Securing resources and protecting your data: You can view client-side JavaScript technology simply by selecting View Source from an Ajax-en

75、abled HTML p獲取資源和保護(hù)您的數(shù)據(jù)：您可以查看客戶端JavaScript技術(shù)只需通過 選擇查看源文件從一個基于AJAX的網(wǎng)頁。 A poorly designed Ajax-based application could open itself up to hackers or plagiarism.不善的設(shè)計基于Ajax的應(yīng)用程序可以打開自己黑客的攻擊或剽竊。 When providing Ajax services,

76、you should take care to make sure that those services are made available only to those intended.當(dāng)提供AJAX服務(wù)后，你就可以確保這些服務(wù)只提供給那些已打算好的。 See Restric</p><p>　　我們已經(jīng)看到， Ajax的相互作用可以解決許多問題。 Java technology provides a go

77、od base to develop and deploy Ajax-based applications with APIs for tying in HTTP processing, databases, web services, XML processing, and business objects. Java技術(shù)提供了一個良好的基礎(chǔ)，以開發(fā)和部署基于Ajax的應(yīng)用程序的API的滯留在HTTP處理，數(shù)據(jù)庫， Web服務(wù)， XM

78、L處理，和Business Objects 。 With a better understanding of this interaction model, today's applications can become more interactive, providing the end user with a better experience.更好地了解這種互動模式，今天的應(yīng)用可以成為更具互動性，為最終用戶提供一個更好的

79、經(jīng)驗。</p><p>　　Using Ajax requires that you use the latest browser versions that support the XMLHttpRequest object needed for Ajax interactions. Using Ajax also requires a great deal of client-side JavaScript

80、technology and CSS.使用AJAX ，您需要使用最新的瀏覽器版本它支持XMLHttpRequest對象需要AJAX的相互作用。使用AJAX還需要大量的客戶端JavaScript技術(shù)和CSS 。 As an application architect or developer, you will need to weigh the needs of having a rich application against bro

81、wser support, architecture complexity, and developer training.作為應(yīng)用架構(gòu)師或開發(fā)人員，您將要權(quán)衡這樣的需要-</p><p>　　What is evident is that prominent web applications are increasingly becoming more interactive.什么是顯而易見的事，著名的Web應(yīng)

82、用正日益成為并更具互動性。 Are yours?是嗎？</p><p>　　Asynchronous JavaScript Technology and XML (Ajax) With the Java Platform</p><p>　　Anyone who has used Flickr, GMail, Google Suggest, or Google Maps will real

83、ize that a new breed of dynamic web applications is emerging. These applications look and act very similar to traditional desktop applications without relying on plug-ins or browser-specific features. Web applications ha

84、ve traditionally been a set of HTML pages that must be reloaded to change any portion of the content. Technologies such as JavaScript programming language and cascading style sheets (CSS) have matured to t</p><

85、;p>　　Using JavaScript technology, an HTML page can asynchronously make calls to the server from which it was loaded and fetch content that may be formatted as XML documents, HTML content, plain text, or JavaScript Obj

86、ect Notation (JSON). The JavaScript technology may then use the content to update or modify the Document Object Model (DOM) of the HTML page. The term Asynchronous JavaScript Technology and XML (Ajax) has emerged recentl

87、y to describe this interaction model.</p><p>　　Ajax is not new. These techniques have been available to developers targeting Internet Explorer on the Windows platform for many years. Until recently, the tech

88、nology was known as web remoting or remote scripting. Web developers have also used a combination of plug-ins, Java applets, and hidden frames to emulate this interaction model for some time. What has changed recently is

89、 the inclusion of support for the XMLHttpRequest object in the JavaScript runtimes of the mainstream browsers. The real </p><p>　　What makes Ajax-based clients unique is that the client contains page-specifi

90、c control logic embedded as JavaScript technology. The page interacts with the JavaScript technology based on events such as the loading of a document, a mouse click, focus changes, or even a timer. Ajax interactions all

91、ow for a clear separation of presentation logic from the data. An HTML page can pull in bite-size pieces to be displayed. Ajax will require a different server-side architecture to support this interactio</p><p

92、>　　Some uses for Ajax interactions are the following:</p><p>　　Real-time form data validation: Form data such as user IDs, serial numbers, postal codes, or even special coupon codes that require server-si

93、de validation can be validated in a form before the user submits a form. See Realtime Form Validation for details. </p><p>　　Autocompletion: A specific portion of form data such as an email address, name, or

94、 city name may be autocompleted as the user types. </p><p>　　Load on demand: Based on a client event, an HTML page can fetch more data in the background, allowing the browser to load pages more quickly. <

95、/p><p>　　Sophisticated user interface controls and effects: Controls such as trees, menus, data tables, rich text editors, calendars, and progress bars allow for better user interaction and interaction with HTM

96、L pages, generally without requiring the user to reload the page. </p><p>　　Refreshing data and server push: HTML pages may poll data from a server for up-to-date data such as scores, stock quotes, weather,

97、or application-specific data. A client may use Ajax techniques to get a set of current data without reloading a full page. Polling is not the most effecient means of ensuring that data on a page is the most current. Emer

98、ging techniques such as Comet are being developed to provide true server-side push over HTTP by keeping a persistent connection between the client an</p><p>　　Partial submit: An HTML page can submit form dat

99、a as needed without requiring a full page refresh. </p><p>　　Mashups: An HTML page can obtain data using a server-side proxy or by including an external script to mix external data with your application'

100、s or your service's data. For example, you can mix content or data from a third-party application such as Google Maps with your own application. </p><p>　　Page as an application: Ajax techniques can be m

101、ade to create single-page applications that look and feel much like a desktop application. See the article on the use of Ajax and portlets for more on how you can use portlet applications today. </p><p>　　Th

102、ough not all-inclusive, this list shows that Ajax interactions allow web applications to do much more than they have done in the past. </p><p>　　The Anatomy of an Ajax Interaction</p><p>　　Now t

103、hat we have discussed what Ajax is and what some higher-level issues are, let's put all the pieces together and look at an Ajax-enabled Java application. </p><p>　　Let's consider an example. A web ap

104、plication contains a static HTML page, or an HTML page generated in JSP technology contains an HTML form that requires server-side logic to validate form data without refreshing the page. A server-side web component (ser

105、vlet) named ValidateServlet will provide the validation logic. Figure 1 describes the details of the Ajax interaction that will provide the validation logic. </p><p>　　The following items represent the setup