AJAX教程--董偉專

1、高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 AJAXAJAX培訓(xùn)教程實例講解培訓(xùn)教程實例講解作者：董偉專作者：董偉專高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 今天的課題lAJAX簡介lXMLHttpRequest對象l數(shù)據(jù)格式l實現(xiàn)基本的Ajax技術(shù)高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 AJAX簡介lAJAX全稱為“Asynchronous JavaScript and XML”（異步JavaScript和XML），是一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。它使用：使用XHTML+CSS來表示信息； 使用

2、Javascript操作Document Object Model進行動態(tài)顯示及交互； 使用 XML 和 XSLT 進行數(shù)據(jù)交換及相關(guān)操作； 使用 XMLHttpRequest對象與Web服務(wù)器進行異步數(shù)據(jù)交換； 使用 JavaScript 將所有的東西綁定在一起。高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 與傳統(tǒng)的web應(yīng)用比較 圖1 Web的傳統(tǒng)模型。客戶端向服務(wù)器發(fā)送一個請求，服務(wù)器返回整個頁面，如此反復(fù)圖2 在Ajax模型中，數(shù)據(jù)在客戶端與服務(wù)器之間獨立傳輸。服務(wù)器不再返回整個頁面Ajax：一種不用刷新整個頁面便可與服務(wù)器通訊的辦法高級軟件人才實作培訓(xùn)專家高

3、級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 不用刷新整個頁面便可與服務(wù)器通訊的辦法lFlashlJava appletl框架：如果使用一組框架構(gòu)造了一個網(wǎng)頁，可以只更新其中一個框架，而不必驚動整個頁面l隱藏的iframelXMLHttpRequest：該對象是對 JavaScript 的一個擴展，可使網(wǎng)頁與服務(wù)器進行通信。是創(chuàng)建 Ajax 應(yīng)用的最佳選擇。實際上通常把 Ajax 當(dāng)成 XMLHttpRequest 對象的代名詞高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 Ajax工具包l“Ajax并不是一項技術(shù)，它實際上是幾種技術(shù)，每種技術(shù)各盡其職，以一種全新的方式

4、聚合在一起”l服務(wù)器端語言服務(wù)器端語言：服務(wù)器需要具備向瀏覽器發(fā)送特定信息的能力。Ajax與服務(wù)器端語言無關(guān)。lXMLXML (eXtensible Markup Language，可擴展標(biāo)記語言) 是一種描述數(shù)據(jù)的格式。Aajx 程序需要某種格式化的格式來在服務(wù)器和客戶端之間傳遞信息，但 XML 只是其中的一種選擇lXHTMLXHTML（eXtended Hypertext Markup Language,使用擴展超媒體標(biāo)記語言）和 CSSCSS（Cascading Style Sheet,級聯(lián)樣式單）標(biāo)準(zhǔn)化呈現(xiàn)；lDOMDOM（Document Object Model,文檔對象模型）實現(xiàn)

5、動態(tài)顯示和交互；l使用XMLHTTP組件XMLHttpRequestXMLHttpRequest對象進行異步數(shù)據(jù)讀?。籰使用JavaScriptJavaScript綁定和處理所有數(shù)據(jù)。高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 Ajax的工作原理圖xhtmlcssJavaScript高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 Ajax的缺陷lAJAX不是完美的技術(shù)。使用AJAX，它的一些缺陷不得不權(quán)衡一下：l由Javascript和AJAX引擎導(dǎo)致的瀏覽器的兼容l頁面局部刷新，導(dǎo)致后退等功能失效。l對流媒體的支持沒有FLASH、Java

6、Applet好。l一些手持設(shè)備（如手機、PDA等）支持性差。高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 小結(jié)lAjax并非是一個新的技術(shù)或者語言，他只是幾項技術(shù)按一定的方式組合起來，在共同協(xié)作中發(fā)揮各自的作用。老技術(shù)，新技巧。lAjax主要功能特點：JavaScript用戶體驗；CSS樣式定義；DOM組織視圖；XML數(shù)據(jù)異步加載；XMLDocument/XMLHttpRequest。高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 XMLHttpRequest對象lXMLHttpRequest對象的概述lXMLHttpRequest對象的方法和

7、屬性lXMLHttpRequest對象發(fā)送請求基本步驟lAjax簡單請求示例高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 javascript的兩項強大性能lAJAX (異步 javascript 和 XML) 是個新產(chǎn)生的術(shù)語,專為描述javascript的兩項強大性能.這兩項性能在多年來一直被網(wǎng)絡(luò)開發(fā)者所忽略,直到最近Gmail, Google suggest和google Maps的橫空出世才使人們開始意識到其重要性. l這兩項被忽視的性能是: (1)無需重新裝載整個頁面便能向服務(wù)器發(fā)送請求. (2)對XML文檔的解析和處理高級軟件人才實作培訓(xùn)專家高級軟件人才實

8、作培訓(xùn)專家! !北京傳智播客教育 向服務(wù)器發(fā)送請求if (window.XMLHttpRequest) / Mozilla, Safari, . http_request = new XMLHttpRequest(); else if (window.ActiveXObject) / IE http_request = new ActiveXObject(Microsoft.XMLHTTP);高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 XMLHttpRequest的概述lXMLHttpRequest最早是在IE5中以ActiveX組件的形式實現(xiàn)的。非W3C標(biāo)準(zhǔn).l創(chuàng)

9、建XMLHttpRequest對象（由于非標(biāo)準(zhǔn)所以實現(xiàn)方法不統(tǒng)一） (1) Internet Explorer把XMLHttpRequest實現(xiàn)為一個ActiveXActiveX對象。 (2)其他瀏覽器（Firefox、Safari、Opera）把它實現(xiàn)為一個本地的JavaScript對象。 (3) XMLHttpRequest在不同瀏覽器上的實現(xiàn)是兼容的，所以可可以用同樣的方式訪問以用同樣的方式訪問XMLHttpRequestXMLHttpRequest實例的屬性和方法實例的屬性和方法，而不論這個實例創(chuàng)建的方法是什么。高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 創(chuàng)

10、建XMLHttpRequest對象var xmlHttp;function createXMLHttpRequest() if (window.ActiveXObject) xmlHttp = new ActiveXObject(Microsoft.XMLHTTP); else if (window.XMLHttpRequest) xmlHttp = new XMLHttpRequest(); 高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 XMLHttpRequest的方法方法描述abort()停止當(dāng)前請求getAllResponseHeaders()把HTTP請求的

11、所有響應(yīng)首部作為鍵/值對返回getResponseHeader(“header”)返回指定首部的串值open(“method”, “url”)建立對服務(wù)器的調(diào)用。Method參數(shù)可以是GET、POST或PUT.url參數(shù)可以是相對URL或絕對URL。send(content)向服務(wù)器發(fā)送請求setRequestHeader(“header”, “value”)把指定首部設(shè)置為所提供的值。在設(shè)置任何首部之前必須先調(diào)用open()高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 XMLHttpRequest的屬性屬性描述onreadystatechange每個狀態(tài)改變是都會觸

12、發(fā)這個事件處理器，通常會調(diào)用一個javaScript函數(shù)readyState請求的狀態(tài)，有5個可取值：0=未初始化、1=正在加載、2=已經(jīng)加載、3=交互中、4=完成。responseText服務(wù)器的響應(yīng)，表示為一個串。responseXML服務(wù)器的響應(yīng)，表示為XML。這個對象可以解析為DOM對象。status服務(wù)器的HTTP狀態(tài)碼（200對應(yīng)OK、404對應(yīng)NotFount、等）statusTextHTTP狀態(tài)碼的相應(yīng)文本（OK或NotFount等）高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 發(fā)送請求l利用XMLHttpRequest實例與服務(wù)器進行通信包含以下3個

13、關(guān)鍵部分： (1) onreadystatechangereadystatechange 事件處理函數(shù) (2) open 方法 (3) send 方法高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 onreadystatechange:l該事件處理函數(shù)由服務(wù)器觸發(fā)由服務(wù)器觸發(fā)，而不是用戶l在 Ajax 執(zhí)行過程中，服務(wù)器會通知客戶端當(dāng)前的通信狀態(tài)。這依靠更新 XMLHttpRequest 對象的 readyState 來實現(xiàn)。改變改變 readyStatereadyState 屬性是服務(wù)器對客戶端連接操作屬性是服務(wù)器對客戶端連接操作的一種方式。每次的一種方式。每次 re

14、adyStatereadyState 屬性的改變都屬性的改變都會觸發(fā)會觸發(fā) readystatechangereadystatechange 事件事件高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 Open 方法lopen(methodmethod, urlurl, asynch, username, password)XMLHttpRequest 對象的 open 方法允許程序員用一個Ajax調(diào)用向服務(wù)器發(fā)送請求。method：請求類型，類似 “GET”或”POST”的字符串。若只想從服務(wù)器檢索一個文件，而不需要發(fā)送任何數(shù)據(jù)，使用GET(可以在GET請求里通過附加在U

15、RL上的查詢字符串來發(fā)送數(shù)據(jù)，不過數(shù)據(jù)大小限制為2000個字符)。若需要向服務(wù)器發(fā)送數(shù)據(jù)，用POST。在某些情況下，有些瀏覽器會把多個在某些情況下，有些瀏覽器會把多個XMLHttpRequestXMLHttpRequest請求的結(jié)果緩請求的結(jié)果緩存在同一個存在同一個URLURL。如果對每個請求的響應(yīng)不同，就會帶來不好的結(jié)。如果對每個請求的響應(yīng)不同，就會帶來不好的結(jié)果。在此將時間戳追加到果。在此將時間戳追加到URLURL的最后，就能確保的最后，就能確保URLURL的唯一性，從而的唯一性，從而避免瀏覽器緩存結(jié)果。避免瀏覽器緩存結(jié)果。url：路徑字符串，指向你所請求的服務(wù)器上的那個文件?？梢允墙^對路

16、徑或相對路徑。asynch：表示請求是否要異步傳輸，默認值為true。指定true，在讀取后面的腳本之前，不需要等待服務(wù)器的相應(yīng)。指定false，當(dāng)腳本處理過程經(jīng)過這點時，會停下來，一直等到Ajax請求執(zhí)行完畢再繼續(xù)執(zhí)行。高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 Send方法lsend(data)： open 方法定義了 Ajax 請求的一些細節(jié)，但是那些請求并沒有被初始化。send 方法可為已經(jīng)待命的請求發(fā)送指令。data：將要傳遞給服務(wù)器的字符串。若選用的是 GET 請求，則不會發(fā)送任何數(shù)據(jù)， 給 send 方法傳遞 null 即可：request.send(

17、null);當(dāng)向當(dāng)向send()send()方法提供參數(shù)時，要確保方法提供參數(shù)時，要確保open()open()中指定的方法是中指定的方法是POSTPOST，如果沒有數(shù)據(jù)作為請求體的一部分發(fā)送，則使用如果沒有數(shù)據(jù)作為請求體的一部分發(fā)送，則使用null.null.完整的 Ajax 的 GET 請求示例：高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 setRequestHeader方法lsetRequestHeader(header,value)當(dāng)瀏覽器向服務(wù)器請求頁面時，它會伴隨這個請求發(fā)送一組首部信息首部信息。這些首部信息是一系列描述請求的元數(shù)據(jù)(metadata)。

18、首部信息用來聲明一個請求是首部信息用來聲明一個請求是 GET GET 還是還是 POSTPOST。Ajax 請求中，發(fā)送首部信息的工作可以由 setRequestHeader該完成。參數(shù)header： 首部的名字參數(shù)value：首部的值。如果用 POST 請求向服務(wù)器發(fā)送數(shù)據(jù)，需要將 “Content-typeContent-type” 的首部設(shè)置為 “application/x-www-form-urlendodedapplication/x-www-form-urlendoded”.它會告知服務(wù)器正在發(fā)送數(shù)據(jù)，并且數(shù)據(jù)已經(jīng)符合URL編碼了。該方法必須在該方法必須在open()open()之

19、后才能調(diào)用之后才能調(diào)用完整的 Ajax 的 POST 請求示例：高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 接收相應(yīng)l用 XMLHttpRequest 的方法可向服務(wù)器發(fā)送請求。在 Ajax 處理過程中，XMLHttpRequest 的如下屬性可被服務(wù)器更改：readyStatestatusresponseTextresponseXML高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 readyState方法readyState 屬性表示Ajax請求的當(dāng)前狀態(tài)。它的值用數(shù)字代表。0 代表未初始化。 還沒有調(diào)用 open 方法1 代表正在加載。

20、open 方法已被調(diào)用，但 send 方法還沒有被調(diào)用2 代表已加載完畢。send 已被調(diào)用。請求已經(jīng)開始3 代表交互中。服務(wù)器正在發(fā)送響應(yīng)4 代表完成。響應(yīng)發(fā)送完畢每次 readyState 值的改變，都會觸發(fā) readystatechange 事件。如果把 onreadystatechange 事件處理函數(shù)賦給一個函數(shù)，那么每次 readyState 值的改變都會引發(fā)該函數(shù)的執(zhí)行。readyState 值的變化會因瀏覽器的不同而有所差異。但是，當(dāng)請求結(jié)束的時候，每個瀏覽器都會把當(dāng)請求結(jié)束的時候，每個瀏覽器都會把 readyStatereadyState 的值同的值同意設(shè)為意設(shè)為 4 4高級

21、軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 Status方法服務(wù)器發(fā)送的每一個響應(yīng)也都帶有首部信息。三位數(shù)的狀態(tài)碼是服務(wù)器發(fā)送的響應(yīng)中最重要的首部信息，并且屬于超文本傳輸協(xié)議中的一部分。常用狀態(tài)碼及其含義：404 沒找到頁面(not found)403 禁止訪問(forbidden)500 內(nèi)部服務(wù)器出錯(internal service error)200 200 一切正常一切正常(ok)(ok)304 304 沒有被修改沒有被修改(not modified)(not modified)在 XMLHttpRequest 對象中，服務(wù)器發(fā)送的狀態(tài)碼都保存在 status

22、 屬性里。通過把這個值和 200 200 或或 304304 比較，可以確保服務(wù)器是否已發(fā)送了一個成功的響應(yīng)高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 responseText方法XMLHttpRequest 的 responseText 屬性包含了從服務(wù)器發(fā)送的數(shù)據(jù)。它是一個HTML,XML或普通文本，這取決于服務(wù)器發(fā)送的內(nèi)容。當(dāng)當(dāng) readyStatereadyState 屬性值變成屬性值變成 4 4 時時, responseText 屬性才可用，表明 Ajax 請求已經(jīng)結(jié)束。高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 respons

23、eXML方法如果服務(wù)器返回的是 XML， 那么數(shù)據(jù)將儲存在 responseXML 屬性中。只用服務(wù)器發(fā)送了帶有正確首部信息的數(shù)據(jù)時， responseXML 屬性才是可用的。 MIME 類型必須為 text/xml高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 匯總高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 小結(jié)lXMLHttpRequest 對象是 Ajax 的核心和靈魂。它的方法和屬性可用于實現(xiàn)異步請求，令A(yù)jax 程序擁有快速的響應(yīng)。l使用 XMLHttpRequest 對象的 3 個步驟：創(chuàng)建該對象的一個實例，使其可在不同的瀏覽器中

24、運行。用 onreadystatechange 事件處理函數(shù), open 方法， send 方法對一個請求進行初始化。通過 readyState, status, responseText 或者 responseXML 來對服務(wù)器的響應(yīng)進行處理高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 數(shù)據(jù)格式l在服務(wù)器端 AJAX 是一門與語言無關(guān)的技術(shù)。在業(yè)務(wù)邏輯層使用何種服務(wù)器端語言都可以。l從服務(wù)器端接收數(shù)據(jù)的時候，那些數(shù)據(jù)必須以瀏覽器能夠理解的格式來發(fā)送。服務(wù)器端的編程語言只能以如下 3 種格式返回數(shù)據(jù)：XMLJSONHTML高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專

25、家! !北京傳智播客教育 任務(wù)網(wǎng)頁中的人員列表點擊連接就會顯示個人的信息高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 XMLlXML（ eXtensible Markup Language ）是一種通用的標(biāo)記語言，用于對數(shù)據(jù)進行描述。l與其他語言的不同在于，它的標(biāo)記不是事先規(guī)定的。它的文檔結(jié)構(gòu)需要遵循一定的規(guī)范，但是所用的詞語則沒有任何限制。lXML 是用來存儲數(shù)據(jù)，而不是對數(shù)據(jù)進行操作。XML XML 聲明。指定了文檔所使聲明。指定了文檔所使用的用的XMLXML版本號和字符編碼版本號和字符編碼內(nèi)容包含在標(biāo)簽內(nèi)。每一對標(biāo)簽代內(nèi)容包含在標(biāo)簽內(nèi)。每一對標(biāo)簽代表一個元素。元

26、素的名字包含在開表一個元素。元素的名字包含在開始標(biāo)簽和結(jié)束標(biāo)簽內(nèi)。元素的值也始標(biāo)簽和結(jié)束標(biāo)簽內(nèi)。元素的值也位于開始標(biāo)簽和結(jié)束標(biāo)簽之間位于開始標(biāo)簽和結(jié)束標(biāo)簽之間高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 實戰(zhàn)XMLlIndex.html代碼高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 實戰(zhàn)XMLlclearleft.css高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 實戰(zhàn)XMLandy.xmljeremy.xmlrichard.xml高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 實戰(zhàn)XMLl

27、fetchxml.js文件：getHTTPObject() grabFile(file)parseResponse(request)該函數(shù)用于服務(wù)器返回的 XML， 并將其轉(zhuǎn)化為 HTMLXML 會通過HTTPRequest對象的 responseXML 屬性獲得。生成的 HTML 代碼(這些信息放在 list 后的 div 元素中):調(diào)用調(diào)用調(diào)用調(diào)用高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 XML小結(jié)l優(yōu)點：XML 是一種通用的數(shù)據(jù)格式。不必把數(shù)據(jù)強加到已定義好的格式中，而是要為數(shù)據(jù)自定義合適的標(biāo)記。利用 DOM 可以完全掌控文檔。l缺點：如果文檔來自于服務(wù)器，

28、就必須得保證文檔含有正確的首部信息。若文檔類型不正確，那么 responseXML 的值將是空的。當(dāng)瀏覽器接收到長的 XML 文件后， DOM 解析可能會很復(fù)雜。高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 JSONlXML 的輕量級替代品，是一種基于文本的數(shù)據(jù)描述方式。lXML 使用開始標(biāo)簽和結(jié)束標(biāo)簽，JSON 是使用的是 冒號，逗號和大括號。lJSON 不是一種需要用 JavaScript 解釋的數(shù)據(jù)格式：JSON 本身就是 JavaScript高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 JSON高級軟件人才實作培訓(xùn)專家高級軟件人才實作

29、培訓(xùn)專家! !北京傳智播客教育 JSON實戰(zhàn)index.html高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 JSON實戰(zhàn)andy.jsjeremy.jsrichard.js高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 JSON實戰(zhàn)lfetchjson.js文件：getHTTPObject() grabFile(file)parseResponse(request)JSON 只是一種文本字符串。它被存儲在 responseText屬性中。為了讀取存儲在 responseText 屬性中的 JSON 數(shù)據(jù)，需要根據(jù) JavaScript 的 e

30、val 語句。函數(shù) eval 會把一個字符串當(dāng)作它的參數(shù)。然后這個字符串會被當(dāng)作 JavaScript 代碼來執(zhí)行。因為 JSON 的字符串就是由 JavaScript 代碼構(gòu)成的，所以它本身是可執(zhí)行的。代碼實例：高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 JSON 小結(jié)l優(yōu)點：作為一種數(shù)據(jù)傳輸格式，JSON 與 XML 很相似，但是它更加靈巧。JSON 不需要從服務(wù)器端發(fā)送含有特定內(nèi)容類型的首部信息。l缺點：語法過于嚴謹代碼不易讀eval 函數(shù)存在風(fēng)險高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 實戰(zhàn)HTMLindex.html高級軟件人

31、才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 實戰(zhàn)HTMLandy.htmljeremy.htmlrichard.html高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 實戰(zhàn)HTMLlfetchjson.js文件：getHTTPObject() grabFile(file)parseResponse(request) HTML 由一些普通文本組成。如果服務(wù)器通過 XMLHttpRequest 發(fā)送 HTML， 文本將存儲在 responseText 屬性中。不必從 responseText 屬性中讀取數(shù)據(jù)。它已經(jīng)是希望的格式，可以直接將它插入到頁面中。插

32、入 HTML 代碼最簡單的方法是更新這個元素的 innerHTML 屬性高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 HTML 小結(jié)l優(yōu)點：從服務(wù)器端發(fā)送的 HTML 代碼在瀏覽器端不需要用 JavaScript 進行解析。HTML 的可讀性好。HTML 代碼塊與 innerHTML 屬性搭配，效率高。l缺點：若需要通過 AJAX 更新一篇文檔的多個部分，HTML 不合適innerHTML 并非 DOM 標(biāo)準(zhǔn)。高級軟件人才實作培訓(xùn)專家高級軟件人才實作培訓(xùn)專家! !北京傳智播客教育 小結(jié)l從服務(wù)器端返回 Ajax 相應(yīng)的三種數(shù)據(jù)格式：XML：廣泛應(yīng)用，可以通過 DOM 進行解析JSON：可從遠程服務(wù)器讀取數(shù)據(jù)H