JavaWeb程序設(shè)計(jì) 課件 ch12 AJAX

第12章AJAX本課教學(xué)內(nèi)容AJAX概述AJAX開(kāi)發(fā)AJAX簡(jiǎn)單案例AJAX概述問(wèn)題能否在登錄提交時(shí)，瀏覽器界面不刷新，提交改為在后臺(tái)異步進(jìn)行，當(dāng)服務(wù)器端驗(yàn)證完畢，將結(jié)果在界面上原來(lái)登錄表單所在的位置顯示出來(lái)？答案：使用AJAXAJAX概述異步(Asynchronous)的概念和同步相對(duì)(Synchronous)。當(dāng)一個(gè)異步過(guò)程調(diào)用發(fā)出后，調(diào)用者不需要立刻得到結(jié)果，可以繼續(xù)做自己的事情，等到過(guò)程調(diào)用完畢，再通過(guò)回調(diào)函數(shù)通知調(diào)用方。而同步情況下，調(diào)用方必須等待對(duì)方得到結(jié)果，才能繼續(xù)運(yùn)行AJAX包含以下五個(gè)部分異步數(shù)據(jù)獲取技術(shù)，使用XMLHttpRequest基于標(biāo)準(zhǔn)的表示技術(shù)，使用XHTML與CSSAJAX概述AJAX包含以下五個(gè)部分動(dòng)態(tài)顯示和交互技術(shù)，使用DocumentObjectModel(文檔對(duì)象模型)數(shù)據(jù)互換和操作技術(shù)，使用XML與XSLTJavaScript，將以上技術(shù)融合在一起AJAX概述一個(gè)簡(jiǎn)單案例*具體代碼示例詳見(jiàn)課本AJAX開(kāi)發(fā)AJAX核心代碼

functionshowInfo(){

varxmlHttp=newActiveXObject("Msxml2.XMLHTTP"); xmlHttp.open("get","info.jsp",true); xmlHttp.onreadystatechange=function(){ if(xmlHttp.readyState==4){ infoDiv.innerHTML=xmlHttp.responseText; } } xmlHttp.send();}步驟1：在IE中實(shí)例化Msxml2.XMLHTTP對(duì)象： varxmlHttp=newActiveXObject("Msxml2.XMLHTTP");

Msxml2.XMLHTTP是IE瀏覽器內(nèi)置的對(duì)象AJAX開(kāi)發(fā)—API解釋AJAX開(kāi)發(fā)—API解釋步驟2：指定異步提交的目標(biāo)和提交方式，調(diào)用了xmlHttp的open方法：

xmlHttp.open("get","info.jsp",true);該方法一共3個(gè)參數(shù)：

參數(shù)1——表示請(qǐng)求的方式，一般有如下選擇：get、post。

參數(shù)2——表示請(qǐng)求的目標(biāo)是info.jsp；當(dāng)然，也可以在此處給info.jsp一些參數(shù)。如： xmlHttp.open("GET","info.jsp?account=0001",true);

參數(shù)3——為true表示異步請(qǐng)求，否則表示非異步請(qǐng)求。異步請(qǐng)求可以通俗理解為后臺(tái)提交，此種情況下，請(qǐng)求在后臺(tái)執(zhí)行。AJAX開(kāi)發(fā)—API解釋AJAX開(kāi)發(fā)—API解釋步驟3：指定當(dāng)xmlHttp狀態(tài)改變時(shí)，需要進(jìn)行的處理。處理一般是以響應(yīng)函數(shù)的形式進(jìn)行：

xmlHttp.onreadystatechange=function(){ //處理代碼 }AJAX開(kāi)發(fā)—API解釋常見(jiàn)的readyState屬性值是：

0：未初始化狀態(tài)，對(duì)象已創(chuàng)建，尚未調(diào)用open()

1:已初始化狀態(tài)，調(diào)用open()方法以后AJAX開(kāi)發(fā)—API解釋常見(jiàn)的readyState屬性值是：

2:發(fā)送數(shù)據(jù)狀態(tài)，調(diào)用send()方法以后

3:數(shù)據(jù)傳送中狀態(tài)，已經(jīng)接到部分?jǐn)?shù)據(jù)，但接收尚未完成4:完成狀態(tài)，數(shù)據(jù)全部接收完成AJAX開(kāi)發(fā)—API解釋步驟4：編寫(xiě)處理代碼：

xmlHttp.onreadystatechange=function(){ if(xmlHttp.readyState==4){ infoDiv.innerHTML=xmlHttp.responseText; } }AJAX開(kāi)發(fā)—API解釋特別說(shuō)明infoDiv除了具有innerHTML屬性之外，還有innerText屬性，表示在該div內(nèi)顯示內(nèi)容時(shí)，不考慮其中的HTML格式的標(biāo)簽AJAX開(kāi)發(fā)—API解釋特別說(shuō)明 除了div可以達(dá)到動(dòng)態(tài)顯示內(nèi)容的效果之外，HTML中的span也可以做到該效果。不同的是，span將其內(nèi)部的內(nèi)容以文本段顯示，div將其內(nèi)部的內(nèi)容以段落顯示。一般而言，使用div從界面上看到的效果是：內(nèi)容會(huì)另起一行單獨(dú)顯示AJAX開(kāi)發(fā)—API解釋步驟5：發(fā)出請(qǐng)求，調(diào)用xmlHttp的send函數(shù)：

xmlHttp.send(); send()函數(shù)的參數(shù)要求跟在步驟二xmlHttp.open(,,);第一個(gè)參數(shù)“請(qǐng)求方法”有關(guān)。

AJAX開(kāi)發(fā)—API解釋

請(qǐng)求方法可以為get或post.

如果請(qǐng)求方式是get的話，send可以沒(méi)有參數(shù)，或者參數(shù)為null；如果請(qǐng)求方式是post,可以將需要傳送的內(nèi)容傳入send函數(shù)中以字符串的形式發(fā)出AJAX簡(jiǎn)單案例

做一個(gè)簡(jiǎn)單的登錄界面，如果登錄成功(如guokehua登錄成功)，界面跳轉(zhuǎn)到loginSuccess.jsp；如果登錄失敗，跳轉(zhuǎn)到loginFail.jsp。AJAX簡(jiǎn)單案例三個(gè)界面如下：AJAX簡(jiǎn)單案例*具體案例代碼詳見(jiàn)課本需要注意的問(wèn)題AJAX具有如下優(yōu)點(diǎn)減輕服務(wù)器負(fù)擔(dān)，避免整個(gè)瀏覽器窗口刷新時(shí)造成的重復(fù)請(qǐng)求帶來(lái)更好的用戶體驗(yàn)進(jìn)一步促進(jìn)頁(yè)面呈現(xiàn)和數(shù)據(jù)本身的分離等需要注意的問(wèn)題AJAX具有如下缺點(diǎn)對(duì)瀏覽器具有一定的限制，對(duì)于不兼容的瀏覽器，可能無(wú)法使用。AJAX沒(méi)有刷新頁(yè)面，瀏覽器上的"后退"按鈕是失效的，因此，客戶經(jīng)常無(wú)法回退到以前的操作常見(jiàn)的AJAX框架AJAX框架Bindows，2003年發(fā)布，網(wǎng)址是：。Bindows是一個(gè)軟件開(kāi)發(fā)包，通過(guò)強(qiáng)力聯(lián)合DHTML、JavaScript、CSS和XML等技術(shù)，能生成高度交互的互聯(lián)網(wǎng)應(yīng)用程序，成為桌面應(yīng)用程序的強(qiáng)有力對(duì)手常見(jiàn)的AJAX框架AJAX框架

BackBase，2003年發(fā)布，網(wǎng)址是：，是一個(gè)全面的瀏覽器端框架，支持豐富的瀏覽器功能以及與.NET和Java的集成常見(jiàn)的AJAX框架AJAX框架FlashJavaScript集成包，網(wǎng)址是：/doku.php?id=flashjs，允許JavaScript和Flash內(nèi)容的集成常見(jiàn)的AJAX框架AJAX框架GoogleAJAXSLT，2005年發(fā)布，網(wǎng)址是：http://goog-AJAX/，是一個(gè)Javascript框架，用來(lái)執(zhí)行XSLT轉(zhuǎn)換以及XPath查詢常見(jiàn)的AJA