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

范 曦，張海越

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

引言

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

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

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

1.1 建立XML文檔

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

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

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

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

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

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

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

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

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

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

2 結(jié)語(yǔ)

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