一個經(jīng)典Ajax例子的解析

范 曦，張海越

（無錫科技職業(yè)學(xué)院，江蘇 無錫 214028）

引言

Ajax作為一種基于JavaScript和XML的異步傳輸技術(shù)，在各類J2EE項(xiàng)目的開發(fā)過程中得到了廣泛的應(yīng)用[1]。Ajax的使用可以讓開發(fā)者不需要重新加載整個頁面，而只需要通過與后臺數(shù)據(jù)庫的少量交互選擇更新部分頁面內(nèi)容，從而節(jié)省時間和提高效率。由于它是一種異步傳輸?shù)姆绞?，?dāng)頁面請求發(fā)送給Web服務(wù)器后，客戶端無需再去等待返回結(jié)果，而可以繼續(xù)去觸發(fā)其它的請求。

1 Ajax實(shí)例的分步驟解析

在SQL Server數(shù)據(jù)庫中首先建立一張Student表，字段名分別為 id（學(xué)號）、name（姓名）和 age（年齡）。然后建立一個JSP頁面，該頁面有三個文本框分別用來顯示學(xué)號、姓名和年齡。最后要求一個文本框中輸入學(xué)生的學(xué)號，按回車鍵后，通過與后臺的交互在此頁面使用Ajax技術(shù)，可以在另外兩個文本框直接輸出根據(jù)學(xué)號查詢到相應(yīng)學(xué)生的姓名和年齡。

1.1 建立XML文檔

建立一個XML文檔用于網(wǎng)頁與數(shù)據(jù)庫交互后保存查詢結(jié)果并返回給客戶端，該XML定義如下所示：

該文檔的id號為"idStudent"。vio_id、vio_name、vio_age三個子節(jié)點(diǎn)用于保存數(shù)據(jù)結(jié)果。

1.2 通過JavaScript與數(shù)據(jù)庫進(jìn)行交互

設(shè)交互的操作過程為：輸入學(xué)生學(xué)號并按回車鍵后，觸發(fā)一個JavaScript事件，該事件將只具有學(xué)生學(xué)號的XML文檔發(fā)送給服務(wù)器端，服務(wù)器端通過名為"getstudent"的Servlet接受學(xué)生學(xué)號并在數(shù)據(jù)庫中查詢，最后將查詢到的完整信息（學(xué)號、姓名、年齡）以XML文檔形式返回給客戶端。觸發(fā)事件中機(jī)制的主要代碼如下所示：

在這個步驟中JavaScript先把請求以XML文檔形式發(fā)送給服務(wù)器，服務(wù)器通過Servlet將XML傳送過來的數(shù)據(jù)接收后進(jìn)行相應(yīng)的查詢交互并形成新的XML文檔予以返回。

1.3 服務(wù)器端XML和數(shù)據(jù)庫的交互過程

設(shè)交互的操作過程為：服務(wù)器端接收到客戶端傳來的XML文檔后進(jìn)行解析，得到了學(xué)生的學(xué)號；隨后，在Servlet中與數(shù)據(jù)庫中的學(xué)生表進(jìn)行交互，通過得到的學(xué)號查詢出該學(xué)號所對應(yīng)的姓名和年齡，并重新形成完整信息的XML文檔以便予以返回給客戶端。主要機(jī)制的代碼如下所示：

1.4 通過JavaScript在頁面更新內(nèi)容

服務(wù)器返回XML文檔后，客戶端通過JavaScript將XML文檔中子節(jié)點(diǎn)的具體內(nèi)容逐一解析出來，并顯示在相應(yīng)的文本框中即完成頁面內(nèi)容的更新。主要機(jī)制的代碼如下所示：

這是該Ajax實(shí)例應(yīng)用的最后一步，客戶端將從服務(wù)器端得到的返回內(nèi)容顯示在頁面中，由于返回的內(nèi)容存放在XML文檔中，所以必須使用腳本語言將內(nèi)容解析出來完成相應(yīng)更新。

2 結(jié)語

Ajax作為J2EE標(biāo)準(zhǔn)定義的一種異步傳輸?shù)募夹g(shù)，能夠使程序開發(fā)人員在不重新加載頁面的情況下完成部分或者全部頁面的內(nèi)容更新，大大提高了程序的響應(yīng)時間和效率，而且使客戶端頁面的瀏覽者也節(jié)約了等待的時間[2]。由于Ajax綜合了JavaScript和XML，并且在使用過程中還涉及到JSP、數(shù)據(jù)庫操作等多種技術(shù)，對其的使用應(yīng)該給予認(rèn)真的理解和思考。期望本文通過針對Ajax實(shí)例的四個步驟解析能夠給初學(xué)者和開發(fā)者帶來一定啟示與幫助。