blogjava's web log

?

前提條件

我們將使用 Tomcat 來(lái)運(yùn)行 AJAX 應(yīng)用程序。Tomcat 是 Java Servlet 和 Java 服務(wù)器頁(yè)面技術(shù)的參考實(shí)現(xiàn)使用的 servlet 容器。請(qǐng)從 Jakarta Site 下載 Download jakarta-tomcat-5.0.28.exe 并運(yùn)行它把 Tomcat 安裝到喜歡的位置 —— 例如 c:\tomcat5.0。

請(qǐng)下載本教程的源代碼和 Web 應(yīng)用程序（在 wa-ajax-Library.war 中）。

AJAX 介紹

AJAX 基礎(chǔ)

AJAX 支持動(dòng)態(tài)、異步的 Web 體驗(yàn)，不需要頁(yè)面刷新。它集成了以下技術(shù)：

• XHTML 和 CSS 提供了基于標(biāo)準(zhǔn)的表示。
• 文檔對(duì)象模型（DOM）提供了動(dòng)態(tài)顯示和交互。
• XML 和 XSLT 提供了數(shù)據(jù)交換和操縱。
• XMLHttpRequest 提供了異步數(shù)據(jù)檢索。
• JavaScript 把每一樣?xùn)|西綁定在一起。

AJAX 技術(shù)的核心是 JavaScript 對(duì)象：XMLHttpRequest。這個(gè)對(duì)象是通過(guò)瀏覽器實(shí)現(xiàn)提供的 —— 先是通過(guò) Internet Explorer 5.0 然后通過(guò) Mozilla 兼容的瀏覽器。請(qǐng)進(jìn)一步觀察這個(gè)對(duì)象。

XMLHttpRequest

使用 XMLHttpRequest，可以用 JavaScript 發(fā)出到服務(wù)器的請(qǐng)求，并在不阻塞用戶(hù)的情況下處理響應(yīng)。在創(chuàng)建 Web 站點(diǎn)并用 XMLHttpRequest 在客戶(hù)機(jī)瀏覽器上無(wú)刷新地執(zhí)行屏幕更新的同時(shí)，它還提供了更多靈活性和豐富的用戶(hù)體驗(yàn)。

XMLHttpRequest 應(yīng)用程序的示例包括 Google 的 Gmail 服務(wù)、Google 的 Suggest 動(dòng)態(tài)查詢(xún)界面以及 MapQuest 的動(dòng)態(tài)地圖界面。在下一節(jié)，在演示圖書(shū)訂購(gòu)應(yīng)用程序的設(shè)計(jì)和實(shí)現(xiàn)時(shí)，詳細(xì)介紹了如何使用 XMLHttpRequest 對(duì)象。

應(yīng)用程序設(shè)計(jì)

應(yīng)用程序的元素

基于 Web 的示例圖書(shū)訂購(gòu)應(yīng)用程序包含以下用 AJAX 實(shí)現(xiàn)的客戶(hù)端函數(shù)：

• 訂購(gòu) ID 驗(yàn)證
• 一個(gè) View Authors 列表
• 一個(gè) View Publishers 列表

這里的目的是介紹 Web 頁(yè)面中的實(shí)時(shí)驗(yàn)證 和頁(yè)面刷新 如何讓客戶(hù)交互更平滑、更有效。

應(yīng)用程序的結(jié)構(gòu)

圖 1 的圖表說(shuō)明了示例圖書(shū)訂購(gòu)應(yīng)用程序的設(shè)計(jì)架構(gòu)：

應(yīng)用程序是一個(gè)使用 Java 服務(wù)器頁(yè)面（JSP）技術(shù)開(kāi)發(fā)的單一 Web 頁(yè)面。用戶(hù)可以用 Web 瀏覽器（例如 Microsoft? Internet Explorer）調(diào)用 Web 頁(yè)面并輸入應(yīng)用程序要實(shí)時(shí)驗(yàn)證的訂購(gòu) ID。在 ID 異步驗(yàn)證的時(shí)候，用戶(hù)可以輸入更多信息。用戶(hù)可以根據(jù)作者 或出版者 查看圖書(shū)的書(shū)名。屏幕會(huì)根據(jù)用戶(hù)的選擇填充作者列表 或出版者列表。根據(jù)選擇，書(shū)名列表 會(huì)被填充。所有這些列表都是實(shí)時(shí)填充的 —— 換句話(huà)說(shuō)，頁(yè)面沒(méi)有刷新，但是數(shù)據(jù)仍然來(lái)自后臺(tái)層。我們把這種現(xiàn)象叫做實(shí)時(shí)刷新。

從 圖 1 可以看出，XMLHttpRequest JavaScript 對(duì)象幫助進(jìn)行實(shí)時(shí)異步處理。該對(duì)象采用 XML 格式通過(guò) HTTP 對(duì)位于 Web 容器內(nèi)的 LibraryServlet 發(fā)出請(qǐng)求。然后 servlet 查詢(xún)數(shù)據(jù)庫(kù)、提取數(shù)據(jù)并發(fā)送回客戶(hù)機(jī)，還是采用 XML 格式通過(guò) HTTP 進(jìn)行傳送。請(qǐng)求和響應(yīng)都是在沒(méi)有刷新頁(yè)面的情況下實(shí)時(shí)發(fā)生的。

就是這一點(diǎn)使得 AJAX 如此強(qiáng)大。用戶(hù)不需要等候頁(yè)面重新載入才能完成，因?yàn)檫@里沒(méi)有頁(yè)面重載。

在 下一節(jié) 中，我將演示如何根據(jù)這個(gè)設(shè)計(jì)來(lái)實(shí)現(xiàn)圖書(shū)訂購(gòu)應(yīng)用程序。我要介紹代碼并做一些分析。（要得到本教程的示例代碼，請(qǐng) 下載文件 x-ajax-library.war。）

實(shí)現(xiàn)應(yīng)用程序

用 AJAX 實(shí)現(xiàn)應(yīng)用程序

在這一節(jié)，我們研究示例圖書(shū)訂購(gòu)應(yīng)用程序的代碼，并進(jìn)一步查看每個(gè)基于 AJAX 的 Javascript 組件：

• 驗(yàn)證訂購(gòu) ID
• 查看作者
• 查看出版者
• 查看書(shū)名

查看代碼：驗(yàn)證訂購(gòu) ID

先從驗(yàn)證訂購(gòu) ID 的函數(shù) <input type="text" name="subscriptionID" onblur="validate(this.form)"/> 開(kāi)始。這個(gè)代碼生成文本字段，用戶(hù)可以在里面輸入訂購(gòu) ID。用戶(hù)輸入 ID 并移到表單的下一個(gè)字段時(shí)，觸發(fā) onBlur 事件。這個(gè)事件調(diào)用 JavaScript 函數(shù) validate()：

																				
var req;
function validate(formObj) {
    init();
    req.onreadystatechange = subscriptionValidator;
    req.send("subscriptionID=" + formObj.subscriptionID.value);
}

																		

validate() 函數(shù)接受 formObj 作為參數(shù)。它首先調(diào)用 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 對(duì)象。這個(gè)請(qǐng)求對(duì)象是 AJAX 的核心。它以 XML 格式發(fā)送和接收請(qǐng)求。這段代碼檢查瀏覽器對(duì) XMLHttpRequest 對(duì)象的支持（多數(shù)瀏覽器都支持它）。如果使用 Microsoft Internet Explorer 5.0 以上版本，那么就執(zhí)行第二個(gè)條件。

																				
req.open("POST", url, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

																		

代碼創(chuàng)建了 XMLHttpRequest 對(duì)象之后，需要設(shè)置某些請(qǐng)求屬性。在前面的代碼中，第一行設(shè)置請(qǐng)求方法、請(qǐng)求 URL 和請(qǐng)求的類(lèi)型（是否異步）。它通過(guò)調(diào)用 XMLHttpRequest 對(duì)象上的 open() 方法做這件事。

這里我們要使用 POST 方法。理想情況下，當(dāng)需要在服務(wù)器上修改狀態(tài)時(shí)，請(qǐng)使用 POST。我們的應(yīng)用程序并不修改狀態(tài)，但我們?nèi)匀粌A向于使用 POST。url 是要執(zhí)行的 servlet 的 URL。true 表明我們要異步地執(zhí)行請(qǐng)求。

對(duì)于 POST 方法，我們需要設(shè)置 Content-Type 這個(gè)請(qǐng)求頭。對(duì)于 GET 方法來(lái)說(shuō)不需要這個(gè)設(shè)置。

																				
function validate(formObj) {
    init();
    req.onreadystatechange = subscriptionValidator;
    req.send("subscriptionID=" + formObj.subscriptionID.value);
}

																		

查看代碼：回調(diào)句柄 1

繼續(xù)查看驗(yàn)證方法，下面把 subscriptionValidator 回調(diào)句柄分配給 onreadystatechange，請(qǐng)求狀態(tài)的每個(gè)變化都會(huì)觸發(fā)它。

這個(gè)回調(diào)句柄 都負(fù)責(zé)什么呢？因?yàn)檎诋惒降靥幚碚?qǐng)求，所以需要一個(gè)回調(diào)句倆，從服務(wù)器返回完整響應(yīng)的時(shí)候調(diào)用它 —— 回調(diào)句柄是對(duì)訂購(gòu) ID 進(jìn)行驗(yàn)證的地方（也就是編寫(xiě)實(shí)際的驗(yàn)證代碼的地方）。

句柄充當(dāng)偵聽(tīng)器。它一直等待響應(yīng)完成。（稍后 將詳細(xì)介紹句柄代碼 。）為了發(fā)送請(qǐng)求，最后一行調(diào)用了 send() 方法。請(qǐng)求以名稱(chēng)=值 對(duì)的形式發(fā)送。對(duì)于 GET 方法，請(qǐng)求作為 URL 的一部分發(fā)送，所以 send() 方法被傳遞了一個(gè)空參數(shù)。

請(qǐng)求被發(fā)送到 servlet。servlet 處理請(qǐng)求并實(shí)時(shí)地發(fā)回響應(yīng)。這就是 servlet 處理請(qǐng)求的方式。下一個(gè)代碼段表示了 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);
    }
}

																		

查看代碼：回調(diào)句柄 2

doPost() 方法從請(qǐng)求參數(shù)得到 subscriptionID。為了驗(yàn)證 ID，它調(diào)用 validID() 方法。這個(gè)方法驗(yàn)證 ID，如果 ID 正確，則返回 true，否則返回 false。它用 XML 格式構(gòu)造返回狀態(tài)，并調(diào)用 writeResponse() 方法來(lái)寫(xiě)響應(yīng)。現(xiàn)在來(lái)看 writeResponse() 方法。

																				
public void writeResponse(HttpServletResponse resp, String output) throws IOException {
    resp.setContentType("text/xml");
    resp.setHeader("Cache-Control", "no-cache");
    resp.getWriter().write(output);
}

																		

響應(yīng)用 XML 格式發(fā)送。第一行設(shè)置響應(yīng)的內(nèi)容類(lèi)型為 text/xml。第二行把頭 Cache-Control 的值設(shè)為 no-cache。這個(gè)值是必需的。AJAX 要求響應(yīng)的輸出不能被瀏覽器緩存。最后一行調(diào)用 getWriter().write() 方法來(lái)寫(xiě)響應(yīng)。

查看代碼：回調(diào)句柄 3

請(qǐng)求由 servlet 處理，響應(yīng)被發(fā)送回客戶(hù)機(jī)。請(qǐng)記住，所有這些都在后臺(tái)發(fā)生，沒(méi)有頁(yè)面刷新。現(xiàn)在 前面 討論過(guò)的回調(diào)句柄方法會(huì)處理并解析響應(yīng)：

																				
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;
	    }
	}
    }
}

																		

回頁(yè)首

查看代碼：回到 XMLHttpRequest

如前所述，XMLHttpRequest 對(duì)象是構(gòu)造和發(fā)送請(qǐng)求的核心對(duì)象。它也負(fù)責(zé)讀取和解析從服務(wù)器返回的響應(yīng)。請(qǐng)看下面幾部分代碼。

																				
if (req.readystate == 4) {
    if (req.status == 200) {

																		

前面的代碼檢查請(qǐng)求的狀態(tài)。如果請(qǐng)求處在就緒狀態(tài)，就讀取和解析響應(yīng)。

就緒狀態(tài)是什么意思呢？當(dāng)請(qǐng)求對(duì)象的屬性 readystate 的值是 4 時(shí)，就意味著客戶(hù)機(jī)接收到了響應(yīng)而且接收完成。下面我們檢查請(qǐng)求的狀態(tài)（響應(yīng)是正常頁(yè)面還是錯(cuò)誤頁(yè)面）。為了保證響應(yīng)正常，要檢查狀態(tài)的值是否為 200。如果 status 的值是 200，就會(huì)處理響應(yīng)。

																				
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;
}	}

																		

接下來(lái)，請(qǐng)求對(duì)象通過(guò)調(diào)用 responseXML 屬性讀取響應(yīng)。請(qǐng)注意 servlet 用 XML 格式發(fā)送回響應(yīng)，所以我們使用 responseXML。如果響應(yīng)是以文本格式發(fā)送的，那么可以使用 responseText 屬性。

在這個(gè)示例中，我們處理 XML。servlet 把響應(yīng)構(gòu)建在一個(gè) <message> 標(biāo)記中。要解析這個(gè) XML 標(biāo)記，請(qǐng)?jiān)?XMLHttpRequest 對(duì)象的 responseXML 屬性上調(diào)用 getElementsByTagName() 方法。它得到標(biāo)記的名稱(chēng)以及標(biāo)記的子值。根據(jù)解析到的值，格式化響應(yīng)并用 HTML 改寫(xiě)。

現(xiàn)在就完成了對(duì)訂購(gòu) ID 的驗(yàn)證，沒(méi)有頁(yè)面刷新。

查看代碼：查看作者、出版者和書(shū)名

其他的功能 —— 查看作者、查看出版者 和查看書(shū)名 —— 工作的方式類(lèi)似。只是需要為每個(gè)功能定義獨(dú)立的句柄：

																				
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);
}

																		

請(qǐng)記住，示例應(yīng)用程序允許用戶(hù)根據(jù)作者和出版者查看書(shū)名。所以顯示的或者是作者列表 或者是出版者列表。在這類(lèi)場(chǎng)景中，應(yīng)用程序只能根據(jù)用戶(hù)的選擇調(diào)用一個(gè)回調(diào)句柄 —— 換句話(huà)說(shuō)，對(duì)于作者和出版者列表，只有一個(gè) listHandler 回調(diào)句柄。

顯示書(shū)名列表需要使用 titlesHandler。其余的功能仍然一樣：servlet 處理請(qǐng)求，用 XML 格式寫(xiě)回響應(yīng)。然后讀取、解析、格式化響應(yīng)，用 HTML 改寫(xiě)。可以用 HTML 把列表呈現(xiàn)為 select......options 標(biāo)記。這個(gè)示例代碼段顯示了 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;

																		

迄今為止，我們演示了如何實(shí)現(xiàn)實(shí)時(shí)驗(yàn)證和刷新。使用 AJAX，可以選擇多種方式給 Web 站點(diǎn)的用戶(hù)交互添加特色。下面運(yùn)行應(yīng)用程序。

運(yùn)行和測(cè)試應(yīng)用程序

運(yùn)行應(yīng)用程序

請(qǐng)下載示例代碼 wa-ajax-Library.war 并把它拷貝到 Tomcat 的 Webapp 目錄（例如，c:\Tomcat 5.0\Webapps）。要啟動(dòng) Tomcat 服務(wù)器，請(qǐng)輸入以下命令：

																				
cd bin
C:\Tomcat 5.0\bin> catalina.bat start

																		

Tomcat 現(xiàn)在啟動(dòng)了，AJAX Web 應(yīng)用程序也部署在其中。

測(cè)試應(yīng)用程序

要測(cè)試應(yīng)用程序：

1. 請(qǐng)打開(kāi) Web 瀏覽器，指向 http://localhost:tomcatport/Library/order.jsp，其中變量 tompcatport 是 Tomcat 服務(wù)器運(yùn)行所在的端口。

   將看到訂購(gòu)屏幕。

2. 在 Enter Subscription ID 字段中，輸入用戶(hù) ID（“John” 除外）并離開(kāi)字段。

   向服務(wù)器異步發(fā)出的訂購(gòu) ID 請(qǐng)求會(huì)被驗(yàn)證。可以看到 “Subscription not valid” 消息，如 圖 2 所示：

   
   圖 2. “Subcription not valid” 屏幕
   
   

   應(yīng)用程序在不刷新瀏覽器的情況下，異步地驗(yàn)證用戶(hù)并提供運(yùn)行時(shí)驗(yàn)證。

3. 輸入用戶(hù) ID 值 John。

   將看到消息 “Subscription is valid”。訂購(gòu)有效之后，應(yīng)用程序就激活 Order 按鈕。

4. 請(qǐng)選擇 By Author 或 By Publisher 按鈕分別填充作者或出版者下拉列表。
5. 從下拉列表選擇一個(gè)作者或出版者。

   書(shū)名區(qū)域被動(dòng)態(tài)填充（如 圖 3 所示）。

   
   圖 3. “Subcription is valid”屏幕
   
   

   在選擇作者或出版者時(shí)，應(yīng)用程序請(qǐng)求服務(wù)器在運(yùn)行時(shí)提供來(lái)自服務(wù)器的與選中作者或出版者對(duì)應(yīng)的書(shū)名信息。在不刷新瀏覽器的情況下顯示書(shū)名信息。

現(xiàn)在成功安裝和測(cè)試了示例 AJAX 應(yīng)用程序。

結(jié)束語(yǔ)

結(jié)束語(yǔ)

AJAX 從開(kāi)始至今已經(jīng)走了很長(zhǎng)的路。我們相信 AJAX 不僅僅可以用作設(shè)計(jì)模式，不過(guò) AJAX 仍然有一些問(wèn)題：

• 瀏覽器對(duì) XMLHttpRequest 對(duì)象的支持可能是個(gè)限制。大多數(shù)瀏覽器都支持 XMLHttpRequest 對(duì)象，但是有少數(shù)不支持（通常是較老版本的瀏覽器）。
• AJAX 最適合顯示少量數(shù)據(jù)。如果要處理大量數(shù)據(jù)并在列表中實(shí)時(shí)顯示，那么 AJAX 可能不是合適的解決方案。
• AJAX 非常依賴(lài)于 JavaScript。如果瀏覽器不支持 JavaScript 或者用戶(hù)禁止了腳本選項(xiàng)，那么根本就不能利用 AJAX。
• AJAX 異步的性質(zhì)不會(huì)保證多個(gè)請(qǐng)求的同步請(qǐng)求處理。如果需要對(duì)驗(yàn)證或刷新進(jìn)行優(yōu)先處理，那么要相應(yīng)地設(shè)計(jì)應(yīng)用程序。

即使有這些可能的問(wèn)題，AJAX 仍然是提高 Web 頁(yè)面和解決頁(yè)面重載問(wèn)題的最佳解決方案。

Naveen Balani, 技術(shù)架構(gòu)師, Webify Solutions
Rajeev Hathi, 高級(jí)系統(tǒng)分析員, Satyam 計(jì)算機(jī)有限公司

來(lái)源 ： http://www-128.ibm.com/developerworks/cn/java/