異步JavaScript和XML(AJAX).ppt

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

2、器上運(yùn)行的動態(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)簡介 1,HTML 頁使用 JavaScript 可以異步調(diào)用裝入該頁的服務(wù)器并獲取 XML 文檔。然后 JavaScript 可以使用 XML 文檔更新或修改 HTML 頁的文檔對象模型 (DOM)。 最近使用“異步 JavaScript 和 XML” (Asynchronous JavaScript and XML， AJAX) 術(shù)語來描述此交互模型。

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

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

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

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

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

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

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

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

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

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

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

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

16、d.value);,4. 請求由 ValidationServlet 進(jìn)行處理,映射到 URI“驗證”的 Servlet 會檢查用戶 ID 是否在用戶數(shù)據(jù)庫中。 Servlet 就像處理任何其他 HTTP 請求那樣處理 XMLHttpRequest。下面的示例顯示了一個服務(wù)器，該服務(wù)器從請求中提取 id 參數(shù)，并驗證是否使用了該參數(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 會將一個 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 對象只處理 Content-Type 為 text/xml 的請求；在重復(fù)請求相同的 URL（包括 URL 參數(shù)）卻返回不同的響應(yīng)時，將 Cache-Control 設(shè)置為 no-cache 會阻止瀏覽器在本地緩存響應(yīng)。,6. XMLHttpRequest 對象調(diào)用 callback() 函數(shù)并處理結(jié)果 1,當(dāng) XMLHttpRequest 對象的 readyState 發(fā)生更改時，XML

20、HttpRequest 對象被配置為調(diào)用 callback() 函數(shù)。假定發(fā)出了對 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 對象調(diào)用 callback() 函數(shù)并處理

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

22、nseText 檢索的文檔的字符串表示?，F(xiàn)在，讓我們通過查看從 ValidateServlet 返回的以下 XML 文檔，了解如何在 JavaScript 中使用 DOM API。,XMLHttpRequest 對象調(diào)用 callback() 函數(shù)并處理結(jié)果 3, valid 上面的示例是一個簡單的 XML 片段，它包含了 message 元素（只是字符串 valid 或 invalid）的發(fā)送方。更高級的樣例可能包含了顯示給用戶的多條消息和有效名稱。 parseMessages() 函數(shù)會處理從 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 獲得對 HTML DOM 中任何元素的引用。獲得元素引用的建議方法是調(diào)用 document.getElementById(“userIdMessage”)，其中 “userIdMessage” 是在 H

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

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