ajax課件 很好的課件

1、高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 北京傳智播客教育 AJAXAJAX 講師：馮威講師：馮威高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 同步交互和異步交互同步交互和異步交互 舉個(gè)例子：普通舉個(gè)例子：普通B/S模式模式(同步同步) AJAX技術(shù)技術(shù)(異步異步) * 同步：提交請(qǐng)求-等待服務(wù)器處理-處理完畢返回 這個(gè)期間客戶端瀏覽器不能干任何事 * 異步: 請(qǐng)求通過(guò)事件觸發(fā)-服務(wù)器處理（這時(shí)瀏覽器仍然可以作其他事情）-處理完畢 同步是指：發(fā)送方發(fā)出數(shù)據(jù)后，等接收方發(fā)回響應(yīng)以后才發(fā)下一個(gè) 數(shù)據(jù)包的通訊方式。 異步是指：發(fā)送方發(fā)出數(shù)據(jù)后，

2、不等接收方發(fā)回響應(yīng)，接著發(fā)送下 個(gè)數(shù)據(jù)包的通訊方式 易懂的理解易懂的理解: 異步傳輸異步傳輸: 你傳輸吧，我去做我的事了，傳輸完了告訴我一聲你傳輸吧，我去做我的事了，傳輸完了告訴我一聲 同步傳輸同步傳輸: 你現(xiàn)在傳輸，我要親眼看你傳輸完成，才去做別的事你現(xiàn)在傳輸，我要親眼看你傳輸完成，才去做別的事 高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 什么是AjaxlAjax的技術(shù)的產(chǎn)生AjaxAjax被認(rèn)為是被認(rèn)為是(Asynchronous JavaScript and (Asynchronous JavaScript and XMLXML的縮寫(xiě)）。現(xiàn)在，允許瀏覽器與服務(wù)

3、器通信的縮寫(xiě)）?，F(xiàn)在，允許瀏覽器與服務(wù)器通信而無(wú)須刷新當(dāng)前頁(yè)面的技術(shù)都被叫做而無(wú)須刷新當(dāng)前頁(yè)面的技術(shù)都被叫做Ajax.Ajax.高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 AJAX案例之google suggest 高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 AJAX案例之Google Maps高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 什么是AjaxlAjax：一種不用刷新整個(gè)頁(yè)面便可與服務(wù)器通訊的辦法不用刷新整個(gè)頁(yè)面便可與服務(wù)器通訊的辦法圖1 Web的傳統(tǒng)模型?？蛻舳讼蚍?wù)器發(fā)送一個(gè)請(qǐng)求，服務(wù)器返回整個(gè)頁(yè)面

4、，如此反復(fù)圖2 在Ajax模型中，數(shù)據(jù)在客戶端與數(shù)據(jù)在客戶端與服務(wù)器之間獨(dú)立傳輸。服務(wù)器不再返服務(wù)器之間獨(dú)立傳輸。服務(wù)器不再返回整個(gè)頁(yè)面回整個(gè)頁(yè)面高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 什么是Ajaxl不用刷新整個(gè)頁(yè)面便可與服務(wù)器通訊的辦法：FlashJava applet框架：如果使用一組框架構(gòu)造了一個(gè)網(wǎng)頁(yè)，可以只更新其中一個(gè)框架，而不必驚動(dòng)整個(gè)頁(yè)面隱藏的iframeXMLHttpRequest：該對(duì)象是對(duì) JavaScript 的一個(gè)擴(kuò)展，可使網(wǎng)頁(yè)與服務(wù)器進(jìn)行通信。是創(chuàng)建 Ajax 應(yīng)用的最佳選擇。實(shí)際上通常把實(shí)際上通常把 Ajax 當(dāng)成當(dāng)成 XMLHttp

5、Request 對(duì)象的代名詞對(duì)象的代名詞 高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 Ajax的工作原理lAjax的核心是JavaScript對(duì)象XmlHttpRequest。 該對(duì)象在Internet Explorer 5中首次引入，它是一種支持異步請(qǐng)求的技術(shù)。簡(jiǎn)而言之，XmlHttpRequest使您可以使用JavaScript向服務(wù)器提出請(qǐng)求并處理響應(yīng)，而不阻塞用戶。高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 AjaxAjax的工作原理的工作原理lAJAX采用異步交互過(guò)程。AJAX在用戶與服務(wù)器之間引入一個(gè)中間媒介，從而消除了網(wǎng)絡(luò)交

6、互過(guò)程中的處理等待處理等待缺點(diǎn)。l用戶的瀏覽器在執(zhí)行任務(wù)時(shí)即裝載了用戶的瀏覽器在執(zhí)行任務(wù)時(shí)即裝載了AJAX引擎。引擎。AJAX引擎用引擎用JavaScript語(yǔ)言編寫(xiě)，通常藏在一個(gè)隱藏的框架中。它負(fù)責(zé)編譯語(yǔ)言編寫(xiě)，通常藏在一個(gè)隱藏的框架中。它負(fù)責(zé)編譯用戶界面及與服務(wù)器之間的交互。用戶界面及與服務(wù)器之間的交互。lAJAX引擎允許用戶與應(yīng)用軟件之間的交互過(guò)程異步進(jìn)行，獨(dú)立引擎允許用戶與應(yīng)用軟件之間的交互過(guò)程異步進(jìn)行，獨(dú)立于用戶與網(wǎng)絡(luò)服務(wù)器間的交流于用戶與網(wǎng)絡(luò)服務(wù)器間的交流?，F(xiàn)在，可以用Javascript調(diào)用AJAX引擎來(lái)代替產(chǎn)生一個(gè)HTTP的用戶動(dòng)作，內(nèi)存中的數(shù)據(jù)編輯、頁(yè)面導(dǎo)航、數(shù)據(jù)校驗(yàn)這些不需

7、要重新載入整個(gè)頁(yè)面的需求可以交給AJAX來(lái)執(zhí)行。 l使用AJAX，可以為JSP、開(kāi)發(fā)人員、終端用戶帶來(lái)可見(jiàn)的便捷： 用戶界面AJAX引擎服務(wù)器用戶界面服務(wù)器高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 AJAXAJAX包含的技術(shù)包含的技術(shù) AJAX:(Asynchronous JavaScript and XML)并不是一項(xiàng)新技術(shù)并不是一項(xiàng)新技術(shù), ,其實(shí)是多種技術(shù)的綜合，包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.服務(wù)器端語(yǔ)言服務(wù)器端語(yǔ)言：服務(wù)器需要具備向?yàn)g覽器發(fā)送特定信息的能力。AjaxAjax與服務(wù)器端語(yǔ)言無(wú)關(guān)與服

8、務(wù)器端語(yǔ)言無(wú)關(guān)。XMLXML (eXtensible Markup Language，可擴(kuò)展標(biāo)記語(yǔ)言) 是一種描述數(shù)據(jù)的格式。AJAX AJAX 程序需要某種格式化的格式來(lái)在服務(wù)器和客戶端之間程序需要某種格式化的格式來(lái)在服務(wù)器和客戶端之間傳遞信息，傳遞信息，XML XML 是其中的一種選擇是其中的一種選擇XHTMLXHTML（eXtended Hypertext Markup Language,使用擴(kuò)展超媒體標(biāo)記語(yǔ)言）和 CSSCSS（Cascading Style Sheet,級(jí)聯(lián)樣式單）標(biāo)準(zhǔn)化呈現(xiàn)；標(biāo)準(zhǔn)化呈現(xiàn)；DOMDOM（Document Object Model,文檔對(duì)象模型）實(shí)現(xiàn)動(dòng)態(tài)

9、顯示和交互；實(shí)現(xiàn)動(dòng)態(tài)顯示和交互；使用XMLHTTP組件XMLHttpRequestXMLHttpRequest對(duì)象對(duì)象進(jìn)行異步數(shù)據(jù)讀取異步數(shù)據(jù)讀取使用JavaScriptJavaScript綁定和處理所有數(shù)據(jù)綁定和處理所有數(shù)據(jù)高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 AJAXAJAX的缺陷的缺陷 AJAX不是完美的技術(shù)。也存在缺陷不是完美的技術(shù)。也存在缺陷：1 AJAX大量使用了Javascript和AJAX引擎，而這個(gè)取決于瀏覽器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla雖然也支持AJAX，但是提供XMLH

10、ttpRequest的方式不一樣。所以，使用AJAX的程序必須測(cè)試針對(duì)各個(gè)瀏覽器的兼容性。 2 AJAX更新頁(yè)面內(nèi)容的時(shí)候并沒(méi)有刷新整個(gè)頁(yè)面，因此，網(wǎng)頁(yè)的后退功能是失效的；有的用戶還經(jīng)常搞不清楚現(xiàn)在的數(shù)據(jù)是舊的還是已經(jīng)更新過(guò)的。這個(gè)就需要在明顯位置提醒用戶“數(shù)據(jù)已更新”。 3 對(duì)流媒體的支持沒(méi)有FLASH、Java Applet好。 4 一些手持設(shè)備（如手機(jī)、PDA等）現(xiàn)在還不能很好的支持Ajax。高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 XMLHttpRequestXMLHttpRequest對(duì)象對(duì)象lXMLHttpRequest對(duì)象對(duì)象XMLHttpReque

11、st是XMLHTTP組件的對(duì)象，通過(guò)這個(gè)對(duì)象，AJAX可以像桌面應(yīng)用程序一樣只同服務(wù)器進(jìn)行數(shù)據(jù)層面的交換，而不用每次都刷新界面，也不用每次將數(shù)據(jù)處理的工作都交給服務(wù)器來(lái)做；這樣既減輕了服務(wù)器負(fù)擔(dān)又加快了響應(yīng)速度、縮短了用戶等待的時(shí)間。 lXMLHttpRequest最早是在IE5中以ActiveX組件的形式實(shí)現(xiàn)的。非W3C標(biāo)準(zhǔn).l創(chuàng)建XMLHttpRequest對(duì)象（由于非標(biāo)準(zhǔn)所以實(shí)現(xiàn)方法不統(tǒng)一由于非標(biāo)準(zhǔn)所以實(shí)現(xiàn)方法不統(tǒng)一）Internet Explorer把XMLHttpRequest實(shí)現(xiàn)為一個(gè)ActiveX對(duì)象其他瀏覽器（Firefox、Safari、Opera）把它實(shí)現(xiàn)為一個(gè)本地的Jav

12、aScript對(duì)象。XMLHttpRequest在不同瀏覽器上的實(shí)現(xiàn)是兼容的在不同瀏覽器上的實(shí)現(xiàn)是兼容的，所以可以用同樣的方式訪問(wèn)XMLHttpRequest實(shí)例的屬性和方法，而不論這個(gè)實(shí)例創(chuàng)建的方法是什么。高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 XMLHttpRequestXMLHttpRequest對(duì)象初始化對(duì)象初始化function createXmlHttpRequest() var xmlHttp; try /Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); catch (e) try

13、/Internet Explorer xmlHttp=new ActiveXObject(Msxml2.XMLHTTP); catch (e) try xmlHttp=new ActiveXObject(Microsoft.XMLHTTP); catch (e) return xmlHttp; 高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 XMLHttpRequestXMLHttpRequest對(duì)象方法對(duì)象方法方法 描述 abort() 停止當(dāng)前請(qǐng)求停止當(dāng)前請(qǐng)求 getAllResponseHeaders() 把把http請(qǐng)求的所有響應(yīng)首部作為鍵請(qǐng)求的所有響應(yīng)首部作為

14、鍵/值對(duì)返回值對(duì)返回getResponseHeader(headerLabel) 返回指定首部的串值返回指定首部的串值open(“method”,”url”) 建立對(duì)服務(wù)器的調(diào)用，建立對(duì)服務(wù)器的調(diào)用，method參數(shù)可以是參數(shù)可以是GET,POST。url參數(shù)可以是相對(duì)參數(shù)可以是相對(duì)URL或絕對(duì)或絕對(duì)URL。這個(gè)方法還包括。這個(gè)方法還包括3個(gè)可選個(gè)可選參數(shù)。參數(shù)。 send(content) 向服務(wù)器發(fā)送請(qǐng)求向服務(wù)器發(fā)送請(qǐng)求 setRequestHeader(label, value) 把指定首部設(shè)置為所提供的值。在設(shè)置任何首部之前必須把指定首部設(shè)置為所提供的值。在設(shè)置任何首部之前必須先調(diào)用先

15、調(diào)用open() 高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 XMLHttpRequestXMLHttpRequest對(duì)象屬性對(duì)象屬性高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 發(fā)送請(qǐng)求發(fā)送請(qǐng)求- -方法和屬性介紹方法和屬性介紹l利用XMLHttpRequest 實(shí)例與服務(wù)器進(jìn)行通信包含以下3個(gè)關(guān)鍵部分：onreadystatechange 事件處理函數(shù)open 方法send 方法 高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 發(fā)送請(qǐng)求發(fā)送請(qǐng)求- -方法和屬性介紹方法和屬性介紹lonreadystatechang

16、e:該事件處理函數(shù)由服務(wù)器觸發(fā)，而不是用戶該事件處理函數(shù)由服務(wù)器觸發(fā)，而不是用戶在 Ajax 執(zhí)行過(guò)程中，服務(wù)器會(huì)通知客戶端當(dāng)前的通信狀態(tài)。這依靠更新 XMLHttpRequest 對(duì)象的 readyState 來(lái)實(shí)現(xiàn)。改改變變 readyState 屬性是服務(wù)器對(duì)客戶端連接操作的一種方式。屬性是服務(wù)器對(duì)客戶端連接操作的一種方式。每次每次 readyState 屬性的改變都會(huì)觸發(fā)屬性的改變都會(huì)觸發(fā) readystatechange事事件件高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 發(fā)送請(qǐng)求發(fā)送請(qǐng)求- -方法和屬性介紹方法和屬性介紹lopen(method, url,

17、 asynch)XMLHttpRequest 對(duì)象的對(duì)象的 open 方法允許程序員用一個(gè)方法允許程序員用一個(gè)Ajax調(diào)用向服務(wù)器發(fā)送調(diào)用向服務(wù)器發(fā)送請(qǐng)求請(qǐng)求。method：請(qǐng)求類(lèi)型，類(lèi)似：請(qǐng)求類(lèi)型，類(lèi)似 “GET”或或”P(pán)OST”的字符串。若只想從服務(wù)器檢索的字符串。若只想從服務(wù)器檢索一個(gè)文件，而不需要發(fā)送任何數(shù)據(jù)，使用一個(gè)文件，而不需要發(fā)送任何數(shù)據(jù)，使用GET(可以在可以在GET請(qǐng)求里通過(guò)附加在請(qǐng)求里通過(guò)附加在URL上的查詢字符串來(lái)發(fā)送數(shù)據(jù)，不過(guò)數(shù)據(jù)大小限制為上的查詢字符串來(lái)發(fā)送數(shù)據(jù)，不過(guò)數(shù)據(jù)大小限制為2000個(gè)字符個(gè)字符)。若需要向。若需要向服務(wù)器發(fā)送數(shù)據(jù)，用服務(wù)器發(fā)送數(shù)據(jù)，用POST。

18、在某些情況下，有些瀏覽器會(huì)把多個(gè)在某些情況下，有些瀏覽器會(huì)把多個(gè)XMLHttpRequest請(qǐng)求的結(jié)果緩存在同一請(qǐng)求的結(jié)果緩存在同一個(gè)個(gè)URL。如果對(duì)每個(gè)請(qǐng)求的響應(yīng)不同，這就會(huì)帶來(lái)不好的結(jié)果。把當(dāng)前時(shí)間戳。如果對(duì)每個(gè)請(qǐng)求的響應(yīng)不同，這就會(huì)帶來(lái)不好的結(jié)果。把當(dāng)前時(shí)間戳追加到追加到URL的最后，就能確保的最后，就能確保URL的惟一性，從而避免瀏覽器緩存結(jié)果的惟一性，從而避免瀏覽器緩存結(jié)果。 url：路徑字符串，指向你所請(qǐng)求的服務(wù)器上的那個(gè)文件?？梢允墙^對(duì)路徑或相：路徑字符串，指向你所請(qǐng)求的服務(wù)器上的那個(gè)文件?？梢允墙^對(duì)路徑或相對(duì)路徑。對(duì)路徑。asynch：表示請(qǐng)求是否要異步傳輸，默認(rèn)值為：表示請(qǐng)求

19、是否要異步傳輸，默認(rèn)值為true(異步異步)。指定。指定true，在讀取后，在讀取后面的腳本之前，不需要等待服務(wù)器的相應(yīng)。指定面的腳本之前，不需要等待服務(wù)器的相應(yīng)。指定false，當(dāng)腳本處理過(guò)程經(jīng)過(guò)這，當(dāng)腳本處理過(guò)程經(jīng)過(guò)這點(diǎn)時(shí)，會(huì)停下來(lái)，一直等到點(diǎn)時(shí)，會(huì)停下來(lái)，一直等到Ajax請(qǐng)求執(zhí)行完畢再繼續(xù)執(zhí)行請(qǐng)求執(zhí)行完畢再繼續(xù)執(zhí)行。var url = GetAndPostExample?timeStamp= + new Date().getTime(); 高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 發(fā)送請(qǐng)求發(fā)送請(qǐng)求- -方法和屬性介紹方法和屬性介紹lsend(data)：op

20、en 方法定義了 Ajax 請(qǐng)求的一些細(xì)節(jié)。send 方法可為已經(jīng)待命的請(qǐng)求發(fā)送指令方法可為已經(jīng)待命的請(qǐng)求發(fā)送指令data：將要傳遞給服務(wù)器的字符串。若選用的是若選用的是 GET 請(qǐng)求，則不會(huì)發(fā)送任何數(shù)據(jù)，請(qǐng)求，則不會(huì)發(fā)送任何數(shù)據(jù)， 給給 send 方法傳遞方法傳遞 null 即可即可：request.send(null);當(dāng)向send()方法提供參數(shù)時(shí)，要確保open()中指定的方法是POST，如果沒(méi)有數(shù)據(jù)作為請(qǐng)求體的一部分發(fā)送，則使用null.完整的完整的 Ajax 的的 GET 請(qǐng)求示例：請(qǐng)求示例：使用get請(qǐng)求時(shí)send方法參數(shù)時(shí)null,如果傳值的話，服務(wù)器也接受不到高級(jí)軟件人才實(shí)作

21、培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 發(fā)送請(qǐng)求發(fā)送請(qǐng)求- -方法和屬性介紹方法和屬性介紹lsetRequestHeader(header,value)當(dāng)瀏覽器向服務(wù)器請(qǐng)求頁(yè)面時(shí)，它會(huì)伴隨這個(gè)請(qǐng)求發(fā)送一組首部信息。這些首部信息是一系列描述請(qǐng)求的元數(shù)據(jù)(metadata)。首部信息用來(lái)聲明一個(gè)請(qǐng)求是首部信息用來(lái)聲明一個(gè)請(qǐng)求是 GET 還是還是 POST。Ajax 請(qǐng)求中，發(fā)送首部信息的工作可以由 setRequestHeader完成參數(shù)header： 首部的名字; 參數(shù)value：首部的值。如果用如果用 POST 請(qǐng)求向服務(wù)器發(fā)送數(shù)據(jù)，需要將請(qǐng)求向服務(wù)器發(fā)送數(shù)據(jù)，需要將 “Con

22、tent-type” 的首部設(shè)置為的首部設(shè)置為 “application/x-www-form-urlencoded”.它會(huì)告知服務(wù)器正在發(fā)送數(shù)據(jù)，并且數(shù)據(jù)已它會(huì)告知服務(wù)器正在發(fā)送數(shù)據(jù)，并且數(shù)據(jù)已經(jīng)符合經(jīng)符合URL編碼了。編碼了。該方法必須在該方法必須在open()之后才能調(diào)用之后才能調(diào)用完整的完整的 Ajax 的的 POST 請(qǐng)求示例：請(qǐng)求示例：高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 接收接收- -方法和屬性介紹方法和屬性介紹l用 XMLHttpRequest 的方法可向服務(wù)器發(fā)送請(qǐng)求。在 Ajax 處理過(guò)程中，XMLHttpRequest 的如下屬性可被服務(wù)

23、器更改：readyStatestatusresponseTextresponseXML高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 接收接收- -方法和屬性介紹方法和屬性介紹lreadyStatereadyState 屬性表示表示Ajax請(qǐng)求的當(dāng)前狀態(tài)請(qǐng)求的當(dāng)前狀態(tài)。它的值用數(shù)字代表。0 代表未初始化。 還沒(méi)有調(diào)用 open 方法1 代表正在加載。 open 方法已被調(diào)用，但 send 方法還沒(méi)有被調(diào)用2 代表已加載完畢。send 已被調(diào)用。請(qǐng)求已經(jīng)開(kāi)始3 代表交互中。服務(wù)器正在發(fā)送響應(yīng)4 代表完成。響應(yīng)發(fā)送完畢代表完成。響應(yīng)發(fā)送完畢每次每次 readyState 值

24、的改變，都會(huì)觸發(fā)值的改變，都會(huì)觸發(fā) readystatechange 事件事件。如果把 onreadystatechange 事件處理函數(shù)賦給一個(gè)函數(shù)，那么每次 readyState 值的改變都會(huì)引發(fā)該函數(shù)的執(zhí)行。readyState 值的變化會(huì)因?yàn)g覽器的不同而有所差異。但是，當(dāng)請(qǐng)但是，當(dāng)請(qǐng)求結(jié)束的時(shí)候，每個(gè)瀏覽器都會(huì)把求結(jié)束的時(shí)候，每個(gè)瀏覽器都會(huì)把 readyState 的值統(tǒng)一設(shè)為的值統(tǒng)一設(shè)為 4高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 接收接收- -方法和屬性介紹方法和屬性介紹lstatus服務(wù)器發(fā)送的每一個(gè)響應(yīng)也都帶有首部信息。三位數(shù)的狀態(tài)碼是服務(wù)器發(fā)送的

25、響應(yīng)中最重要的首部信息，并且屬于超文本傳輸協(xié)議中的一部分。常用狀態(tài)碼及其含義：404 沒(méi)找到頁(yè)面(not found)403 禁止訪問(wèn)(forbidden)500 內(nèi)部服務(wù)器出錯(cuò)(internal service error)200 一切正常(ok)304 沒(méi)有被修改(not modified)(服務(wù)器返回304狀態(tài)，表示源文件沒(méi)有被修改 )在在 XMLHttpRequest 對(duì)象中，服務(wù)器發(fā)送的狀態(tài)碼都保存對(duì)象中，服務(wù)器發(fā)送的狀態(tài)碼都保存在在 status 屬性里。通過(guò)把這個(gè)值和屬性里。通過(guò)把這個(gè)值和 200 或或 304 比較，可以比較，可以確保服務(wù)器是否已發(fā)送了一個(gè)成功的響應(yīng)確保服務(wù)器是

26、否已發(fā)送了一個(gè)成功的響應(yīng)高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 接收接收- -方法和屬性介紹方法和屬性介紹lresponseTextXMLHttpRequest 的 responseText 屬性包含了從服務(wù)器發(fā)送的數(shù)據(jù)包含了從服務(wù)器發(fā)送的數(shù)據(jù)。它是一個(gè)HTML,XML或普通文本，這取決于服務(wù)器發(fā)送的內(nèi)容。當(dāng) readyState 屬性值變成 4 時(shí), responseText 屬性才可用，表明 Ajax 請(qǐng)求已經(jīng)結(jié)束。高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 接收接收- -方法和屬性介紹方法和屬性介紹lresponseXML如果服

27、務(wù)器返回的是如果服務(wù)器返回的是 XML， 那么數(shù)據(jù)將儲(chǔ)存在那么數(shù)據(jù)將儲(chǔ)存在 responseXML 屬屬性中。性中。只用服務(wù)器發(fā)送了帶有正確首部信息的數(shù)據(jù)時(shí)，只用服務(wù)器發(fā)送了帶有正確首部信息的數(shù)據(jù)時(shí)， responseXML 屬屬性才是可用的。性才是可用的。 MIME 類(lèi)型必須為類(lèi)型必須為 text/xml高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 AJAXAJAX開(kāi)發(fā)框架開(kāi)發(fā)框架 AJAX實(shí)質(zhì)上也是遵循Request/Server模式，所以這個(gè)框架基本的流程是：l對(duì)象初始化l發(fā)送請(qǐng)求l服務(wù)器接收l(shuí)服務(wù)器返回l客戶端接收l(shuí)修改客戶端頁(yè)面內(nèi)容。只不過(guò)這個(gè)過(guò)程是異步的。

28、高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 A A 初始化初始化XMLHttpRequestXMLHttpRequest對(duì)象對(duì)象function createXmlHttpRequest() var xmlHttp; try /Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); catch (e) try /Internet Explorer xmlHttp=new ActiveXObject(Msxml2.XMLHTTP); catch (e) try xmlHttp=new ActiveXObjec

29、t(Microsoft.XMLHTTP); catch (e) return xmlHttp; 高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 B B、 指定響應(yīng)處理函數(shù)指定響應(yīng)處理函數(shù)l指定當(dāng)服務(wù)器返回信息時(shí)客戶端的處理方式。只要將相應(yīng)的處理指定當(dāng)服務(wù)器返回信息時(shí)客戶端的處理方式。只要將相應(yīng)的處理函數(shù)名稱賦給函數(shù)名稱賦給XMLHttpRequest對(duì)象的對(duì)象的onreadystatechange屬屬性就可以了性就可以了.比如：比如： XMLHttpReq.onreadystatechange = processResponse;l注意注意:這個(gè)函數(shù)名稱不加括號(hào)，不指定

30、參數(shù)。也可以用這個(gè)函數(shù)名稱不加括號(hào)，不指定參數(shù)。也可以用Javascript函數(shù)直接量方式定義響應(yīng)函數(shù)。比如：函數(shù)直接量方式定義響應(yīng)函數(shù)。比如： XMLHttpReq.onreadystatechange = function() ;/ 處理返回信息的函數(shù)function processResponse() 高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 C C、發(fā)出、發(fā)出HTTPHTTP請(qǐng)求請(qǐng)求 l向服務(wù)器發(fā)出向服務(wù)器發(fā)出HTTP請(qǐng)求了。這一步調(diào)用請(qǐng)求了。這一步調(diào)用XMLHttpRequest對(duì)象的對(duì)象的open和和send方法。方法。 http_request.op

31、en(GET, /some.file, true); http_request.send(null)l按照順序，按照順序，open調(diào)用完畢之后要調(diào)用調(diào)用完畢之后要調(diào)用send方法。方法。send的參數(shù)如的參數(shù)如果是以果是以Post方式發(fā)出的話，可以是任何想傳給服務(wù)器的內(nèi)容。方式發(fā)出的話，可以是任何想傳給服務(wù)器的內(nèi)容。l注意:如果要傳文件或者Post內(nèi)容給服務(wù)器，必須先調(diào)用setRequestHeader方法，修改MIME類(lèi)別。如下：lhttp_request.setRequestHeader(“Content-Type”,”application/x-

32、www-form-urlencoded”); 這時(shí)資料則以查詢字符串的形式列出，作為send的參數(shù)，例如： name=value&anothername=othervalue&so=on高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 代碼l/發(fā)送請(qǐng)求lfunction sendRequest()l/獲取文本框的值lvar chatMsg=input.value;lvar url=chatServlet.do?charMsg=+chatMsg;l/建立對(duì)服務(wù)器的調(diào)用lXMLHttpReq.open(POST,url,true);l/設(shè)置MiME類(lèi)別,如果用

33、 POST 請(qǐng)求向服務(wù)器發(fā)送數(shù)據(jù)，l/需要將Content-type 的首部設(shè)置為 application/x-www-form-urlencoded.l/它會(huì)告知服務(wù)器正在發(fā)送數(shù)據(jù)，并且數(shù)據(jù)已經(jīng)符合URL編碼了。lXMLHttpReq.setRequestHeader(Content-Type, application/x-www-form-urlencoded);l/狀態(tài)改變的事件觸發(fā)器,客戶端的狀態(tài)改變會(huì)觸發(fā)readystatechange事件,l/onreadystatechange會(huì)調(diào)用相應(yīng)的事件處理函數(shù)lXMLHttpReq.onreadystatechange=processRe

34、sponse;l/發(fā)送數(shù)據(jù)lXMLHttpReq.send(null);l高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 D D、處理服務(wù)器返回的信息、處理服務(wù)器返回的信息 處理響應(yīng)處理函數(shù)都應(yīng)該做什么。處理響應(yīng)處理函數(shù)都應(yīng)該做什么。 首先，它要檢查首先，它要檢查XMLHttpRequest對(duì)象的對(duì)象的readyState值，判斷請(qǐng)求目前的狀態(tài)。值，判斷請(qǐng)求目前的狀態(tài)。參照前文的屬性表可以知道，參照前文的屬性表可以知道，readyState值為值為4的時(shí)候，代表服務(wù)器已經(jīng)傳回所有的時(shí)候，代表服務(wù)器已經(jīng)傳回所有的信息，可以開(kāi)始處理信息并更新頁(yè)面內(nèi)容了。如下：的信息，可以開(kāi)

35、始處理信息并更新頁(yè)面內(nèi)容了。如下：if (http_request.readyState = 4) / 信息已經(jīng)返回，可以開(kāi)始處理信息已經(jīng)返回，可以開(kāi)始處理 else / 信息還沒(méi)有返回，等待信息還沒(méi)有返回，等待服務(wù)器返回信息后，還需要判斷返回的服務(wù)器返回信息后，還需要判斷返回的HTTP狀態(tài)碼，確定返回的頁(yè)面沒(méi)有錯(cuò)誤。狀態(tài)碼，確定返回的頁(yè)面沒(méi)有錯(cuò)誤。所有的狀態(tài)碼都可以在所有的狀態(tài)碼都可以在W3C的官方網(wǎng)站上查到。其中，的官方網(wǎng)站上查到。其中，200代表頁(yè)面正常。代表頁(yè)面正常。if (http_request.status = 200) / 頁(yè)面正常，可以開(kāi)始處理信息頁(yè)面正常，可以開(kāi)始處理信息

36、else / 頁(yè)面有問(wèn)題頁(yè)面有問(wèn)題高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 D D、處理服務(wù)器返回的信息、處理服務(wù)器返回的信息lXMLHttpRequest對(duì)成功返回的信息有兩種處理方式：lresponseText：將傳回的信息當(dāng)字符串使用；lresponseXML：將傳回的信息當(dāng)XML文檔使用，可以用DOM處理。 高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 代碼代碼l/處理返回信息的函數(shù)lfunction processResponse()l if(XMLHttpReq.readyState=4) /判斷對(duì)象狀態(tài) 4代表完成l if(

37、XMLHttpReq.status=200) /信息已經(jīng)成功返回，開(kāi)始處理信息l document.getElementById(chatArea).value=XMLHttpReq.responseText;l l 高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 數(shù)據(jù)格式提要l在服務(wù)器端 AJAX 是一門(mén)與語(yǔ)言無(wú)關(guān)的技術(shù)。在業(yè)務(wù)邏輯層使用何種服務(wù)器端語(yǔ)言都可以。l從服務(wù)器端接收數(shù)據(jù)的時(shí)候，那些數(shù)據(jù)必須以瀏覽器能夠理解的格式來(lái)發(fā)送。服務(wù)器端的編程語(yǔ)言只能以如下 3 種格式返回?cái)?shù)據(jù)：XMLJSONHTML高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教

38、育 XMLl優(yōu)點(diǎn)：XML 是一種通用的數(shù)據(jù)格式。不必把數(shù)據(jù)強(qiáng)加到已定義好的格式中，而是要為數(shù)據(jù)自定義合適的標(biāo)記。利用 DOM 可以完全掌控文檔。l缺點(diǎn)：如果文檔來(lái)自于服務(wù)器，就必須得保證文檔含有正確的首部信息。若文檔類(lèi)型不正確，那么 responseXML 的值將是空的。當(dāng)瀏覽器接收到長(zhǎng)的 XML 文件后， DOM 解析可能會(huì)很復(fù)雜高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 JSONlJSON（JavaScript Object Notation）一種簡(jiǎn)單的數(shù)據(jù)格式，比xml更輕巧。JSON是JavaScript原生格式原生格式，這意味著在JavaScript中處理

39、JSON數(shù)據(jù)不需要任何特殊的API或工具包。 lJSON的規(guī)則很簡(jiǎn)單：對(duì)象是一個(gè)無(wú)序的對(duì)象是一個(gè)無(wú)序的“名稱名稱/值值對(duì)對(duì)”集合。一個(gè)對(duì)集合。一個(gè)對(duì)象以象以“”（左括號(hào)）開(kāi)始，（左括號(hào)）開(kāi)始，“”（右括號(hào)）結(jié)束。每個(gè)（右括號(hào)）結(jié)束。每個(gè)“名稱名稱”后跟一個(gè)后跟一個(gè)“:”（冒號(hào)）；（冒號(hào)）；“名稱名稱/值值對(duì)對(duì)”之間使用之間使用“,”（逗號(hào)）分隔（逗號(hào)）分隔。 規(guī)則如下規(guī)則如下: 1）映射用冒號(hào)（“：”）表示。名稱:值 2）并列的數(shù)據(jù)之間用逗號(hào)（“，”）分隔。名稱1:值1,名稱2:值2 3） 映射的集合（對(duì)象）用大括號(hào)（“”）表示。名稱1:值1,名稱2:值2 4） 并列數(shù)據(jù)的集合（數(shù)組）用方括號(hào)

40、(“”)表示。 名稱1:值,名稱2:值2, 名稱1:值,名稱2:值2 5 元素值可具有的類(lèi)型：string, number, object, array, true, false, null 高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 JSON 示例lJSON 用冒號(hào)用冒號(hào)(而不是等號(hào)而不是等號(hào))來(lái)賦值。每一條賦值語(yǔ)句用逗號(hào)分開(kāi)。整個(gè)對(duì)象用大來(lái)賦值。每一條賦值語(yǔ)句用逗號(hào)分開(kāi)。整個(gè)對(duì)象用大括號(hào)封裝起來(lái)。可用大括號(hào)分級(jí)嵌套數(shù)據(jù)。括號(hào)封裝起來(lái)?？捎么罄ㄌ?hào)分級(jí)嵌套數(shù)據(jù)。l對(duì)象描述中存儲(chǔ)的數(shù)據(jù)可以是字符串，數(shù)字或者布爾值。對(duì)象描述也可存儲(chǔ)函對(duì)象描述中存儲(chǔ)的數(shù)據(jù)可以是字符串，數(shù)

41、字或者布爾值。對(duì)象描述也可存儲(chǔ)函數(shù)，那就是對(duì)象的方法。數(shù)，那就是對(duì)象的方法。高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 解析 JSONlJSON 只是一種文本字符串。它被存儲(chǔ)在 responseText 屬性中l(wèi)為了讀取存儲(chǔ)在 responseText 屬性中的 JSON 數(shù)據(jù)，需要根據(jù) JavaScript 的 eval 語(yǔ)句。函數(shù)函數(shù) eval 會(huì)把一個(gè)字符串當(dāng)作它的參會(huì)把一個(gè)字符串當(dāng)作它的參數(shù)數(shù)。然后這個(gè)字符串會(huì)被當(dāng)作然后這個(gè)字符串會(huì)被當(dāng)作 JavaScript 代碼來(lái)執(zhí)行。因?yàn)榇a來(lái)執(zhí)行。因?yàn)?JSON 的字符串就是由的字符串就是由 JavaScript 代

42、碼構(gòu)成的，所以它本身是代碼構(gòu)成的，所以它本身是可執(zhí)行的可執(zhí)行的l代碼實(shí)例：高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 JS處理JSON例子一例子一: var people =firstName: Brett, lastName:McLaughlin, email: brettnewI ; alert(people.firstName); alert(people.lastName); alert(people.email); 高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 JS處理JSON例子二例子二: var people = firstN

43、ame: Brett,email: brettnewI , firstName: Mary,email: marynewI ; alert(people0.firstName); alert(people0.email); alert(people1.firstName); alert(people1.email); 高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 JS處理JSON例子三例子三: var people = programmers: firstName: Brett, email: brettnewI , firstName: Jason, email: ;window.alert(grammers0.firstName);window.alert(grammers1.email); 高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家高級(jí)軟件人才實(shí)作培訓(xùn)專(zhuān)家! !北京傳智播客教育 JS處理JSON例子四例子四: var people = programmers: firs