AJAX 介紹
AJAX 基礎
AJAX 支持動態(tài)、異步的 Web 體驗，不需要頁面刷新。它集成了以下技術：
- XHTML 和 CSS 提供了基于標準的表示。
- 文檔對象模型（DOM）提供了動態(tài)顯示和交互。
- XML 和 XSLT 提供了數(shù)據(jù)交換和操縱。
XMLHttpRequest 提供了異步數(shù)據(jù)檢索。
- javascript 把每一樣東西綁定在一起。
AJAX 技術的核心是 javascript 對象：XMLHttpRequest。這個對象是通過瀏覽器實現(xiàn)提供的 —— 先是通過 Internet Explorer 5.0 然后通過 Mozilla 兼容的瀏覽器。請進一步觀察這個對象。
XMLHttpRequest
使用 XMLHttpRequest，可以用 javascript 發(fā)出到服務器的請求，并在不阻塞用戶的情況下處理響應。在創(chuàng)建 Web 站點并用 XMLHttpRequest 在客戶機瀏覽器上無刷新地執(zhí)行屏幕更新的同時，它還提供了更多靈活性和豐富的用戶體驗。
XMLHttpRequest 應用程序的示例包括 Google 的 Gmail 服務、Google 的 Suggest 動態(tài)查詢界面以及 MapQuest 的動態(tài)地圖界面。在下一節(jié)，在演示圖書訂購應用程序的設計和實現(xiàn)時，詳細介紹了如何使用 XMLHttpRequest 對象。
應用程序設計
應用程序的元素
基于 Web 的示例圖書訂購應用程序包含以下用 AJAX 實現(xiàn)的客戶端函數(shù)：
- 訂購 ID 驗證
- 一個 View Authors 列表
- 一個 View Publishers 列表
這里的目的是介紹 Web 頁面中的實時驗證 和頁面刷新 如何讓客戶交互更平滑、更有效。
應用程序的結構
圖 1 的圖表說明了示例圖書訂購應用程序的設計架構：
圖 1. AJAX 架構
應用程序是一個使用 Java 服務器頁面（JSP）技術開發(fā)的單一 Web 頁面。用戶可以用 Web 瀏覽器（例如 Microsoft® Internet Explorer）調用 Web 頁面并輸入應用程序要實時驗證的訂購 ID。在 ID 異步驗證的時候，用戶可以輸入更多信息。用戶可以根據(jù)作者 或出版者 查看圖書的書名。屏幕會根據(jù)用戶的選擇填充作者列表 或出版者列表。根據(jù)選擇，書名列表 會被填充。所有這些列表都是實時填充的 —— 換句話說，頁面沒有刷新，但是數(shù)據(jù)仍然來自后臺層。我們把這種現(xiàn)象叫做實時刷新。
從 圖 1 可以看出，XMLHttpRequest javascript 對象幫助進行實時異步處理。該對象采用 XML 格式通過 HTTP 對位于 Web 容器內的 LibraryServlet 發(fā)出請求。然后 servlet 查詢數(shù)據(jù)庫、提取數(shù)據(jù)并發(fā)送回客戶機，還是采用 XML 格式通過 HTTP 進行傳送。請求和響應都是在沒有刷新頁面的情況下實時發(fā)生的。
就是這一點使得 AJAX 如此強大。用戶不需要等候頁面重新載入才能完成，因為這里沒有頁面重載。
在 下一節(jié) 中，我將演示如何根據(jù)這個設計來實現(xiàn)圖書訂購應用程序。我要介紹代碼并做一些分析。（要得到本教程的示例代碼，請 下載文件 x-ajax-library.war。）
實現(xiàn)應用程序
用 AJAX 實現(xiàn)應用程序
在這一節(jié)，我們研究示例圖書訂購應用程序的代碼，并進一步查看每個基于 AJAX 的 javascript 組件：
查看代碼：驗證訂購 ID
先從驗證訂購 ID 的函數(shù) <input type="text" name="subscriptionID" onblur="validate(this.form)"/> 開始。這個代碼生成文本字段，用戶可以在里面輸入訂購 ID。用戶輸入 ID 并移到表單的下一個字段時，觸發(fā) onBlur 事件。這個事件調用 javascript 函數(shù) validate()：
var req;
function validate(formObj) {
init();
req.onreadystatechange = subscriptionValidator;
req.send("subscriptionID=" + formObj.subscriptionID.value);
}
|
validate() 函數(shù)接受 formObj 作為參數(shù)。它首先調用 init() 函數(shù)：
function init() {
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
var url = "/Library/LibraryServlet";
req.open("POST", url, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}
|
查看代碼： init()
現(xiàn)在看 init() 函數(shù)的工作（我們把代碼分成幾部分）：
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
|
init() 函數(shù)首先創(chuàng)建 XMLHttpRequest 對象。這個請求對象是 AJAX 的核心。它以 XML 格式發(fā)送和接收請求。這段代碼檢查瀏覽器對 XMLHttpRequest 對象的支持（多數(shù)瀏覽器都支持它）。如果使用 Microsoft Internet Explorer 5.0 以上版本，那么就執(zhí)行第二個條件。
req.open("POST", url, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
|
代碼創(chuàng)建了 XMLHttpRequest 對象之后，需要設置某些請求屬性。在前面的代碼中，第一行設置請求方法、請求 URL 和請求的類型（是否異步）。它通過調用 XMLHttpRequest 對象上的 open() 方法做這件事。
這里我們要使用 POST 方法。理想情況下，當需要在服務器上修改狀態(tài)時，請使用 POST。我們的應用程序并不修改狀態(tài)，但我們仍然傾向于使用 POST。url 是要執(zhí)行的 servlet 的 URL。true 表明我們要異步地執(zhí)行請求。
對于 POST 方法，我們需要設置 Content-Type 這個請求頭。對于 GET 方法來說不需要這個設置。
function validate(formObj) {
init();
req.onreadystatechange = subscriptionValidator;
req.send("subscriptionID=" + formObj.subscriptionID.value);
}
|
查看代碼：回調句柄 1
繼續(xù)查看驗證方法，下面把 subscriptionValidator 回調句柄分配給 onreadystatechange，請求狀態(tài)的每個變化都會觸發(fā)它。
這個回調句柄 都負責什么呢？因為正在異步地處理請求，所以需要一個回調句倆，從服務器返回完整響應的時候調用它 —— 回調句柄是對訂購 ID 進行驗證的地方（也就是編寫實際的驗證代碼的地方）。
句柄充當偵聽器。它一直等待響應完成。（稍后 將詳細介紹句柄代碼 。）為了發(fā)送請求，最后一行調用了 send() 方法。請求以名稱=值 對的形式發(fā)送。對于 GET 方法，請求作為 URL 的一部分發(fā)送，所以 send() 方法被傳遞了一個空參數(shù)。
請求被發(fā)送到 servlet。servlet 處理請求并實時地發(fā)回響應。這就是 servlet 處理請求的方式。下一個代碼段表示了 LibraryServlet 的 doPost() 方法。
public void doPost(HttpServletRequest req, HttpServletResponse resp) throws
ServletException, IOException {
String ID = null;
ID = req.getParameter("subscriptionID");
if (ID != null) {
String status = "<message>" + this.validID(ID) + "</message>";
this.writeResponse(resp, status);
}
}
|
查看代碼：回調句柄 2
doPost() 方法從請求參數(shù)得到 subscriptionID。為了驗證 ID，它調用 validID() 方法。這個方法驗證 ID，如果 ID 正確，則返回 true，否則返回 false。它用 XML 格式構造返回狀態(tài)，并調用 writeResponse() 方法來寫響應?，F(xiàn)在來看 writeResponse() 方法。
public void writeResponse(HttpServletResponse resp, String output) throws IOException {
resp.setContentType("text/xml");
resp.setHeader("Cache-Control", "no-cache");
resp.getWriter().write(output);
}
|
響應用 XML 格式發(fā)送。第一行設置響應的內容類型為 text/xml。第二行把頭 Cache-Control 的值設為 no-cache。這個值是必需的。AJAX 要求響應的輸出不能被瀏覽器緩存。最后一行調用 getWriter().write() 方法來寫響應。
查看代碼：回調句柄 3
請求由 servlet 處理，響應被發(fā)送回客戶機。請記住，所有這些都在后臺發(fā)生，沒有頁面刷新?，F(xiàn)在 前面 討論過的回調句柄方法會處理并解析響應：
function subscriptionValidator() {
if (req.readystate == 4) {
if (req.status == 200) {
var messageObj = req.responseXML.getElementsByTagName("message")[0];
var message = messageObj.childNodes[0].nodeValue;
if (message == "true") {
msg.innerHTML = "Subscription is valid";
document.forms[0].order.disabled = false;
} else {
msg.innerHTML = "Subscription not valid";
document.forms[0].order.disabled = true;
}
}
}
}
|
查看代碼：回到 XMLHttpRequest
如前所述，XMLHttpRequest 對象是構造和發(fā)送請求的核心對象。它也負責讀取和解析從服務器返回的響應。請看下面幾部分代碼。
if (req.readystate == 4) {
if (req.status == 200) {
|
前面的代碼檢查請求的狀態(tài)。如果請求處在就緒狀態(tài)，就讀取和解析響應。
就緒狀態(tài)是什么意思呢？當請求對象的屬性 readystate 的值是 4 時，就意味著客戶機接收到了響應而且接收完成。下面我們檢查請求的狀態(tài)（響應是正常頁面還是錯誤頁面）。為了保證響應正常，要檢查狀態(tài)的值是否為 200。如果 status 的值是 200，就會處理響應。
var messageObj = req.responseXML.getElementsByTagName("message")[0];
var message = messageObj.childNodes[0].nodeValue;
if (message == "true") {
msg.innerHTML = "Subscription is valid";
document.forms[0].order.disabled = false;
} else {
msg.innerHTML = "Subscription not valid";
document.forms[0].order.disabled = true;
} }
|
接下來，請求對象通過調用 responseXML 屬性讀取響應。請注意 servlet 用 XML 格式發(fā)送回響應，所以我們使用 responseXML。如果響應是以文本格式發(fā)送的，那么可以使用 responseText 屬性。
在這個示例中，我們處理 XML。servlet 把響應構建在一個 <message> 標記中。要解析這個 XML 標記，請在 XMLHttpRequest 對象的 responseXML 屬性上調用 getElementsByTagName() 方法。它得到標記的名稱以及標記的子值。根據(jù)解析到的值，格式化響應并用 HTML 改寫。
現(xiàn)在就完成了對訂購 ID 的驗證，沒有頁面刷新。
查看代碼：查看作者、出版者和書名
其他的功能 —— 查看作者、查看出版者 和查看書名 —— 工作的方式類似。只是需要為每個功能定義獨立的句柄：
function displayList(field) {
init();
titles.innerHTML = " ";
req.onreadystatechange = listHandler;
req.send("select=" + escape(field));
}
function displayTitles(formObj) {
init();
var index = formObj.list.selectedIndex;
var val = formObj.list.options[index].value;
req.onreadystatechange = titlesHandler;
req.send("list=" + val);
}
|
請記住，示例應用程序允許用戶根據(jù)作者和出版者查看書名。所以顯示的或者是作者列表 或者是出版者列表。在這類場景中，應用程序只能根據(jù)用戶的選擇調用一個回調句柄 —— 換句話說，對于作者和出版者列表，只有一個 listHandler 回調句柄。
顯示書名列表需要使用 titlesHandler。其余的功能仍然一樣：servlet 處理請求，用 XML 格式寫回響應。然后讀取、解析、格式化響應，用 HTML 改寫?？梢杂?HTML 把列表呈現(xiàn)為 select......options 標記。這個示例代碼段顯示了 titlesHandler 方法。
var temp = "<select name=\"titles\" multiple\>";
for (var i=0; i<index; i++) {
var listObj = req.responseXML.getElementsByTagName("list")[i];
temp = temp + "<option value=" + i +">" + listObj.childNodes[0].nodeValue
+ "</option>";
}
temp = temp + "</select>";
titles.innerHTML = temp;
|
迄今為止，我們演示了如何實現(xiàn)實時驗證和刷新。使用 AJAX，可以選擇多種方式給 Web 站點的用戶交互添加特色。下面運行應用程序。
運行和測試應用程序
運行應用程序
請下載示例代碼 wa-ajax-Library.war 并把它拷貝到 Tomcat 的 Webapp 目錄（例如，c:\Tomcat 5.0\Webapps）。要啟動 Tomcat 服務器，請輸入以下命令：
cd bin
C:\Tomcat 5.0\bin> catalina.bat start
|
Tomcat 現(xiàn)在啟動了，AJAX Web 應用程序也部署在其中。
測試應用程序
要測試應用程序：
- 請打開 Web 瀏覽器，指向
http://localhost:tomcatport/Library/order.jsp，其中變量 tompcatport 是 Tomcat 服務器運行所在的端口。
將看到訂購屏幕。
- 在 Enter Subscription ID 字段中，輸入用戶 ID（“John” 除外）并離開字段。
向服務器異步發(fā)出的訂購 ID 請求會被驗證?？梢钥吹?“Subscription not valid” 消息，如 圖 2 所示：
圖 2. “Subcription not valid” 屏幕
應用程序在不刷新瀏覽器的情況下，異步地驗證用戶并提供運行時驗證。
- 輸入用戶 ID 值 John。
將看到消息 “Subscription is valid”。訂購有效之后，應用程序就激活 Order 按鈕。
- 請選擇 By Author 或 By Publisher 按鈕分別填充作者或出版者下拉列表。
- 從下拉列表選擇一個作者或出版者。
書名區(qū)域被動態(tài)填充（如 圖 3 所示）。
圖 3. “Subcription is valid”屏幕
在選擇作者或出版者時，應用程序請求服務器在運行時提供來自服務器的與選中作者或出版者對應的書名信息。在不刷新瀏覽器的情況下顯示書名信息。
現(xiàn)在成功安裝和測試了示例 AJAX 應用程序。
結束語
結束語
AJAX 從開始至今已經走了很長的路。我們相信 AJAX 不僅僅可以用作設計模式，不過 AJAX 仍然有一些問題：
- 瀏覽器對
XMLHttpRequest 對象的支持可能是個限制。大多數(shù)瀏覽器都支持 XMLHttpRequest 對象，但是有少數(shù)不支持（通常是較老版本的瀏覽器）。
- AJAX 最適合顯示少量數(shù)據(jù)。如果要處理大量數(shù)據(jù)并在列表中實時顯示，那么 AJAX 可能不是合適的解決方案。
- AJAX 非常依賴于 javascript。如果瀏覽器不支持 javascript 或者用戶禁止了腳本選項，那么根本就不能利用 AJAX。
- AJAX 異步的性質不會保證多個請求的同步請求處理。如果需要對驗證或刷新進行優(yōu)先處理，那么要相應地設計應用程序。
即使有這些可能的問題，AJAX 仍然是提高 Web 頁面和解決頁面重載問題的最佳解決方案。
下載
| 描述 |
名字 |
大小 |
下載方法 |
| Web application Web archives |
wa-ajax-Library.war |
8KB |
FTP |
參考資料
學習
討論
作者簡介
|
|
|
|
Naveen Balani 把他的大多數(shù)時間花在設計和開發(fā)基于 J2EE/SOA 的框架和產品上。他為 IBM developerWorks 編寫了各種不同的文章，涉及的主題包括：ESB、SOA、JMS、WebServices Architectures、CICS、AXIS、DB2 XML Extender、WebSphere Studio、MQSeries、Java Wireless Devices 和 DB2 Everyplace for Palm、J2ME、MIDP、Java-Nokia、Visual Studio .Net 以及無線數(shù)據(jù)同步。可以通過他的電子郵件 naveenbalani@rediffmail.com 與他聯(lián)系。
|
|
|
|
|
Rajeev Hathi 目前在 Satyam 計算機有限公司擔任高級系統(tǒng)分析員。他把時間花在設計和開發(fā)基于 J2EE 的框架上。他喜歡研究新技術和新領域。他的業(yè)余愛好是運動和音樂。可以通過他的電子郵件 rajeev_hathi@hotmail.com 與他聯(lián)系。
|
