參與人員：
作者
網(wǎng)名
聯(lián)絡(luò )
柯自聰
eamoi educhina
eamoi@163.com（技術(shù)）
zcke0728@hotmail.com（版權）
發(fā)布記錄：
版本
日期
作者
說(shuō)明
1.0
2005-10-28
柯自聰
創(chuàng )建，第一版
鏈接：
類(lèi)別
網(wǎng)址
Blog
http://www.blogjava.net/eamoi/MSN-Space
http://spaces.msn.com/members/eamoi/OpenDoc版權說(shuō)明：
本文檔版權歸原作者所有。
在免費、且無(wú)任何附加條件的前提下，可在網(wǎng)絡(luò )媒體中自由傳播。
如需部分或者全文引用，請事先征求作者意見(jiàn)。
如果本文對您有些許幫助，表達謝意的最好方式，是將您發(fā)現的問(wèn)題和文檔改進(jìn)意見(jiàn)及時(shí)反饋給作者。當然，倘若有時(shí)間和能力，能為技術(shù)群體無(wú)償貢獻自己的所學(xué)為最好的回饋。
AJAX開(kāi)發(fā)簡(jiǎn)略
一、AJAX定義
二、現狀與需要解決的問(wèn)題
三、為什么使用AJAX
四、誰(shuí)在使用AJAX
五、用AJAX改進(jìn)你的設計
例子1：數據校驗
例子2：按需取數據—級聯(lián)菜單
例子3：讀取外部數據
六、AJAX的缺陷
七、AJAX開(kāi)發(fā)
7.1、AJAX應用到的技術(shù)
A、XMLHttpRequest對象
B、Javascript
C、DOM
D、XML
7.2、AJAX開(kāi)發(fā)框架
A、初始化對象并發(fā)出XMLHttpRequest請求
B、指定響應處理函數
C、發(fā)出HTTP請求
D、處理服務(wù)器返回的信息
E、一個(gè)初步的開(kāi)發(fā)框架
7.3、簡(jiǎn)單的示例
A、數據校驗
B、級聯(lián)菜單
參考文章：
在使用瀏覽器瀏覽網(wǎng)頁(yè)的時(shí)候，當頁(yè)面刷新很慢的時(shí)候，你的瀏覽器在干什么？你的屏幕內容是什么？是的，你的瀏覽器在等待刷新，而你的屏幕內容是一片空白，而你在屏幕前苦苦的等待瀏覽器的響應。開(kāi)發(fā)人員為了克服這種尷尬的局面，不得不在每一個(gè)可能需要長(cháng)時(shí)間等待響應的頁(yè)面上增加一個(gè)DIV，告訴用戶(hù)“系統正在處理您的請求，請稍候……”。
現在，有一種越來(lái)越流行越熱的“老”技術(shù)，可以徹底改變這種窘迫的局面。那就是AJAX。如今，隨著(zhù)Gmail、Google-maps的應用和各種瀏覽器的支持，AJAX正逐漸吸引全世界的眼球。
AJAX（Asynchronous JavaScript and XML）其實(shí)是多種技術(shù)的綜合，包括Javascript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest。其中：
使用XHTML和CSS標準化呈現，使用DOM實(shí)現動(dòng)態(tài)顯示和交互，使用XML和XSTL進(jìn)行數據交換與處理，使用XMLHttpRequest對象進(jìn)行異步數據讀取，使用Javascript綁定和處理所有數據。
在A(yíng)JAX提出之前，業(yè)界對于上述技術(shù)都只是單獨的使用，沒(méi)有綜合使用，也是由于之前的技術(shù)需求所決定的。隨著(zhù)應用的廣泛，AJAX也成為香餑餑了。
傳統的Web應用采用同步交互過(guò)程，這種情況下，用戶(hù)首先向HTTP服務(wù)器觸發(fā)一個(gè)行為或請求的呼求。反過(guò)來(lái)，服務(wù)器執行某些任務(wù)，再向發(fā)出請求的用戶(hù)返回一個(gè)HTML頁(yè)面。這是一種不連貫的用戶(hù)體驗，服務(wù)器在處理請求的時(shí)候，用戶(hù)多數時(shí)間處于等待的狀態(tài)，屏幕內容也是一片空白。如下圖：
自從采用超文本作為Web傳輸和呈現之后，我們都是采用這么一套傳輸方式。當負載比較小的時(shí)候，這并不會(huì )體現出有什么不妥?？墒钱斬撦d比較大，響應時(shí)間要很長(cháng)，1分鐘、2分鐘……數分鐘的時(shí)候，這種等待就不可忍受了。嚴重的，超過(guò)響應時(shí)間，服務(wù)器干脆告訴你頁(yè)面不可用。另外，某些時(shí)候，我只是想改變頁(yè)面一小部分的數據，那為什么我必須重新加載整個(gè)頁(yè)面呢？！當軟件設計越來(lái)越講究人性化的時(shí)候，這么糟糕的用戶(hù)體驗簡(jiǎn)直與這種原則背道而馳。為什么老是要讓用戶(hù)等待服務(wù)器取數據呢？至少，我們應該減少用戶(hù)等待的時(shí)間?，F在，除了程序設計、編碼優(yōu)化和服務(wù)器調優(yōu)之外，還可以采用AJAX。
與傳統的Web應用不同，AJAX采用異步交互過(guò)程。AJAX在用戶(hù)與服務(wù)器之間引入一個(gè)中間媒介，從而消除了網(wǎng)絡(luò )交互過(guò)程中的處理—等待—處理—等待缺點(diǎn)。用戶(hù)的瀏覽器在執行任務(wù)時(shí)即裝載了AJAX引擎。AJAX引擎用JavaScript語(yǔ)言編寫(xiě)，通常藏在一個(gè)隱藏的框架中。它負責編譯用戶(hù)界面及與服務(wù)器之間的交互。AJAX引擎允許用戶(hù)與應用軟件之間的交互過(guò)程異步進(jìn)行，獨立于用戶(hù)與網(wǎng)絡(luò )服務(wù)器間的交流?，F在，可以用Javascript調用AJAX引擎來(lái)代替產(chǎn)生一個(gè)HTTP的用戶(hù)動(dòng)作，內存中的數據編輯、頁(yè)面導航、數據校驗這些不需要重新載入整個(gè)頁(yè)面的需求可以交給AJAX來(lái)執行。
使用AJAX，可以為ISP、開(kāi)發(fā)人員、終端用戶(hù)帶來(lái)可見(jiàn)的便捷：
l 減輕服務(wù)器的負擔。AJAX的原則是“按需取數據”，可以最大程度的減少冗余請求，和響應對服務(wù)器造成的負擔。
l 無(wú)刷新更新頁(yè)面，減少用戶(hù)心理和實(shí)際的等待時(shí)間。特別的，當要讀取大量的數據的時(shí)候，不用像Reload那樣出現白屏的情況，AJAX使用XMLHTTP對象發(fā)送請求并得到服務(wù)器響應，在不重新載入整個(gè)頁(yè)面的情況下用Javascript操作DOM最終更新頁(yè)面。所以在讀取數據的過(guò)程中，用戶(hù)所面對的不是白屏，是原來(lái)的頁(yè)面內容（也可以加一個(gè)Loading的提示框讓用戶(hù)知道處于讀取數據過(guò)程），只有當數據接收完畢之后才更新相應部分的內容。這種更新是瞬間的，用戶(hù)幾乎感覺(jué)不到。
l 帶來(lái)更好的用戶(hù)體驗。
l 可以把以前一些服務(wù)器負擔的工作轉嫁到客戶(hù)端，利用客戶(hù)端閑置的能力來(lái)處理，減輕服務(wù)器和帶寬的負擔，節約空間和寬帶租用成本。
l 可以調用外部數據。
l 基于標準化的并被廣泛支持的技術(shù)，不需要下載插件或者小程序。
l 進(jìn)一步促進(jìn)頁(yè)面呈現和數據的分離。
在應用AJAX開(kāi)發(fā)上面，Google當仁不讓是表率。Orkut、Gmail、Google Groups、Google Maps、Google Suggest都應用了這項技術(shù)。Amazon的A9.com搜索引擎也采用了類(lèi)似的技術(shù)。
微軟也在積極開(kāi)發(fā)更為完善的AJAX應用：它即將推出代號為Atlas的AJAX工具。Atlas的功能超越了AJAX本身，包括整合Visual Studio的調試功能。另外，新的ASP.NET控件將使客戶(hù)端控件與服務(wù)器端代碼的捆綁更為簡(jiǎn)便。Atlas客戶(hù)腳本框架（Atlas Clent Script Framework）也使與網(wǎng)頁(yè)及相關(guān)項目的交互更為便利。但Visual Studio 2005中并不包含此項功能。
微軟最近宣布Atlas客戶(hù)腳本框架將包含如下內容（詳細資料請訪(fǎng)問(wèn)Atlas計劃網(wǎng)站）：
* 一個(gè)可擴展的核心框架，它添加了JavaScript功能：如生命同時(shí)期管理、繼承管理、多點(diǎn)傳送處理器和界面管理。
* 一個(gè)常見(jiàn)功能的基本類(lèi)庫，有豐富的字符串處理、計時(shí)器和運行任務(wù)。
* 為HTML附加動(dòng)態(tài)行為的用戶(hù)界面框架。
* 一組用來(lái)簡(jiǎn)化服務(wù)器連通和網(wǎng)絡(luò )訪(fǎng)問(wèn)的網(wǎng)絡(luò )堆棧。
* 一組豐富的用戶(hù)界面開(kāi)發(fā)控件，如：自動(dòng)完成的文本框、動(dòng)畫(huà)和拖放。
* 處理瀏覽器腳本行為差異的瀏覽器兼容層面。
典型的，微軟將AJAX技術(shù)應用在MSN Space上面。很多人一直都對MS Space服務(wù)感到很奇怪，當提交回復評論以后，瀏覽器會(huì )暫時(shí)停頓一下，然后在無(wú)刷新的情況下把我提交的評論顯示出來(lái)。這個(gè)就是應用了AJAX的效果。試想，如果添加一個(gè)評論就要重新刷新整個(gè)頁(yè)面，那可真費事。
目前，AJAX應用最普遍的領(lǐng)域是GIS-Map方面。GIS的區域搜索強調快速響應，AJAX的特點(diǎn)正好符合這種需求。
AJAX雖然可以實(shí)現無(wú)刷新更新頁(yè)面內容，但是也不是什么地方都可以用，主要應用在交互較多、頻繁讀數據、數據分類(lèi)良好的Web應用中?，F在，讓我們舉兩個(gè)例子，看看如何用AJAX改進(jìn)你的設計。
在輸入form表單內容的時(shí)候，我們通常需要確保數據的唯一性。因此，常常在頁(yè)面上提供“唯一性校驗”按鈕，讓用戶(hù)點(diǎn)擊，打開(kāi)一個(gè)校驗小窗口；或者等f(wàn)orm提交到服務(wù)器端，由服務(wù)器判斷后在返回相應的校驗信息。前者，window.open操作本來(lái)就是比較耗費資源的，通常由window. showModalDialog代替，即使這樣也要彈出一個(gè)對話(huà)框；后者，需要把整個(gè)頁(yè)面提交到服務(wù)器并由服務(wù)器判斷校驗，這個(gè)過(guò)程不僅時(shí)間長(cháng)而且加重了服務(wù)器負擔。而使用AJAX，這個(gè)校驗請求可以由XMLHttpRequest對象發(fā)出，整個(gè)過(guò)程不需要彈出新窗口，也不需要將整個(gè)頁(yè)面提交到服務(wù)器，快速又不加重服務(wù)器負擔。
以前，為了避免每次對菜單的操作引起的重載頁(yè)面，不采用每次調用后臺的方式，而是一次性將級聯(lián)菜單的所有數據全部讀取出來(lái)并寫(xiě)入數組，然后根據用戶(hù)的操作用JavaScript來(lái)控制它的子集項目的呈現，這樣雖然解決了操作響應速度、不重載頁(yè)面以及避免向服務(wù)器頻繁發(fā)送請求的問(wèn)題，但是如果用戶(hù)不對菜單進(jìn)行操作或只對菜單中的一部分進(jìn)行操作的話(huà)，那讀取的數據中的一部分就會(huì )成為冗余數據而浪費用戶(hù)的資源，特別是在菜單結構復雜、數據量大的情況下（比如菜單有很多級、每一級菜又有上百個(gè)項目），這種弊端就更為突出。
現在應用AJAX，在初始化頁(yè)面時(shí)我們只讀出它的第一級的所有數據并顯示，在用戶(hù)操作一級菜單其中一項時(shí)，會(huì )通過(guò)Ajax向后臺請求當前一級項目所屬的二級子菜單的所有數據，如果再繼續請求已經(jīng)呈現的二級菜單中的一項時(shí)，再向后面請求所操作二級菜單項對應的所有三級菜單的所有數據，以此類(lèi)推……這樣，用什么就取什么、用多少就取多少，就不會(huì )有數據的冗余和浪費，減少了數據下載總量，而且更新頁(yè)面時(shí)不用重載全部?jì)热?，只更新需要更新的那部分即可，相對于后臺處理并重載的方式縮短了用戶(hù)等待時(shí)間，也把對資源的浪費降到最低。
AJAX可以調用外部數據，因此，可以對一些開(kāi)發(fā)的數據比如XML文檔、RSS文檔進(jìn)行二次加工，實(shí)現數據整合或者開(kāi)發(fā)應用程序。
AJAX不是完美的技術(shù)。使用AJAX，它的一些缺陷不得不權衡一下：
l AJAX大量使用了Javascript和AJAX引擎，而這個(gè)取決于瀏覽器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla雖然也支持AJAX，但是提供XMLHttpRequest的方式不一樣。所以，使用AJAX的程序必須測試針對各個(gè)瀏覽器的兼容性。
l AJAX更新頁(yè)面內容的時(shí)候并沒(méi)有刷新整個(gè)頁(yè)面，因此，網(wǎng)頁(yè)的后退功能是失效的；有的用戶(hù)還經(jīng)常搞不清楚現在的數據是舊的還是已經(jīng)更新過(guò)的。這個(gè)就需要在明顯位置提醒用戶(hù)“數據已更新”。
l 對流媒體的支持沒(méi)有FLASH、Java Applet好。
l 一些手持設備（如手機、PDA等）現在還不能很好的支持Ajax。
到這里，已經(jīng)可以清楚的知道AJAX是什么，AJAX能做什么，AJAX什么地方不好。如果你覺(jué)得AJAX真的能給你的開(kāi)發(fā)工作帶來(lái)改進(jìn)的話(huà)，那么繼續看看怎么使用AJAX吧。
、AJAX應用到的技術(shù)
AJAX涉及到的7項技術(shù)中，個(gè)人認為Javascript、XMLHttpRequest、DOM、XML比較有用。
、XMLHttpRequest對象
XMLHttpRequest是XMLHTTP組件的對象，通過(guò)這個(gè)對象，AJAX可以像桌面應用程序一樣只同服務(wù)器進(jìn)行數據層面的交換，而不用每次都刷新界面，也不用每次將數據處理的工作都交給服務(wù)器來(lái)做；這樣既減輕了服務(wù)器負擔又加快了響應速度、縮短了用戶(hù)等待的時(shí)間。
IE5.0開(kāi)始，開(kāi)發(fā)人員可以在Web頁(yè)面內部使用XMLHTTP ActiveX組件擴展自身的功能，不用從當前的Web頁(yè)面導航就可以直接傳輸數據到服務(wù)器或者從服務(wù)器接收數據。,Mozilla1.0以及NetScape7則是創(chuàng )建繼承XML的代理類(lèi)XMLHttpRequest；對于大多數情況，XMLHttpRequest對象和XMLHTTP組件很相似，方法和屬性類(lèi)似，只是部分屬性不同。
XMLHttpRequest對象初始化：
XMLHttpRequest對象的方法：
方法
描述
abort()
停止當前請求
getAllResponseHeaders()
作為字符串返問(wèn)完整的headers
getResponseHeader("headerLabel")
作為字符串返問(wèn)單個(gè)的header標簽
open("method","URL"[,asyncFlag[,"userName"[, "password"]]])
設置未決的請求的目標 URL，方法，和其他參數
send(content)
發(fā)送請求
setRequestHeader("label", "value")
設置header并和請求一起發(fā)送
XMLHttpRequest對象的屬性：
屬性
描述
onreadystatechange
狀態(tài)改變的事件觸發(fā)器
readyState
對象狀態(tài)(integer):
0 = 未初始化
1 = 讀取中
2 = 已讀取
3 = 交互中
4 = 完成
responseText
服務(wù)器進(jìn)程返回數據的文本版本
responseXML
服務(wù)器進(jìn)程返回數據的兼容DOM的XML文檔對象
status
服務(wù)器返回的狀態(tài)碼, 如：404 = "文件末找到" 、200 ="成功"
statusText
服務(wù)器返回的狀態(tài)文本信息
、Javascript
Javascript一直被定位為客戶(hù)端的腳本語(yǔ)言，應用最多的地方是表單數據的校驗?，F在，可以通過(guò)Javascript操作XMLHttpRequest，來(lái)跟數據庫打交道。
、DOM
DOM（Document Object Model）是提供給HTML和XML使用的一組API，提供了文件的表述結構，并可以利用它改變其中的內容和可見(jiàn)物。腳本語(yǔ)言通過(guò)DOM才可以跟頁(yè)面進(jìn)行交互。Web開(kāi)發(fā)人員可操作及建立文件的屬性、方法以及事件都以對象來(lái)展現。比如，document就代表頁(yè)面對象本身。
、XML
通過(guò)XML（Extensible Markup Language），可以規范的定義結構化數據，是網(wǎng)上傳輸的數據和文檔符合統一的標準。用XML表述的數據和文檔，可以很容易的讓所有程序共享。
、AJAX開(kāi)發(fā)框架
這里，我們通過(guò)一步步的解析，來(lái)形成一個(gè)發(fā)送和接收XMLHttpRequest請求的程序框架。AJAX實(shí)質(zhì)上也是遵循Request/Server模式，所以這個(gè)框架基本的流程也是：對象初始化à發(fā)送請求à服務(wù)器接收à服務(wù)器返回à客戶(hù)端接收à修改客戶(hù)端頁(yè)面內容。只不過(guò)這個(gè)過(guò)程是異步的。
、初始化對象并發(fā)出XMLHttpRequest請求
為了讓Javascript可以向服務(wù)器發(fā)送HTTP請求，必須使用XMLHttpRequest對象。使用之前，要先將XMLHttpRequest對象實(shí)例化。之前說(shuō)過(guò)，各個(gè)瀏覽器對這個(gè)實(shí)例化過(guò)程實(shí)現不同。IE以ActiveX控件的形式提供，而Mozilla等瀏覽器則直接以XMLHttpRequest類(lèi)的形式提供。為了讓編寫(xiě)的程序能夠跨瀏覽器運行，要這樣寫(xiě)：
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
有些版本的Mozilla瀏覽器處理服務(wù)器返回的未包含XML mime-type頭部信息的內容時(shí)會(huì )出錯。因此，要確保返回的內容包含text/xml信息。
http_request = new XMLHttpRequest();
http_request.overrideMimeType(‘text/xml‘);
、指定響應處理函數
接下來(lái)要指定當服務(wù)器返回信息時(shí)客戶(hù)端的處理方式。只要將相應的處理函數名稱(chēng)賦給XMLHttpRequest對象的onreadystatechange屬性就可以了。比如：
http_request.onreadystatechange = processRequest;
需要指出的時(shí)，這個(gè)函數名稱(chēng)不加括號，不指定參數。也可以用Javascript即時(shí)定義函數的方式定義響應函數。比如：
http_request.onreadystatechange = function() {
};
、發(fā)出HTTP請求
指定響應處理函數之后，就可以向服務(wù)器發(fā)出HTTP請求了。這一步調用XMLHttpRequest對象的open和send方法。
http_request.open(‘GET‘, ‘http://www.example.org/some.file‘, true);
http_request.send(null);
open的第一個(gè)參數是HTTP請求的方法，為Get、Post或者Head。
第二個(gè)參數是目標URL?；诎踩紤]，這個(gè)URL只能是同網(wǎng)域的，否則會(huì )提示“沒(méi)有權限”的錯誤。這個(gè)URL可以是任何的URL，包括需要服務(wù)器解釋執行的頁(yè)面，不僅僅是靜態(tài)頁(yè)面。
第三個(gè)參數只是指定在等待服務(wù)器返回信息的時(shí)間內是否繼續執行下面的代碼。如果為T(mén)rue，則不會(huì )繼續執行，直到服務(wù)器返回信息。默認為T(mén)rue。
按照順序，open調用完畢之后要調用send方法。send的參數如果是以Post方式發(fā)出的話(huà)，可以是任何想傳給服務(wù)器的內容。不過(guò)，跟form一樣，如果要傳文件給服務(wù)器，必須先調用setRequestHeader方法，修改MIME類(lèi)別。如下：
http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
、處理服務(wù)器返回的信息
在第二步我們已經(jīng)指定了響應處理函數，這一步，來(lái)看看這個(gè)響應處理函數都應該做什么。
首先，它要檢查XMLHttpRequest對象的readyState值，判斷請求目前的狀態(tài)。參照前文的屬性表可以知道，readyState值為4的時(shí)候，代表服務(wù)器已經(jīng)傳回所有的信息，可以開(kāi)始處理信息并更新頁(yè)面內容了。如下：
if (http_request.readyState == 4) {
// 信息已經(jīng)返回，可以開(kāi)始處理
} else {
// 信息還沒(méi)有返回，等待
}
服務(wù)器返回信息后，還需要判斷返回的HTTP狀態(tài)碼，確定返回的頁(yè)面沒(méi)有錯誤。所有的狀態(tài)碼都可以在
W3C的官方網(wǎng)站上查到。其中，200代表頁(yè)面正常。
if (http_request.status == 200) {
// 頁(yè)面正常，可以開(kāi)始處理信息
} else {
// 頁(yè)面有問(wèn)題
}
XMLHttpRequest對成功返回的信息有兩種處理方式：
responseText：將傳回的信息當字符串使用；
responseXML：將傳回的信息當XML文檔使用，可以用DOM處理。
、一個(gè)初步的開(kāi)發(fā)框架
總結上面的步驟，我們整理出一個(gè)初步的可用的開(kāi)發(fā)框架，供以后調用；這里，將服務(wù)器返回的信息用window.alert以字符串的形式顯示出來(lái)：
、簡(jiǎn)單的示例
接下來(lái)，我們利用上面的開(kāi)發(fā)框架來(lái)做兩個(gè)簡(jiǎn)單的應用。
、數據校驗
在用戶(hù)注冊的表單中，經(jīng)常碰到要檢驗待注冊的用戶(hù)名是否唯一。傳統的做法是采用window.open的彈出窗口，或者window. showModalDialog的對話(huà)框。不過(guò)，這兩個(gè)都需要打開(kāi)窗口。采用AJAX后，采用異步方式直接將參數提交到服務(wù)器，用window.alert將服務(wù)器返回的校驗信息顯示出來(lái)。代碼如下：
在之間增加一段form表單代碼：
在開(kāi)發(fā)框架的基礎上再增加一個(gè)調用函數：
function userCheck() {
var f = document.form1;
var username = f.username.value;
if(username=="") {
window.alert("用戶(hù)名不能為空。");
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("用戶(hù)名已經(jīng)被注冊，請更換一個(gè)用戶(hù)名。");
else out.print("用戶(hù)名尚未被使用，您可以繼續。");
%>
運行一下，嗯，沒(méi)有彈出窗口，沒(méi)有頁(yè)面刷新，跟預想的效果一樣。如果需要的話(huà)，可以在sample1_2.jsp中實(shí)現更復雜的功能。最后，只要將反饋信息打印出來(lái)就可以了。
、級聯(lián)菜單
我們在第五部分提到利用AJAX改進(jìn)級聯(lián)菜單的設計。接下來(lái)，我們就演示一下如何“按需取數據”。
首先，在<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‘)">經(jīng)理室</a>
</td>
</tr>
<tr style="display:none">
<td height="20" id="pos_1"> </td>
</tr>
<tr>
<td height="20">
<a href="javascript:void(0)" onClick="showRoles(‘pos_2‘)">開(kāi)發(fā)部</a>
</td>
</tr>
<tr style="display:none ">
<td id="pos_2" height="20"> </td>
</tr>
</table>
在框架的基礎上增加一個(gè)響應函數showRoles(obj)：
//顯示部門(mén)下的崗位
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) { // 判斷對象狀態(tài)
if (http_request.status == 200) { // 信息已經(jīng)成功返回，開(kāi)始處理信息
document.getElementById(currentPos).innerHTML = http_request.responseText;
} else { //頁(yè)面不正常
alert("您所請求的頁(yè)面有異常。");
}
}
}
最后就是smaple2_2.jsp了：
<%@ page contentType="text/html; charset=gb2312" errorPage="" %>
<%
String playPos = request.getParameter("playPos");
if("pos_1".equals(playPos))
out.print(" 總經(jīng)理<br> 副總經(jīng)理");
else if("pos_2".equals(playPos))
out.println(" 總工程師<br> 軟件工程師");
%>
