異步JavaScript和XML(AJAX).ppt

1、異步 JavaScript 和 XML (AJAX) 與 Java Enterprise Edition,2006.11,前言,使用過(guò) Flickr、GMail、Google Suggest 或 Google Maps 的任何用戶都會(huì)意識(shí)到，將出現(xiàn)一種新型的動(dòng)態(tài) Web 應(yīng)用程序。這些應(yīng)用程序的外觀和作用與傳統(tǒng)的桌面應(yīng)用程序非常類似，它們不依賴于插件或特定于瀏覽器的功能。 傳統(tǒng)的 Web 應(yīng)用程序是一組 HTML 頁(yè)，必須重新裝入這些頁(yè)面，才能更改內(nèi)容的任何部分。在過(guò)去幾年間，諸如 JavaScript 和層疊樣式表 (CSS) 之類的技術(shù)已經(jīng)發(fā)展成熟，可以有效地使用這些技術(shù)創(chuàng)建在所有主要瀏覽

2、器上運(yùn)行的動(dòng)態(tài)性很強(qiáng)的 Web 應(yīng)用程序。,前言,本文檔及其相關(guān)的解決方案將詳細(xì)論述這幾種技術(shù)，目前您可以使用這些技術(shù)使 Web 應(yīng)用程序成為內(nèi)容更豐富、交互性更強(qiáng)的應(yīng)用程序，就像桌面應(yīng)用程序一樣,異步JavaScript和XML(AJAX)簡(jiǎn)介 1,HTML 頁(yè)使用 JavaScript 可以異步調(diào)用裝入該頁(yè)的服務(wù)器并獲取 XML 文檔。然后 JavaScript 可以使用 XML 文檔更新或修改 HTML 頁(yè)的文檔對(duì)象模型 (DOM)。 最近使用“異步 JavaScript 和 XML” (Asynchronous JavaScript and XML， AJAX) 術(shù)語(yǔ)來(lái)描述此交互模型。

3、,異步JavaScript和XML(AJAX)簡(jiǎn)介 2,AJAX 不是一項(xiàng)新興技術(shù)，對(duì)于在 Windows 平臺(tái)上開發(fā) Internet Explorer (IE) 的開發(fā)者來(lái)說(shuō)，多年來(lái)他們一直在使用這些技術(shù)。直到最近，這項(xiàng)技術(shù)才被稱為 Web 遠(yuǎn)程處理或遠(yuǎn)程腳本。一段時(shí)間以來(lái)，Web 開發(fā)者還結(jié)合使用插件、Java Applet 和隱藏框架來(lái)仿真此交互模型。 而最近發(fā)生的變化就是：在所有平臺(tái)的主流瀏覽器中都包含了對(duì) XMLHttpRequest 對(duì)象的支持。真正的神奇之處在于產(chǎn)生了 JavaScript XMLHttpRequest 對(duì)象。 雖然未在正式的 JavaScript 規(guī)范中指定此

4、對(duì)象，但是目前所有的主流瀏覽器都支持它。與當(dāng)前一代瀏覽器（如 Firefox、IE 和 Safari）中的 JavaScript 和 CSS 支持稍有不同之處在于：它們是可管理的。如果要求您支持較舊的瀏覽器，則 AJAX 可能不是您的最佳選擇。,異步JavaScript和XML(AJAX)簡(jiǎn)介 3,基于 AJAX 的客戶端的獨(dú)特之處在于，客戶端包含了作為 JavaScript 嵌入的特定于頁(yè)面的控制邏輯。頁(yè)面基于事件（如裝入的文檔、鼠標(biāo)單擊、焦點(diǎn)更改，甚至是計(jì)時(shí)器）與 JavaScript 進(jìn)行交互。 通過(guò) AJAX 交互，可以清晰地將表示邏輯與數(shù)據(jù)分開。與每次要顯示一個(gè)變化時(shí)必須重新裝入整個(gè)

5、頁(yè)面相比，HTML 頁(yè)可以根據(jù)需要裝入很小的數(shù)據(jù)片段。,異步JavaScript和XML(AJAX)簡(jiǎn)介 4,AJAX 需要使用一種不同的服務(wù)器端體系結(jié)構(gòu)來(lái)支持此交互模型。傳統(tǒng)的服務(wù)器端 Web 應(yīng)用程序著重為產(chǎn)生服務(wù)器調(diào)用的每個(gè)客戶端事件生成 HTML 文檔，并且在每次響應(yīng)時(shí)客戶端都會(huì)刷新并重新呈現(xiàn)完整的 HTML 頁(yè)。 內(nèi)容豐富的 Web 應(yīng)用程序著重于獲取 HTML 文檔的客戶端，該客戶端充當(dāng)一個(gè)模板或容器，根據(jù)客戶端事件使用從服務(wù)器端組件檢索的 XML 數(shù)據(jù)在其中添加內(nèi)容。,使用AJAX交互的用例 1,實(shí)時(shí)的表單數(shù)據(jù)驗(yàn)證：在用戶提交表單之前，可以在表單中驗(yàn)證要求服務(wù)器端驗(yàn)證的表單數(shù)據(jù)，

6、如用戶 ID、序列號(hào)、郵政編碼，甚至是特殊優(yōu)惠券代碼。 自動(dòng)完成：表單數(shù)據(jù)的特定部分（如電子郵件地址、姓名或城市名稱）可以在用戶鍵入時(shí)自動(dòng)完成。 主要詳細(xì)操作：基于客戶端事件，HTML 頁(yè)可以獲取有關(guān)數(shù)據(jù)的更詳細(xì)信息，例如，在不刷新頁(yè)面的情況下，客戶端可以查看個(gè)別產(chǎn)品信息的產(chǎn)品清單。,使用AJAX交互的用例 2,復(fù)雜的用戶界面控件：可以提供不需要頁(yè)面刷新的控件，如樹狀結(jié)構(gòu)的控件、菜單和進(jìn)度欄。 刷新頁(yè)面上的數(shù)據(jù)：HTML 頁(yè)可以輪詢服務(wù)器中的數(shù)據(jù)以獲取最新的數(shù)據(jù)，如分?jǐn)?shù)、股票報(bào)價(jià)、天氣預(yù)報(bào)或特定于應(yīng)用程序的數(shù)據(jù)。 服務(wù)器端通知：HTML 頁(yè)可以通過(guò)輪詢服務(wù)器獲取事件通知來(lái)模擬服務(wù)器端推送，包括

7、發(fā)送消息通知客戶端、刷新頁(yè)面數(shù)據(jù)或?qū)⒖蛻舳酥囟ㄏ虻狡渌?yè)。,使用AJAX交互的用例 3,此列表并不詳盡，但是它表明了利用 AJAX 交互，Web 應(yīng)用程序可以實(shí)現(xiàn)比以往更多的功能。盡管該技術(shù)有許多引人注目的優(yōu)點(diǎn)，但是也存在一些缺點(diǎn)： 復(fù)雜性：服務(wù)器端開發(fā)者需要了解，在 HTML 客戶端頁(yè)以及服務(wù)器端邏輯中需要表示邏輯，才能生成客戶端 HTML 頁(yè)所需的 XML 內(nèi)容。HTML 頁(yè)開發(fā)者需要具備 JavaScript 技術(shù)。隨著時(shí)間的推移，當(dāng)創(chuàng)建了新框架，并且為現(xiàn)有框架提供了交互模型支持后，創(chuàng)建支持 AJAX 的應(yīng)用程序會(huì)變得更容易。,使用AJAX交互的用例 4,XMLHttpRequest 對(duì)

8、象的標(biāo)準(zhǔn)化：XMLHttpRequest 還不是 JavaScript 規(guī)范的一部分，這表明其行為會(huì)隨著客戶端而發(fā)生變化。 JavaScript 實(shí)現(xiàn)：AJAX 交互在很大程度上依賴 JavaScript（取決于客戶端的不同而稍有差異），有關(guān)特定于瀏覽器的差異的詳細(xì)信息，請(qǐng)?jiān)L問(wèn) QuirksM。 調(diào)試：很難調(diào)試 AJAX 應(yīng)用程序，這是因?yàn)樵诳蛻舳撕头?wù)器中均嵌入了處理邏輯。 可查看的源文件：在客戶端只需從支持 AJAX 的 HTML 頁(yè)選擇“查看源文件”，即可查看客戶端 JavaScript。如果基于 AJAX 的應(yīng)用程序的設(shè)計(jì)很差，則可能會(huì)受到黑客或剽竊者的攻擊。,使用AJA

9、X交互的用例 5,隨著開發(fā)者編寫使用 AJAX 交互模型的應(yīng)用程序的經(jīng)驗(yàn)日益豐富，使用 AJAX 技術(shù)構(gòu)建的各種框架和模式可能會(huì)紛紛出現(xiàn)。 在 AJAX 交互中強(qiáng)調(diào)“以部分更改適用全局更改”的框架仍然為時(shí)尚早，本文檔著重說(shuō)明現(xiàn)有的 Java 2 Enterprise Edition (J2EE) 技術(shù)（如 Servlet、JavaServer Pages、JavaServer Faces 和 Java 標(biāo)準(zhǔn)標(biāo)記庫(kù) (JSTL)）目前是如何支持 AJAX 交互的。,AJAX 交互的分析 1,到目前為止，已經(jīng)論述了 AJAX 的含義以及存在的一些疑難問(wèn)題，現(xiàn)在將所有內(nèi)容結(jié)合起來(lái)演示支持 AJAX

10、的 J2EE 應(yīng)用程序。 讓我們來(lái)看一個(gè)示例，Web 應(yīng)用程序包含了一個(gè)靜態(tài) HTML 頁(yè)，或者用 JSP 技術(shù)生成的 HTML 頁(yè)，該頁(yè)包含了一個(gè) HTML 表單，要求服務(wù)器端邏輯驗(yàn)證表單數(shù)據(jù)而不刷新頁(yè)面。名為 ValidateServlet 的服務(wù)器端 Web 組件 (Servlet) 將提供驗(yàn)證邏輯。下圖描述了提供驗(yàn)證邏輯的 AJAX 交互的詳細(xì)信息。,AJAX 交互圖,AJAX 交互的分析 2,下面的項(xiàng)表示了 AJAX 交互的設(shè)置，如上圖顯示的那樣。 發(fā)生客戶端事件。 創(chuàng)建并初始化 XMLHttpRequest 對(duì)象。 XMLHttpRequest 對(duì)象發(fā)出調(diào)用。 請(qǐng)求由 Valida

11、tionServlet 進(jìn)行處理。 ValidationServlet 返回包含結(jié)果的 XML 文檔。 XMLHttpRequest 對(duì)象調(diào)用 callback() 函數(shù)并處理結(jié)果。 更新 HTML DOM。 現(xiàn)在讓我們更詳細(xì)地了解 AJAX 交互的每個(gè)步驟。,1. 發(fā)生客戶端事件,調(diào)用 JavaScript 函數(shù)是事件產(chǎn)生的結(jié)果。在本例中，函數(shù) validate() 會(huì)映射到鏈接或表單組件上的 onkeyup 事件。 每次在表單字段中按下鍵時(shí)，上面的表單元素都將調(diào)用 validate()。,2. 創(chuàng)建并初始化 XMLHttpRequest 對(duì)象 1,初始化并配置 XMLHttpRequest

12、 對(duì)象。,var req; function validate() var idField = document.getElementById(idField); var url = validate?id= + escape(idField.value); if (window.XMLHttpRequest) req = new XMLHttpRequest(); else if (window.ActiveXObject) req = new ActiveXObject(Microsoft.XMLHTTP); req.open(GET, url, true); req.onreadysta

13、techange = callback; req.send(null); ,創(chuàng)建并初始化 XMLHttpRequest 對(duì)象 2,validate() 函數(shù)會(huì)初始化 XMLHttpRequest 對(duì)象。open 方法需要三個(gè)參數(shù)，即表示要使用的 HTTP 方法的 GET 或 POST 的 url 字符串、目標(biāo) URL 的字符串以及表明是否發(fā)出異步調(diào)用的布爾值。 如果將交互設(shè)置為異步 (true)，則必須指定回調(diào)函數(shù)。此交互的回調(diào)函數(shù)是使用語(yǔ)句 req.onreadystatechange =callback; 設(shè)置的。有關(guān)詳細(xì)信息，請(qǐng)參見標(biāo)題為“ XMLHttpRequest 對(duì)象調(diào)用 cal

14、lback() 函數(shù)并處理結(jié)果”的部分。,3. XMLHttpRequest 對(duì)象發(fā)出調(diào)用 1,執(zhí)行到語(yǔ)句 req.send(null); 時(shí)，將發(fā)出調(diào)用。對(duì)于 HTTP 獲得的內(nèi)容可能是 null 或空值。為 XMLHttpRequest 對(duì)象調(diào)用此函數(shù)時(shí)，會(huì)調(diào)用初始化對(duì)象期間設(shè)置的 URL。在本示例中，是以 URL 參數(shù)的形式包含傳遞的數(shù)據(jù) (id)。 當(dāng)請(qǐng)求為冪等時(shí)（意味著兩個(gè)重復(fù)的請(qǐng)求將返回相同的結(jié)果），請(qǐng)使用 HTTP GET。使用 HTTP GET 方法時(shí)，包括轉(zhuǎn)義的 URL 參數(shù)在內(nèi)的 URL 長(zhǎng)度受某些瀏覽器以及服務(wù)器端 Web 容器的限制。將數(shù)據(jù)發(fā)送到影響服務(wù)器端應(yīng)用程序狀態(tài)

15、的服務(wù)器時(shí)，應(yīng)該使用 HTTP POST 方法。HTTP POST 要求使用以下語(yǔ)句為 XMLHttpRequest 對(duì)象設(shè)置 Content-Type 頭：,XMLHttpRequest 對(duì)象發(fā)出調(diào)用2,通過(guò) JavaScript 發(fā)送表單值時(shí)，應(yīng)該考慮字段值的編碼。JavaScript 包括一個(gè) escape() 函數(shù)，應(yīng)該使用該函數(shù)確保對(duì)本地化的內(nèi)容進(jìn)行正確編碼并且正確轉(zhuǎn)義特殊字符。,req.setRequestHeader(Content-Type, application/x-www-form-urlencoded); req.send(id= + escape(idTextFiel

16、d.value);,4. 請(qǐng)求由 ValidationServlet 進(jìn)行處理,映射到 URI“驗(yàn)證”的 Servlet 會(huì)檢查用戶 ID 是否在用戶數(shù)據(jù)庫(kù)中。 Servlet 就像處理任何其他 HTTP 請(qǐng)求那樣處理 XMLHttpRequest。下面的示例顯示了一個(gè)服務(wù)器，該服務(wù)器從請(qǐng)求中提取 id 參數(shù)，并驗(yàn)證是否使用了該參數(shù)。,public class ValidationServlet extends HttpServlet private ServletContext context; private HashMap users = new HashMap(); public vo

17、id init(ServletConfig config) throws ServletException this.context = config.getServletContext(); users.put(greg,account data); users.put(duke,account data); public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException String targetId = request.getP

18、arameter(id); if (targetId != null) ,5. ValidationServlet 返回 XML 文檔,用戶 id duke 在 users HashMap 中的用戶 id 列表中。ValidationServlet 會(huì)將一個(gè) XML 文檔寫入包含值為 invalid 的 message 元素的響應(yīng)。更復(fù)雜的用例可能需要 DOM、XSLT 或其他 API 才能生成響應(yīng)。 response.setContentType(text/xml); response.setHeader(Cache-Control, no-cache); response.getWrite

19、r().write(invalid); 開發(fā)者需要注意的兩點(diǎn)是：Content-Type 需要設(shè)置為 text/xml；Cache-Control 需要設(shè)置為 no-cache。XMLHttpRequest 對(duì)象只處理 Content-Type 為 text/xml 的請(qǐng)求；在重復(fù)請(qǐng)求相同的 URL（包括 URL 參數(shù)）卻返回不同的響應(yīng)時(shí)，將 Cache-Control 設(shè)置為 no-cache 會(huì)阻止瀏覽器在本地緩存響應(yīng)。,6. XMLHttpRequest 對(duì)象調(diào)用 callback() 函數(shù)并處理結(jié)果 1,當(dāng) XMLHttpRequest 對(duì)象的 readyState 發(fā)生更改時(shí)，XML

20、HttpRequest 對(duì)象被配置為調(diào)用 callback() 函數(shù)。假定發(fā)出了對(duì) ValidationServlet 的調(diào)用，并且 readyState 為 4，表示 XMLHttpRequest 調(diào)用完成。HTTP 狀態(tài)代碼為 200，表示 HTTP 交互成功。,function callback() if (req.readyState = 4) if (req.status = 200) / update the HTML DOM based on whether or not message is valid ,XMLHttpRequest 對(duì)象調(diào)用 callback() 函數(shù)并處理

21、結(jié)果 2,瀏覽器保留被顯示文檔的對(duì)象表示（稱為文檔對(duì)象模型 (DOM)）。HTML 頁(yè)中的 JavaScript 可以訪問(wèn) DOM，并且可以通過(guò) API 在裝入頁(yè)面后修改 DOM。 請(qǐng)求成功后，JavaScript 代碼會(huì)修改 HTML 頁(yè)的 DOM。使用 req.responseXML（其中 req 是 XMLHttpRequest 對(duì)象）的 JavaScript 代碼，可以使用從 ValidationServlet 檢索的 XML 文檔的對(duì)象表示。DOM API 為 JavaScript 提供了一種方法，可以導(dǎo)航文檔內(nèi)容并使用該內(nèi)容修改 HTML 頁(yè)的 DOM。通過(guò)調(diào)用 req.respo

22、nseText 檢索的文檔的字符串表示?，F(xiàn)在，讓我們通過(guò)查看從 ValidateServlet 返回的以下 XML 文檔，了解如何在 JavaScript 中使用 DOM API。,XMLHttpRequest 對(duì)象調(diào)用 callback() 函數(shù)并處理結(jié)果 3, valid 上面的示例是一個(gè)簡(jiǎn)單的 XML 片段，它包含了 message 元素（只是字符串 valid 或 invalid）的發(fā)送方。更高級(jí)的樣例可能包含了顯示給用戶的多條消息和有效名稱。 parseMessages() 函數(shù)會(huì)處理從 ValidationServlet 檢索的 XML 文檔。此函數(shù)將使用 message 元素的值

23、調(diào)用 setMessage() 以更新 HTML DOM。,function parseMessage() var message = req.responseXML.getElementsByTagName(message)0; setMessage(message.childNodes0.nodeValue); ,7. 更新 HTML DOM 1,JavaScript 可以使用許多 API 獲得對(duì) HTML DOM 中任何元素的引用。獲得元素引用的建議方法是調(diào)用 document.getElementById(“userIdMessage”)，其中 “userIdMessage” 是在 H

24、TML 文檔中出現(xiàn)的元素的 id 屬性。 通過(guò)對(duì)元素的引用，現(xiàn)在可以使用 JavaScript 修改元素的屬性，修改元素的樣式屬性，或者添加、刪除或修改子元素。,更新 HTML DOM 2,更改元素的主體內(nèi)容的一種常用方法是為元素設(shè)置 innerHTML 屬性，如以下示例所示。 在設(shè)置 innerHTML 之后，會(huì)立即重新呈現(xiàn) HTML 頁(yè)中受影響的部分。如果 innerHTML 屬性包含諸如 或 之類的元素，則會(huì)同時(shí)獲取并呈現(xiàn)那些元素指定的內(nèi)容。, function setMessage(message) var userMessageElement = document.getElemen

25、tById(userIdMessage); userMessageElement.innerHTML = + message + ; ,更新 HTML DOM 3,使用此方法的一個(gè)主要缺點(diǎn)是：設(shè)置為 元素主體的 HTML 將被硬編碼為 JavaScript 中的字符串，包括其他標(biāo)記，如 元素。在字符串表示中如果混有 JavaScript 代碼，則會(huì)使頁(yè)面難以理解和編輯。 另一種修改 HTML DOM 的方法是動(dòng)態(tài)創(chuàng)建新元素，并將它們作為子級(jí)元素附加到目標(biāo)元素中，如下例所示。, function setMessage(message) var userMessageElement = document.getElementById(userIdMessage);