Ajax執(zhí)行原理講課教案

1、Good is good, but better carries it.精益求精，善益求善。Ajax執(zhí)行原理-Ajax：Asynchronousjavascriptandxml，實現(xiàn)了客戶端與服務(wù)器進行數(shù)據(jù)交流過程。使用技術(shù)的好處是：不用頁面刷新，并且在等待頁面?zhèn)鬏敂?shù)據(jù)的同時可以進行其他操作。這就是異步調(diào)用的很好體現(xiàn)。首先得了解什么是異步和同步的概念。舉個例子：比如你去圖書館借某種書，可惜圖書館此書被借完。這時可以采用兩種做法。第一種做法：在圖書館一直等待，直到有人還書，然后再去吃飯睡覺。第二種做法：直接跟圖書館管理員約定，若是有人還書，直接通知你。你則該忙什么忙什么。到時候會通知你。而第一種

2、做法就是同步的表現(xiàn)，必須等待別人還書（等待服務(wù)器返回信息）才進行其他事情，至死方休。而第二種做法就是異步的表現(xiàn)，不耽誤時間，合理利用時間高效率做事。遇到這種情況，你會采用那種辦法呢？選擇第一種，哈哈，說明你太執(zhí)著啦；選擇第二種，說明你靈活變通，合理安排自己的人生。你自己看著辦吧。那Ajax是如何從瀏覽器發(fā)送Http請求到服務(wù)器呢？這就得使用一個重要的對象XMLHttpRequest。那首先了解一下XMLHttpRequest對象的屬性和方法。主要的屬性：readyState屬性有五個狀態(tài)值。0：是uninitialized，未初始化。已經(jīng)創(chuàng)建了XMLHttpRequest對象但是未初始化。1：

3、是loading，sendforrequestbutnotcalled.已經(jīng)開始準(zhǔn)備好要發(fā)送了。2：是loaded,sendcalled,headersandstatusareavailable。已經(jīng)發(fā)送，但是還沒有收到響應(yīng)。3：是interactive，downloadingresponse,butresponseTextonlypartialset.正在接受響應(yīng)，但是還不完整。4：是completed，finishdownloading.接受響應(yīng)完畢。responseText：服務(wù)器返回的響應(yīng)文本。只有當(dāng)readyState=3的時候才有值，根據(jù)readyState的狀態(tài)值，可以知道，當(dāng)r

4、eadyState=3，返回的響應(yīng)文本不完整，只有readyState=4，完全返回，才能接受全部的響應(yīng)文本。responseXML：responseasDomDocumentobject。響應(yīng)信息是xml，可以解析為Dom對象。status：服務(wù)器的Http狀態(tài)碼，若是200，則表示OK，404，表示為未找到。statusText：服務(wù)器http狀態(tài)碼的文本。比如OK，NotFound。主要的方法：open（method，url，boolean）：打開XMLHttpRequest對象。其中method方法有g(shù)et，post，delete，put。若是查數(shù)據(jù)，從服務(wù)器中得到一定的數(shù)據(jù)，則使用g

5、et。若是直接提交到服務(wù)器中，更新一定的數(shù)據(jù)，則使用post；url是請求資源的地址。第三個參數(shù)表示是否使用異步。默認情況是true，因為Ajax的特點就是異步傳送。若使用同步則false。異步和同步上述已經(jīng)舉例。send（body）：發(fā)送請求Ajax引擎，讓Ajax引擎操作。其中發(fā)送的內(nèi)容可以是需要的參數(shù)，若是沒有參數(shù)，直接send（null）那如何使用Ajax技術(shù)？首先，有客戶端事件觸發(fā)Ajax事件。然后，創(chuàng)建xmlHttpRequest對象，根據(jù)瀏覽器不同，創(chuàng)建的xmlHttpRequest對象不同。用open調(diào)用，用send發(fā)送請求給Ajax引擎。最后，執(zhí)行完畢后，把結(jié)果返回給客戶端。

6、執(zhí)行的流程如下:測試代碼如下：創(chuàng)建xmlHttpRequest對象：functioncreateXMLHttpRequest()/表示當(dāng)前瀏覽器不是ie,如ns,firefoxif(window.XMLHttpRequest)xmlHttp=newXMLHttpRequest();elseif(window.ActiveXObject)xmlHttp=newActiveXObject(Microsoft.XMLHTTP);客戶端事件觸發(fā)：functionvalidate(field)if(trim(field.value).length!=0)/創(chuàng)建XMLHttpRequestcreateXM

7、LHttpRequest();varurl=user_validate.jsp?userId=+trim(field.value)+×tampt=+newDate().getTime();/alert(url);xmlHttp.open(GET,url,true);/方法地址。處理完成后自動調(diào)用，回調(diào)。xmlHttp.onreadystatechange=callback;xmlHttp.send(null);/將參數(shù)發(fā)送到Ajax引擎elsedocument.getElementById(userIdSpan).innerHTML=;結(jié)果返回操作：functioncallback(

8、)alert(xmlHttp.readyState);if(xmlHttp.readyState=4)/Ajax引擎初始化if(xmlHttp.status=200)/http協(xié)議成功/alert(xmlHttp.responseText);document.getElementById(userIdSpan).innerHTML=+xmlHttp.responseText+;elsealert(請求失敗，錯誤碼=+xmlHttp.status);注意：onreadyStateChange事件，當(dāng)readyState狀態(tài)值發(fā)生改變就會觸發(fā)此事件。其中，xmlHttpRequest提交http請求的過程中，readyState歷經(jīng)五個狀態(tài)值（0，1，2，3，4），所以callback函數(shù)中的alert(xmlHttp.readyState)則會不斷輸出1，2，3，4。其中0狀態(tài)不會輸出，因為0狀態(tài)的時候并不執(zhí)行此事件。ps：當(dāng)時在eslipse默認web瀏覽器中