1、Ajax定義:
Ajax(Asynchronous JavaScript and XML:異步...)是多種技術(shù)的綜合,包括:JavaScript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest。
其中,使用XHTML和CSS標(biāo)準(zhǔn)化呈現(xiàn),使用DOM進(jìn)行動態(tài)顯示和交互,使用XML和XSTL進(jìn)行數(shù)據(jù)交換和處理,使用XMLHttpRequest進(jìn)行異步數(shù)據(jù)讀取,使用JavaScript綁定和處理數(shù)據(jù)。 2、Ajax的典型應(yīng)用:
1)數(shù)據(jù)校驗:判斷用戶注冊時用戶名的唯一性
2)按需讀取數(shù)據(jù):級聯(lián)菜單。先讀取并顯示一級菜單,然后根據(jù)用戶的選擇,讀取并加載下級菜單
3)讀取外部數(shù)據(jù):可以方便的讀取XML文檔、RSS文檔等數(shù)據(jù),實現(xiàn)數(shù)據(jù)整合或開發(fā)應(yīng)用程序
3、Ajax的缺陷:
1)IE5.0、NetScape7以上版本
2)后退按鈕失效
3)因為Ajax是無刷新顯示數(shù)據(jù),用戶可能會沒有注意到數(shù)據(jù)的更新,需要在明顯的位置提示用戶數(shù)據(jù)已經(jīng)更新
4、Ajax應(yīng)用到的技術(shù):
1)XMLHttpRequest:
XMLHttpRequest是XMLHTTP組件對象,通過XMLHttpRequest對象,Ajax可以只同數(shù)據(jù)庫進(jìn)行數(shù)據(jù)層面上的交換,而不用刷新頁面。
XMLHttpRequest對象的方法:
abort() 停止當(dāng)前請求
getAllReponseHeaders() 作為字符串返回完整的headers
getResponseHeader("heaserLabel") 作為字符串返回單個的header標(biāo)簽
open("method","Url",[,asyncFlag,...]) 設(shè)置未決的請求的目標(biāo)Url,方法和其他參數(shù)
send(content) 發(fā)送請求
setRequestHeader("Label","Value") 設(shè)置header,并和請求一起發(fā)送
XMLHttpRequest對象的屬性:
onreadystatechange 狀態(tài)改變的事件觸發(fā)器
readyState 對象狀態(tài):0,未初始化;1,讀取中;2,已讀取;3,交互中;4,完成
responseText 服務(wù)器進(jìn)程返回數(shù)據(jù)的文本版本
responseXML 服務(wù)器進(jìn)程返回數(shù)據(jù)的兼容DOM的XML文檔對象
status 服務(wù)器返回的狀態(tài)代碼,如:404,文件未找到;200,成功
statusText 服務(wù)器返回的狀態(tài)的文本信息
2)JavaScript:
操作XMLHttpRequest和數(shù)據(jù)打交道
3)DOM
DOM(Document Object Model)是提供給HTML和XML使用的一組API,提供了文件的表達(dá)結(jié)構(gòu),并可以利用它改變其中的內(nèi)容和可見物。教本語言通過DOM才可以跟頁面進(jìn)行交互。
4)XML:
XML(Extensible Markup Language)可規(guī)范定義結(jié)構(gòu)化數(shù)據(jù)
5、Ajax開發(fā)框架:
Ajax也是遵循Requst/Server模式,基本流程為:對象初始化->發(fā)送請求->服務(wù)器接受->服務(wù)器返回->客戶端接受->修改客戶端頁面顯示。只不過這個過程是異步的。
A:初始化對象,并發(fā)出XMLHttpRequest對象
if(window.XMLHttpRequest)
{ //Mozilla,Safari,...
http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');
}
else if(window.ActiveXObject)
{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
http_request.overrideMimeType('text/xml');
}
B:指定相應(yīng)處理函數(shù)
指定服務(wù)器返回信息時客戶端的處理方式,只需要將處理函數(shù)名稱賦給XMLHttpRequest對象的onreadystatechange屬性即可。如:
http_request.onreadystatechange = processRequst;
注:函數(shù)名不加括號,且不指定參數(shù)。也可使用JavaScript即時定義函數(shù)的方式。如:
http_request.onreadystatechange = function()
{};
C:發(fā)出HTTP請求
調(diào)用XMLHttpRequest對象的open和send方法。如:
http_request.open('Get','http://www.***.com/test.asp',true);
http_request.send(null);
注:第一參數(shù)為HTTP請求的方法,為Get、Post或Head
第二個參數(shù)為目標(biāo)Url。這個Url只能是同網(wǎng)域的,否則會提示“沒有權(quán)限”。目標(biāo)頁面處理XMLHttpRequest和普通的HTTP請求完全一樣。
第三個參數(shù)指定在等待服務(wù)器返回信息的時間內(nèi)是否繼續(xù)執(zhí)行。true,不會繼續(xù)執(zhí)行,默認(rèn)為true
如果要傳文件或Post內(nèi)容給服務(wù)器,必須先調(diào)用serRequestHeader方法,修改Mime類別,如下:
http_request.serRequestHeader("Content-Type","application/x-www-form-unlencoded");。此時,資料將以查詢字符串的形式列出,作為send 的參數(shù)。
D:處理服務(wù)器返回信息
1)判斷readyState的值,如果為4,代表服務(wù)器已經(jīng)傳回了所有的信息。
if(http_request.readyState==4)
{
//處理數(shù)據(jù)
}
else
{
//信息沒有返回,繼續(xù)等待
}
2)判斷返回的HTTP代碼,保證頁面沒有錯誤
if(http_request.status==200)
{
//數(shù)據(jù)處理
}
else
{
//頁面有問題
}
3)XMLHttpRequest返回信息的處理方式:
(1)responseText:將傳回的信息當(dāng)字符串使用
(2)responseXML:將傳回的信息當(dāng)XML使用,可以使用DOM處理