AJAX 開發簡略

文檔說明

參與人員：

作者	網名	聯絡
柯自聰	eamoi educhina	eamoi@163.com （技術） zcke0728@hotmail.com （版權）

發布記錄：

版本	日期	作者	說明
1.0	<chsdate w:st="on" isrocdate="False" islunardate="False" day="28" month="10" year="2005"><span lang="EN-US" style="FONT-FAMILY: 宋體">2005-10-28</span></chsdate>	柯自聰	創建，第一版

鏈接：

類別	網址
Blog	http://www.blogjava.net/eamoi/
MSN-Space	http://spaces.msn.com/members/eamoi/

OpenDoc 版權說明：

本文檔版權歸原作者所有。

在免費、且無任何附加條件的前提下，可在 網絡媒體中 自由傳播。

如需部分或者全文引用，請事先征求作者意見。

如果本文對您有些許幫助，表達謝意的最好方式，是將您發現的問題和文檔改進意見及時反饋給作者。當然，倘若有時間和能力，能為技術群體無償貢獻自己的所學為最好的回饋。

AJAX 開發簡略 ... 1

一、AJAX 定義 ... 3

二、現狀與需要解決的問題 ... 3

三、為什么使用AJAX . 4

四、誰在使用AJAX . 6

五、用AJAX 改進你的設計 ... 6

例子1 ：數據校驗 ... 7

例子2 ：按需取數據— 級聯菜單 ... 7

例子3 ：讀取外部數據 ... 7

六、AJAX 的缺陷 ... 7

七、AJAX 開發 ... 8

7.1 、AJAX 應用到的技術 ... 8

A 、XMLHttpRequest 對象 ... 8

B 、Javascript . 9

C 、DOM . 9

D 、XML . 9

7.2 、AJAX 開發框架 ... 9

A 、初始化對象并發出XMLHttpRequest 請求 ... 9

B 、指定響應處理函數 ... 10

C 、發出HTTP 請求 ... 10

D 、處理服務器返回的信息 ... 11

E 、一個初步的開發框架 ... 11

7.3 、簡單的示例 ... 13

A 、數據校驗 ... 13

B 、級聯菜單 ... 14

參考文章： ... 16

在使用瀏覽器瀏覽網頁的時候，當頁面刷新很慢的時候，你的瀏覽器在干什么？你的屏幕內容是什么？是的，你的瀏覽器在等待刷新，而你的屏幕內容是一片空白，而你在屏幕前苦苦的等待瀏覽器的響應。開發人員為了克服這種尷尬的局面，不得不在每一個可能需要長時間等待響應的頁面上增加一個 DIV ，告訴用戶“系統正在處理您的請求，請稍候 …… ”。

現在，有一種越來越流行越熱的“老”技術，可以徹底改變這種窘迫的局面。那就是 AJAX 。如今，隨著 Gmail 、 Google-maps 的應用和各種瀏覽器的支持， AJAX 正逐漸吸引全世界的眼球。

一、 AJAX 定義

AJAX （ Asynchronous JavaScript and XML ）其實是多種技術的綜合，包括 Javascript 、 XHTML 和 CSS 、 DOM 、 XML 和 XSTL 、 XMLHttpRequest 。其中：

使用 XHTML 和 CSS 標準化呈現，使用 DOM 實現動態顯示和交互，使用 XML 和 XSTL 進行數據交換與處理，使用 XMLHttpRequest 對象進行異步數據讀取，使用 Javascript 綁定和處理所有數據。

在 AJAX 提出之前，業界對于上述技術都只是單獨的使用，沒有綜合使用，也是由于之前的技術需求所決定的。隨著應用的廣泛， AJAX 也成為香餑餑了。

二、現狀與需要解決的問題

傳統的 Web 應用采用同步交互過程，這種情況下，用戶首先向 HTTP 服務器觸發一個行為或請求的呼求。反過來，服務器執行某些任務，再向發出請求的用戶返回一個 HTML 頁面。這是一種不連貫的用戶體驗，服務器在處理請求的時候，用戶多數時間處于等待的狀態，屏幕內容也是一片空白。如下圖：

自從采用超文本作為 Web 傳輸和呈現之后，我們都是采用這么一套傳輸方式。當負載比較小的時候，這并不會體現出有什么不妥?？墒钱斬撦d比較大，響應時間要很長， 1 分鐘、 2 分鐘 …… 數分鐘的時候，這種等待就不可忍受了。嚴重的，超過響應時間，服務器干脆告訴你頁面不可用。另外，某些時候，我只是想改變頁面一小部分的數據，那為什么我必須重新加載整個頁面呢？！當軟件設計越來越講究人性化的時候，這么糟糕的用戶體驗簡直與這種原則背道而馳。為什么老是要讓用戶等待服務器取數據呢？至少，我們應該減少用戶等待的時間?，F在，除了程序設計、編碼優化和服務器調優之外，還可以采用 AJAX 。

三、為什么使用 AJAX

與傳統的 Web 應用不同， AJAX 采用異步交互過程。 AJAX 在用戶與服務器之間引入一個中間媒介，從而消除了網絡交互過程中的處理—等待—處理—等待缺點。用戶的瀏覽器在執行任務時即裝載了 AJAX 引擎。 AJAX 引擎用 JavaScript 語言編寫，通常藏在一個隱藏的框架中。它負責編譯用戶界面及與服務器之間的交互。 AJAX 引擎允許用戶與應用軟件之間的交互過程異步進行，獨立于用戶與網絡服務器間的交流?，F在，可以用 Javascript 調用 AJAX 引擎來代替產生一個 HTTP 的用戶動作，內存中的數據編輯、頁面導航、數據校驗這些不需要重新載入整個頁面的需求可以交給 AJAX 來執行。

使用 AJAX ，可以為 ISP 、開發人員、終端用戶帶來可見的便捷：

l 減輕服務器的負擔。 AJAX 的原則是“按需取數據”，可以最大程度的減少冗余請求，和響應對服務器造成的負擔。

l 無刷新更新頁面，減少用戶心理和實際的等待時間。特別的，當要讀取大量的數據的時候，不用像 Reload 那樣出現白屏的情況， AJAX 使用 XMLHTTP 對象發送請求并得到服務器響應，在不重新載入整個頁面的情況下用 Javascript 操作 DOM 最終更新頁面。所以在讀取數據的過程中，用戶所面對的不是白屏，是原來的頁面內容（也可以加一個 Loading 的提示框讓用戶知道處于讀取數據過程），只有當數據接收完畢之后才更新相應部分的內容。這種更新是瞬間的，用戶幾乎感覺不到。

l 帶來更好的用戶體驗。

l 可以把以前一些服務器負擔的工作轉嫁到客戶端，利用客戶端閑置的能力來處理，減輕服務器和帶寬的負擔，節約空間和寬帶租用成本。

l 可以調用外部數據。

l 基于標準化的并被廣泛支持的技術，不需要下載插件或者小程序。

l 進一步促進頁面呈現和數據的分離。

四、誰在使用 AJAX

在應用 AJAX 開發上面， Google 當仁不讓是表率。 Orkut 、 Gmail 、 Google Groups 、 Google Maps 、 Google Suggest 都應用了這項技術。 Amazon 的 A9.com 搜索引擎也采用了類似的技術。

微軟也在積極開發更為完善的 AJAX 應用：它即將推出代號為 Atlas 的 AJAX 工具。 Atlas 的功能超越了 AJAX 本身，包括整合 Visual Studio 的調試功能。另外，新的 ASP.NET 控件將使客戶端控件與服務器端代碼的捆綁更為簡便。 Atlas 客戶腳本框架（ Atlas Clent Script Framework ）也使與網頁及相關項目的交互更為便利。但 Visual Studio 2005 中并不包含此項功能。

微軟最近宣布 Atlas 客戶腳本框架將包含如下內容（詳細資料請訪問 Atlas 計劃網站）：

* 一個可擴展的核心框架，它添加了 JavaScript 功能：如生命同時期管理、繼承管理、多點傳送處理器和界面管理。

* 一個常見功能的基本類庫，有豐富的字符串處理、計時器和運行任務。

* 為 HTML 附加動態行為的用戶界面框架。

* 一組用來簡化服務器連通和網絡訪問的網絡堆棧。

* 一組豐富的用戶界面開發控件，如：自動完成的文本框、動畫和拖放。

* 處理瀏覽器腳本行為差異的瀏覽器兼容層面。

典型的，微軟將 AJAX 技術應用在 MSN Space 上面。很多人一直都對 MS Space 服務感到很奇怪，當提交回復評論以后，瀏覽器會暫時停頓一下，然后在無刷新的情況下把我提交的評論顯示出來。這個就是應用了 AJAX 的效果。試想，如果添加一個評論就要重新刷新整個頁面，那可真費事。

目前， AJAX 應用最普遍的領域是 GIS-Map 方面。 GIS 的區域搜索強調快速響應， AJAX 的特點正好符合這種需求。

五、用 AJAX 改進你的設計

AJAX 雖然可以實現無刷新更新頁面內容，但是也不是什么地方都可以用，主要應用在交互較多、頻繁讀數據、數據分類良好的 Web 應用中?，F在，讓我們舉兩個例子，看看如何用 AJAX 改進你的設計。

例子 1 ：數據校驗

在輸入 form 表單內容的時候，我們通常需要確保數據的唯一性。因此，常常在頁面上提供“唯一性校驗”按鈕，讓用戶點擊，打開一個校驗小窗口；或者等 form 提交到服務器端，由服務器判斷后在返回相應的校驗信息。前者， window.open 操作本來就是比較耗費資源的，通常由 window. showModalDialog 代替，即使這樣也要彈出一個對話框；后者，需要把整個頁面提交到服務器并由服務器判斷校驗，這個過程不僅時間長而且加重了服務器負擔。而使用 AJAX ，這個校驗請求可以由 XMLHttpRequest 對象發出，整個過程不需要彈出新窗口，也不需要將整個頁面提交到服務器，快速又不加重服務器負擔。

例子 2 ：按需取數據 — 級聯菜單

以前，為了避免每次對菜單的操作引起的重載頁面，不采用每次調用后臺的方式，而是一次性將級聯菜單的所有數據全部讀取出來并寫入數組，然后根據用戶的操作用 JavaScript 來控制它的子集項目的呈現，這樣雖然解決了操作響應速度、不重載頁面以及避免向服務器頻繁發送請求的問題，但是如果用戶不對菜單進行操作或只對菜單中的一部分進行操作的話，那讀取的數據中的一部分就會成為冗余數據而浪費用戶的資源，特別是在菜單結構復雜、數據量大的情況下（比如菜單有很多級、每一級菜又有上百個項目），這種弊端就更為突出。

現在應用 AJAX ，在初始化頁面時我們只讀出它的第一級的所有數據并顯示，在用戶操作一級菜單其中一項時，會通過 Ajax 向后臺請求當前一級項目所屬的二級子菜單的所有數據，如果再繼續請求已經呈現的二級菜單中的一項時，再向后面請求所操作二級菜單項對應的所有三級菜單的所有數據，以此類推……這樣，用什么就取什么、用多少就取多少，就不會有數據的冗余和浪費，減少了數據下載總量，而且更新頁面時不用重載全部內容，只更新需要更新的那部分即可，相對于后臺處理并重載的方式縮短了用戶等待時間，也把對資源的浪費降到最低。

例子 3 ：讀取外部數據

AJAX 可以調用外部數據，因此，可以對一些開發的數據比如 XML 文檔、 RSS 文檔進行二次加工，實現數據整合或者開發應用程序。

六、 AJAX 的缺陷

AJAX 不是完美的技術。使用 AJAX ，它的一些缺陷不得不權衡一下：

l AJAX 大量使用了 Javascript 和 AJAX 引擎，而這個取決于瀏覽器的支持。 IE5.0 及以上、 Mozilla1.0 、 NetScape7 及以上版本才支持， Mozilla 雖然也支持 AJAX ，但是提供 XMLHttpRequest 的方式不一樣。所以，使用 AJAX 的程序必須測試針對各個瀏覽器的兼容性。

l AJAX 更新頁面內容的時候并沒有刷新整個頁面，因此，網頁的后退功能是失效的；有的用戶還經常搞不清楚現在的數據是舊的還是已經更新過的。這個就需要在明顯位置提醒用戶“數據已更新”。

l 對流媒體的支持沒有 FLASH 、 Java Applet 好。

l 一些手持設備（如手機、 PDA 等）現在還不能很好的支持 Ajax 。

七、 AJAX 開發

到這里，已經可以清楚的知道 AJAX 是什么， AJAX 能做什么， AJAX 什么地方不好。如果你覺得 AJAX 真的能給你的開發工作帶來改進的話，那么繼續看看怎么使用 AJAX 吧。

7.1 、 AJAX 應用到的技術

AJAX 涉及到的 7 項技術中，個人認為 Javascript 、 XMLHttpRequest 、 DOM 、 XML 比較有用。

A 、 XMLHttpRequest 對象

XMLHttpRequest 是 XMLHTTP 組件的對象，通過這個對象， AJAX 可以像桌面應用程序一樣只同服務器進行數據層面的交換，而不用每次都刷新界面，也不用每次將數據處理的工作都交給服務器來做；這樣既減輕了服務器負擔又加快了響應速度、縮短了用戶等待的時間。

IE5.0 開始，開發人員可以在 Web 頁面內部使用 XMLHTTP ActiveX 組件擴展自身的功能，不用從當前的 Web 頁面導航就可以直接傳輸數據到服務器或者從服務器接收數據。 ,Mozilla1.0 以及 NetScape7 則是創建繼承 XML 的代理類 XMLHttpRequest ；對于大多數情況， XMLHttpRequest 對象和 XMLHTTP 組件很相似，方法和屬性類似，只是部分屬性不同。

XMLHttpRequest 對象初始化：

<script language="”javascript”" type="text/javascript"></script>

var http_request = false;

//IE 瀏覽器

http_request = new ActiveXObject("Msxml2.XMLHTTP");

http_request = new ActiveXObject("Microsoft.XMLHTTP");

//Mozilla 瀏覽器

http_request = new XMLHttpRequest();

XMLHttpRequest 對象的方法：

方法	描述
abort()	停止當前請求
getAllResponseHeaders()	作為字符串返回完整的 headers
getResponseHeader("headerLabel")	作為字符串返回單個的 header 標簽
open("method","URL"[,asyncFlag[,"userName"[, "password"]]])	設置未決的請求的目標 URL ，方法，和其他參數
send(content)	發送請求
setRequestHeader("label", "value")	設置 header 并和請求一起發送

XMLHttpRequest 對象的屬性：

屬性	描述
onreadystatechange	狀態改變的事件觸發器
readyState	對象狀態 (integer): 0 = 未初始化 1 = 讀取中 2 = 已讀取 3 = 交互中 4 = 完成
responseText	服務器進程返回數據的文本版本
responseXML	服務器進程返回數據的兼容 DOM 的 XML 文檔對象
status	服務器返回的狀態碼 , 如： 404 = " 文件未找到 " 、 200 =" 成功 "
statusText	服務器返回的狀態文本信息

B 、 Javascript

Javascript 一直被定位為客戶端的腳本語言，應用最多的地方是表單數據的校驗?，F在，可以通過 Javascript 操作 XMLHttpRequest ，來跟數據庫打交道。

C 、 DOM

DOM （ Document Object Model ）是提供給 HTML 和 XML 使用的一組 API ，提供了文件的表述結構，并可以利用它改變其中的內容和可見物。腳本語言通過 DOM 才可以跟頁面進行交互。 Web 開發人員可操作及建立文件的屬性、方法以及事件都以對象來展現。比如， document 就代表頁面對象本身。

D 、 XML

通過 XML （ Extensible Markup Language ），可以規范的定義結構化數據，是網上傳輸的數據和文檔符合統一的標準。用 XML 表述的數據和文檔，可以很容易的讓所有程序共享。

7.2 、 AJAX 開發框架

這里，我們通過一步步的解析，來形成一個發送和接收 XMLHttpRequest 請求的程序框架。 AJAX 實質上也是遵循 Request/Server 模式，所以這個框架基本的流程也是：對象初始化 à 發送請求 à 服務器接收 à 服務器返回 à 客戶端接收 à 修改客戶端頁面內容。只不過這個過程是異步的。

A 、初始化對象并發出 XMLHttpRequest 請求

為了讓 Javascript 可以向服務器發送 HTTP 請求，必須使用 XMLHttpRequest 對象。使用之前，要先將 XMLHttpRequest 對象實例化。之前說過，各個瀏覽器對這個實例化過程實現不同。 IE 以 ActiveX 控件的形式提供，而 Mozilla 等瀏覽器則直接以 XMLHttpRequest 類的形式提供。為了讓編寫的程序能夠跨瀏覽器運行，要這樣寫：

if (window.XMLHttpRequest) { // Mozilla, Safari, ...

http_request = new XMLHttpRequest();

} else if (window.ActiveXObject) { // IE

http_request = new ActiveXObject("Microsoft.XMLHTTP");

}

有些版本的 Mozilla 瀏覽器處理服務器返回的未包含 XML mime-type 頭部信息的內容時會出錯。因此，要確保返回的內容包含 text/xml 信息。

http_request = new XMLHttpRequest();

http_request.overrideMimeType('text/xml');

B 、指定響應處理函數

接下來要指定當服務器返回信息時客戶端的處理方式。只要將相應的處理函數名稱賦給 XMLHttpRequest 對象的 onreadystatechange 屬性就可以了。比如：

http_request.onreadystatechange = processRequest;

需要指出的時，這個函數名稱不加括號，不指定參數。也可以用 Javascript 即時定義函數的方式定義響應函數。比如：

http_request.onreadystatechange = function() {

};

C 、發出 HTTP 請求

指定響應處理函數之后，就可以向服務器發出 HTTP 請求了。這一步調用 XMLHttpRequest 對象的 open 和 send 方法。

http_request.open('GET', 'http://www.example.org/some.file', true);

http_request.send(null);

open 的第一個參數是 HTTP 請求的方法，為 Get 、 Post 或者 Head 。

第二個參數是目標 URL ?；诎踩紤]，這個 URL 只能是同網域的，否則會提示“沒有權限”的錯誤。這個 URL 可以是任何的 URL ，包括需要服務器解釋執行的頁面，不僅僅是靜態頁面。

第三個參數只是指定在等待服務器返回信息的時間內是否繼續執行下面的代碼。如果為 True ，則不會繼續執行，直到服務器返回信息。默認為 True 。

按照順序， open 調用完畢之后要調用 send 方法。 send 的參數如果是以 Post 方式發出的話，可以是任何想傳給服務器的內容。不過，跟 form 一樣，如果要傳文件給服務器，必須先調用 setRequestHeader 方法，修改 MIME 類別。如下：

http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);

D 、處理服務器返回的信息

在第二步我們已經指定了響應處理函數，這一步，來看看這個響應處理函數都應該做什么。

首先，它要檢查 XMLHttpRequest 對象的 readyState 值，判斷請求目前的狀態。參照前文的屬性表可以知道， readyState 值為 4 的時候，代表服務器已經傳回所有的信息，可以開始處理信息并更新頁面內容了。如下：

if (http_request.readyState == 4) {

// 信息已經返回，可以開始處理

} else {

// 信息還沒有返回，等待

}

服務器返回信息后，還需要判斷返回的 HTTP 狀態碼，確定返回的頁面沒有錯誤。所有的狀態碼都可以在 W3C 的官方網站上查到。其中， 200 代表頁面正常。

if (http_request.status == 200) {

// 頁面正常，可以開始處理信息

} else {

// 頁面有問題

}

XMLHttpRequest 對成功返回的信息有兩種處理方式：

responseText ：將傳回的信息當字符串使用；

responseXML ：將傳回的信息當 XML 文檔使用，可以用 DOM 處理。

E 、一個初步的開發框架

總結上面的步驟，我們整理出一個初步的可用的開發框架，供以后調用；這里，將服務器返回的信息用 window.alert 以字符串的形式顯示出來：

<script language="javascript">

var http_request = false;

function send_request(url) {// 初始化、指定處理函數、發送請求的函數

http_request = false;

// 開始初始化 XMLHttpRequest 對象

if(window.XMLHttpRequest) { //Mozilla 瀏覽器

http_request = new XMLHttpRequest();

if (http_request.overrideMimeType) {// 設置 MiME 類別

http_request.overrideMimeType("text/xml");

}

}

else if (window.ActiveXObject) { // IE 瀏覽器

try {

http_request = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

http_request = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {}

}

}

if (!http_request) { // 異常，創建對象實例失敗

window.alert(" 不能創建 XMLHttpRequest 對象實例 .");

return false;

}

http_request.onreadystatechange = processRequest;

// 確定發送請求的方式和 URL 以及是否同步執行下段代碼

http_request.open("GET", url, true);

http_request.send(null);

}

// 處理返回信息的函數

function processRequest() {

if (http_request.readyState == 4) { // 判斷對象狀態

if (http_request.status == 200) { // 信息已經成功返回，開始處理信息

alert(http_request.responseText);

} else { // 頁面不正常

alert(" 您所請求的頁面有異常。 ");

}

}

}

</script>

<script language="javascript" type="text/javascript"></script>

var http_request = false;

function send_request(url) {// 初始化、指定處理函數、發送請求的函數

http_request = false;

// 開始初始化 XMLHttpRequest 對象

if(window.XMLHttpRequest) { //Mozilla 瀏覽器

http_request = new XMLHttpRequest();

if (http_request.overrideMimeType) {// 設置 MiME 類別

http_request.overrideMimeType("text/xml");

}

}

else if (window.ActiveXObject) { // IE 瀏覽器

try {

http_request = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

http_request = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {}

}

}

if (!http_request) { // 異常，創建對象實例失敗

window.alert(" 不能創建 XMLHttpRequest 對象實例 .");

return false;

}

http_request.onreadystatechange = processRequest;

// 確定發送請求的方式和 URL 以及是否同步執行下段代碼

http_request.open("GET", url, true);

http_request.send(null);

}

// 處理返回信息的函數

function processRequest() {

if (http_request.readyState == 4) { // 判斷對象狀態

if (http_request.status == 200) { // 信息已經成功返回，開始處理信息

alert(http_request.responseText);

} else { // 頁面不正常

alert(" 您所請求的頁面有異常。 ");

}

}

}

7.3 、簡單的示例

接下來，我們利用上面的開發框架來做兩個簡單的應用。

A 、數據校驗

在用戶注冊的表單中，經常碰到要檢驗待注冊的用戶名是否唯一。傳統的做法是采用 window.open 的彈出窗口，或者 window. showModalDialog 的對話框。不過，這兩個都需要打開窗口。采用 AJAX 后，采用異步方式直接將參數提交到服務器，用 window.alert 將服務器返回的校驗信息顯示出來。代碼如下：

在 之間增加一段 form 表單代碼：

在開發框架的基礎上再增加一個調用函數：

function userCheck() {

var f = document.form1;

var username = f.username.value;

if(username=="") {

window.alert(" 用戶名不能為空。 ");

f.username.focus();

return false;

}

else {

send_request('sample1_2.jsp?username='+username);

}

}

看看 sample1_2.jsp 做了什么：

<%@ page contentType="text/html; charset=gb2312" errorPage="" %>

<%

String username = request.getParameter("username");

if("educhina".equals(username)) out.print(" 用戶名已經被注冊，請更換一個用戶名。 ");

else out.print(" 用戶名尚未被使用，您可以繼續。 ");

%>

運行一下，嗯，沒有彈出窗口，沒有頁面刷新，跟預想的效果一樣。如果需要的話，可以在 sample1_2.jsp 中實現更復雜的功能。最后，只要將反饋信息打印出來就可以了。

B 、級聯菜單

我們在第五部分提到利用 AJAX 改進級聯菜單的設計。接下來，我們就演示一下如何“按需取數據”。

首先，在 <body></body> 中間增加如下 HTML 代碼：

<table width="200" border="0" cellspacing="0" cellpadding="0">

<tr>

<td height="20">

<a href="javascript:void(0)" onClick="showRoles('pos_1')"> 經理室 </a>

</td>

</tr>

<tr style="display:none">

<td height="20" id="pos_1">&nbsp;</td>

</tr>

<tr>

<td height="20">

<a href="javascript:void(0)" onClick="showRoles('pos_2')"> 開發部 </a>

</td>

</tr>

<tr style="display:none ">

<td id="pos_2" height="20">&nbsp;</td>

</tr>

</table>

在框架的基礎上增加一個響應函數 showRoles(obj) ：

// 顯示部門下的崗位

function showRoles(obj) {

document.getElementById(obj).parentNode.style.display = "";

document.getElementById(obj).innerHTML = " 正在讀取數據 ..."

currentPos = obj;

send_request("sample2_2.jsp?playPos="+obj);

}

修改框架的 processRequest 函數：

// 處理返回信息的函數

function processRequest() {

if (http_request.readyState == 4) { // 判斷對象狀態

if (http_request.status == 200) { // 信息已經成功返回，開始處理信息

document.getElementById(currentPos).innerHTML = http_request.responseText;

} else { // 頁面不正常

alert(" 您所請求的頁面有異常。 ");

}

}

}

最后就是 smaple2_2.jsp 了：

<%@ page contentType="text/html; charset=gb2312" errorPage="" %>

<%

String playPos = request.getParameter("playPos");

if("pos_1".equals(playPos))

out.print("&nbsp;&nbsp; 總經理 <br>&nbsp;&nbsp; 副總經理 ");

else if("pos_2".equals(playPos))

out.println("&nbsp;&nbsp; 總工程師 <br>&nbsp;&nbsp; 軟件工程師 ");

%>
運行一下看看效果：

參考文章：

作者：	fanscial	標題：	《 AJAX 簡介》
網址：	http://www.blogjava.net/fanscial/archive/2005/08/31/11628.html
作者：	Amour GUO	標題：	《 AJAX 內部交流文檔》
網址：	http://www.dragonson.com/doc/ajax.html
作者：	MoztwWiki	標題：	《 AJAX 上手篇》
網址：	http://wiki.moztw.org/index.php/AJAX_%E4%B8%8A%E6%89%8B%E7%AF%87

[轉]AJAX開發簡略