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ì)象是通過瀏覽器實(shí)現(xiàn)提供的 —— 先是通過 Internet Explorer 5.0 然后通過 Mozilla 兼容的瀏覽器。請(qǐng)進(jìn)一步觀察這個(gè)對(duì)象。
XMLHttpRequest
使用 XMLHttpRequest，可以用 javascript 發(fā)出到服務(wù)器的請(qǐng)求，并在不阻塞用戶的情況下處理響應(yīng)。在創(chuàng)建 Web 站點(diǎn)并用 XMLHttpRequest 在客戶機(jī)瀏覽器上無(wú)刷新地執(zhí)行屏幕更新的同時(shí)，它還提供了更多靈活性和豐富的用戶體驗(yàn)。
XMLHttpRequest 應(yīng)用程序的示例包括 Google 的 Gmail 服務(wù)、Google 的 Suggest 動(dòng)態(tài)查詢界面以及 MapQuest 的動(dòng)態(tài)地圖界面。在下一節(jié)，在演示圖書訂購(gòu)應(yīng)用程序的設(shè)計(jì)和實(shí)現(xiàn)時(shí)，詳細(xì)介紹了如何使用 XMLHttpRequest 對(duì)象。
應(yīng)用程序設(shè)計(jì)
應(yīng)用程序的元素
基于 Web 的示例圖書訂購(gòu)應(yīng)用程序包含以下用 AJAX 實(shí)現(xiàn)的客戶端函數(shù)：
- 訂購(gòu) ID 驗(yàn)證
- 一個(gè) View Authors 列表
- 一個(gè) View Publishers 列表
這里的目的是介紹 Web 頁(yè)面中的實(shí)時(shí)驗(yàn)證 和頁(yè)面刷新 如何讓客戶交互更平滑、更有效。
應(yīng)用程序的結(jié)構(gòu)
圖 1 的圖表說明了示例圖書訂購(gòu)應(yīng)用程序的設(shè)計(jì)架構(gòu)：
圖 1. AJAX 架構(gòu)
應(yīng)用程序是一個(gè)使用 Java 服務(wù)器頁(yè)面（JSP）技術(shù)開發(fā)的單一 Web 頁(yè)面。用戶可以用 Web 瀏覽器（例如 Microsoft® Internet Explorer）調(diào)用 Web 頁(yè)面并輸入應(yīng)用程序要實(shí)時(shí)驗(yàn)證的訂購(gòu) ID。在 ID 異步驗(yàn)證的時(shí)候，用戶可以輸入更多信息。用戶可以根據(jù)作者 或出版者 查看圖書的書名。屏幕會(huì)根據(jù)用戶的選擇填充作者列表 或出版者列表。根據(jù)選擇，書名列表 會(huì)被填充。所有這些列表都是實(shí)時(shí)填充的 —— 換句話說，頁(yè)面沒有刷新，但是數(shù)據(jù)仍然來(lái)自后臺(tái)層。我們把這種現(xiàn)象叫做實(shí)時(shí)刷新。
從 圖 1 可以看出，XMLHttpRequest javascript 對(duì)象幫助進(jìn)行實(shí)時(shí)異步處理。該對(duì)象采用 XML 格式通過 HTTP 對(duì)位于 Web 容器內(nèi)的 LibraryServlet 發(fā)出請(qǐng)求。然后 servlet 查詢數(shù)據(jù)庫(kù)、提取數(shù)據(jù)并發(fā)送回客戶機(jī)，還是采用 XML 格式通過 HTTP 進(jìn)行傳送。請(qǐng)求和響應(yīng)都是在沒有刷新頁(yè)面的情況下實(shí)時(shí)發(fā)生的。
就是這一點(diǎn)使得 AJAX 如此強(qiáng)大。用戶不需要等候頁(yè)面重新載入才能完成，因?yàn)檫@里沒有頁(yè)面重載。
在 下一節(jié) 中，我將演示如何根據(jù)這個(gè)設(shè)計(jì)來(lái)實(shí)現(xiàn)圖書訂購(gòu)應(yīng)用程序。我要介紹代碼并做一些分析。（要得到本教程的示例代碼，請(qǐng) 下載文件 x-ajax-library.war。）
實(shí)現(xiàn)應(yīng)用程序
用 AJAX 實(shí)現(xiàn)應(yīng)用程序
在這一節(jié)，我們研究示例圖書訂購(gòu)應(yīng)用程序的代碼，并進(jìn)一步查看每個(gè)基于 AJAX 的 javascript 組件：
- 驗(yàn)證訂購(gòu) ID
- 查看作者
- 查看出版者
- 查看書名
查看代碼：驗(yàn)證訂購(gòu) ID
先從驗(yàn)證訂購(gòu) ID 的函數(shù) <input type="text" name="subscriptionID" onblur="validate(this.form)"/> 開始。這個(gè)代碼生成文本字段，用戶可以在里面輸入訂購(gòu) ID。用戶輸入 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)求的類型（是否異步）。它通過調(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)說不需要這個(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)證的地方（也就是編寫實(shí)際的驗(yàn)證代碼的地方）。
句柄充當(dāng)偵聽器。它一直等待響應(yīng)完成。（稍后 將詳細(xì)介紹句柄代碼 。）為了發(fā)送請(qǐng)求，最后一行調(diào)用了 send() 方法。請(qǐ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)寫響應(yīng)?，F(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)容類型為 text/xml。第二行把頭 Cache-Control 的值設(shè)為 no-cache。這個(gè)值是必需的。AJAX 要求響應(yīng)的輸出不能被瀏覽器緩存。最后一行調(diào)用 getWriter().write() 方法來(lái)寫響應(yīng)。
查看代碼：回調(diào)句柄 3
請(qǐng)求由 servlet 處理，響應(yīng)被發(fā)送回客戶機(jī)。請(qǐng)記住，所有這些都在后臺(tái)發(fā)生，沒有頁(yè)面刷新。現(xiàn)在 前面 討論過的回調(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;
}
}
}
}
|
查看代碼：回到 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í)，就意味著客戶機(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ì)象通過調(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)記的名稱以及標(biāo)記的子值。根據(jù)解析到的值，格式化響應(yīng)并用 HTML 改寫。
現(xiàn)在就完成了對(duì)訂購(gòu) ID 的驗(yàn)證，沒有頁(yè)面刷新。
查看代碼：查看作者、出版者和書名
其他的功能 —— 查看作者、查看出版者 和查看書名 —— 工作的方式類似。只是需要為每個(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)用程序允許用戶根據(jù)作者和出版者查看書名。所以顯示的或者是作者列表 或者是出版者列表。在這類場(chǎng)景中，應(yīng)用程序只能根據(jù)用戶的選擇調(diào)用一個(gè)回調(diào)句柄 —— 換句話說，對(duì)于作者和出版者列表，只有一個(gè) listHandler 回調(diào)句柄。
顯示書名列表需要使用 titlesHandler。其余的功能仍然一樣：servlet 處理請(qǐng)求，用 XML 格式寫回響應(yīng)。然后讀取、解析、格式化響應(yīng)，用 HTML 改寫?？梢杂?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)的用戶交互添加特色。下面運(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)用程序：
- 請(qǐng)打開 Web 瀏覽器，指向
http://localhost:tomcatport/Library/order.jsp，其中變量 tompcatport 是 Tomcat 服務(wù)器運(yùn)行所在的端口。
將看到訂購(gòu)屏幕。
- 在 Enter Subscription ID 字段中，輸入用戶 ID（“John” 除外）并離開字段。
向服務(wù)器異步發(fā)出的訂購(gòu) ID 請(qǐng)求會(huì)被驗(yàn)證?？梢钥吹?“Subscription not valid” 消息，如 圖 2 所示：
圖 2. “Subcription not valid” 屏幕
應(yīng)用程序在不刷新瀏覽器的情況下，異步地驗(yàn)證用戶并提供運(yùn)行時(shí)驗(yàn)證。
- 輸入用戶 ID 值 John。
將看到消息 “Subscription is valid”。訂購(gòu)有效之后，應(yīng)用程序就激活 Order 按鈕。
- 請(qǐng)選擇 By Author 或 By Publisher 按鈕分別填充作者或出版者下拉列表。
- 從下拉列表選擇一個(gè)作者或出版者。
書名區(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)的書名信息。在不刷新瀏覽器的情況下顯示書名信息。
現(xiàn)在成功安裝和測(cè)試了示例 AJAX 應(yīng)用程序。
結(jié)束語(yǔ)
結(jié)束語(yǔ)
AJAX 從開始至今已經(jīng)走了很長(zhǎng)的路。我們相信 AJAX 不僅僅可以用作設(shè)計(jì)模式，不過 AJAX 仍然有一些問題：
- 瀏覽器對(duì)
XMLHttpRequest 對(duì)象的支持可能是個(gè)限制。大多數(shù)瀏覽器都支持 XMLHttpRequest 對(duì)象，但是有少數(shù)不支持（通常是較老版本的瀏覽器）。
- AJAX 最適合顯示少量數(shù)據(jù)。如果要處理大量數(shù)據(jù)并在列表中實(shí)時(shí)顯示，那么 AJAX 可能不是合適的解決方案。
- AJAX 非常依賴于 javascript。如果瀏覽器不支持 javascript 或者用戶禁止了腳本選項(xiàng)，那么根本就不能利用 AJAX。
- AJAX 異步的性質(zhì)不會(huì)保證多個(gè)請(qǐng)求的同步請(qǐng)求處理。如果需要對(duì)驗(yàn)證或刷新進(jìn)行優(yōu)先處理，那么要相應(yīng)地設(shè)計(jì)應(yīng)用程序。
即使有這些可能的問題，AJAX 仍然是提高 Web 頁(yè)面和解決頁(yè)面重載問題的最佳解決方案。
下載
| 描述 |
名字 |
大小 |
下載方法 |
| Web application Web archives |
wa-ajax-Library.war |
8KB |
FTP |
參考資料
學(xué)習(xí)
討論
作者簡(jiǎn)介
|
|
|
|
Naveen Balani 把他的大多數(shù)時(shí)間花在設(shè)計(jì)和開發(fā)基于 J2EE/SOA 的框架和產(chǎn)品上。他為 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 以及無(wú)線數(shù)據(jù)同步。可以通過他的電子郵件 naveenbalani@rediffmail.com 與他聯(lián)系。
|
|
|
|
|
Rajeev Hathi 目前在 Satyam 計(jì)算機(jī)有限公司擔(dān)任高級(jí)系統(tǒng)分析員。他把時(shí)間花在設(shè)計(jì)和開發(fā)基于 J2EE 的框架上。他喜歡研究新技術(shù)和新領(lǐng)域。他的業(yè)余愛好是運(yùn)動(dòng)和音樂。可以通過他的電子郵件 rajeev_hathi@hotmail.com 與他聯(lián)系。
|
