22.ajax基礎(chǔ)與案例源碼筆記課件

1、北京傳智播客教育 北京傳智播客教育 Ajax 傳智.急先鋒北京傳智播客教育 什么是AjaxAjax的技術(shù)：Ajax被認(rèn)為是(Asynchronous JavaScript and XML的縮寫(xiě)）。異步的js與xml什么是同步和異步：同步：發(fā)送一個(gè)請(qǐng)求，就要等服務(wù)器的響應(yīng)結(jié)束，然后才能發(fā)第二個(gè)請(qǐng)求！中間這段時(shí)間就是一個(gè)字等！它刷新的是整個(gè)頁(yè)面。異步：發(fā)送一個(gè)請(qǐng)求后，無(wú)需等待服務(wù)器的響應(yīng)，然后就可以發(fā)第二個(gè)請(qǐng)求?？梢允褂胘s接收服務(wù)器的響應(yīng)，然后使用js使頁(yè)面進(jìn)行局部刷新。北京傳智播客教育 什么是AjaxAjax的技術(shù)：使用Ajax技術(shù)可以使用js來(lái)訪(fǎng)問(wèn)服務(wù)器，而且是異步交互。一般的情況下，服務(wù)器

2、給客戶(hù)端的響應(yīng)都是整個(gè)頁(yè)面，一個(gè)完整的HTML頁(yè)面但是在A(yíng)jax中因?yàn)槭蔷植克⑿?，那么服?wù)器就不用再發(fā)整個(gè)頁(yè)面了，而只是數(shù)據(jù)。Text ：純文本Xml ：XML數(shù)據(jù)Json ：它是js提供的數(shù)據(jù)交互的格式！北京傳智播客教育 同步交互和異步交互 舉個(gè)例子：普通B/S模式(同步) AJAX技術(shù)(異步) * 同步：提交請(qǐng)求-等待服務(wù)器處理-處理完畢返回 這個(gè)期間客戶(hù)端瀏覽器不能干任何事 * 異步: 請(qǐng)求通過(guò)事件觸發(fā)-服務(wù)器處理（這時(shí)瀏覽器仍然可以作其他事情）-處理完畢 同步是指：發(fā)送方發(fā)出數(shù)據(jù)后，等接收方發(fā)回響應(yīng)以后才發(fā)下一個(gè) 數(shù)據(jù)包的通訊方式。異步是指：發(fā)送方發(fā)出數(shù)據(jù)后，不等接收方發(fā)回響應(yīng)，接著發(fā)

3、送下 個(gè)數(shù)據(jù)包的通訊方式 易懂的理解: 異步傳輸: 你傳輸吧，我去做我的事了，傳輸完了告訴我一聲 同步傳輸: 你現(xiàn)在傳輸，我要親眼看你傳輸完成，才去做別的事 北京傳智播客教育 什么是AjaxAjax：一種不用刷新整個(gè)頁(yè)面便可與服務(wù)器通訊的辦法圖1 Web的傳統(tǒng)模型?？蛻?hù)端向服務(wù)器發(fā)送一個(gè)請(qǐng)求，服務(wù)器返回整個(gè)頁(yè)面，如此反復(fù)圖2 在A(yíng)jax模型中，數(shù)據(jù)在客戶(hù)端與服務(wù)器之間獨(dú)立傳輸。服務(wù)器不再返回整個(gè)頁(yè)面北京傳智播客教育 Ajax的應(yīng)用場(chǎng)景北京傳智播客教育 Ajax的應(yīng)用場(chǎng)景北京傳智播客教育 AJAX包含的技術(shù) AJAX:(Asynchronous JavaScript and XML)并不是一項(xiàng)新

4、技術(shù),其實(shí)是多種技術(shù)的綜合，包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.服務(wù)器端語(yǔ)言：服務(wù)器需要具備向?yàn)g覽器發(fā)送特定信息的能力。Ajax與服務(wù)器端語(yǔ)言無(wú)關(guān)。XML (eXtensible Markup Language，可擴(kuò)展標(biāo)記語(yǔ)言) 是一種描述數(shù)據(jù)的格式。AJAX 程序需要某種格式化的格式來(lái)在服務(wù)器和客戶(hù)端之間傳遞信息，XML 是其中的一種選擇XHTML（eXtended Hypertext Markup Language,使用擴(kuò)展超媒體標(biāo)記語(yǔ)言）和 CSS（Cascading Style Sheet,級(jí)聯(lián)樣式單）標(biāo)準(zhǔn)化呈現(xiàn)；DOM（Docu

5、ment Object Model,文檔對(duì)象模型）實(shí)現(xiàn)動(dòng)態(tài)顯示和交互；使用XMLHTTP組件XMLHttpRequest對(duì)象進(jìn)行異步數(shù)據(jù)讀取使用JavaScript綁定和處理所有數(shù)據(jù)北京傳智播客教育 AJAX的優(yōu)缺點(diǎn)Ajax的優(yōu)點(diǎn)：異步交互，增強(qiáng)了用戶(hù)的體驗(yàn)性能：只需要響應(yīng)部分內(nèi)容，而不是整個(gè)頁(yè)面，所以服務(wù)器的壓力減輕了。AJAX不是完美的技術(shù)。也存在缺陷：1 AJAX大量使用了Javascript和AJAX引擎，而這個(gè)取決于瀏覽器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla雖然也支持AJAX，但是提供XMLHttpRequest的方式不一

6、樣。所以，使用AJAX的程序必須測(cè)試針對(duì)各個(gè)瀏覽器的兼容性。 2 AJAX更新頁(yè)面內(nèi)容的時(shí)候并沒(méi)有刷新整個(gè)頁(yè)面，因此，網(wǎng)頁(yè)的后退功能是失效的；有的用戶(hù)還經(jīng)常搞不清楚現(xiàn)在的數(shù)據(jù)是舊的還是已經(jīng)更新過(guò)的。這個(gè)就需要在明顯位置提醒用戶(hù)“數(shù)據(jù)已更新”。 北京傳智播客教育 XMLHttpRequest對(duì)象XMLHttpRequest對(duì)象XMLHttpRequest是XMLHTTP組件的對(duì)象，通過(guò)這個(gè)對(duì)象，AJAX可以像桌面應(yīng)用程序一樣只同服務(wù)器進(jìn)行數(shù)據(jù)層面的交換，而不用每次都刷新界面，也不用每次將數(shù)據(jù)處理的工作都交給服務(wù)器來(lái)做；這樣既減輕了服務(wù)器負(fù)擔(dān)又加快了響應(yīng)速度、縮短了用戶(hù)等待的時(shí)間。 XMLHttp

7、Request最早是在IE5中以ActiveX組件的形式實(shí)現(xiàn)的。非W3C標(biāo)準(zhǔn).創(chuàng)建XMLHttpRequest對(duì)象（由于非標(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è)本地的JavaScript對(duì)象。XMLHttpRequest在不同瀏覽器上的實(shí)現(xiàn)是兼容的，所以可以用同樣的方式訪(fǎng)問(wèn)XMLHttpRequest實(shí)例的屬性和方法，而不論這個(gè)實(shí)例創(chuàng)建的方法是什么。北京傳智播客教育 AJAX的開(kāi)發(fā)步驟前言：學(xué)習(xí)ajax只需要學(xué)習(xí)一個(gè)對(duì)象：XMLHttpRequest

8、對(duì)象，如果掌握了它，就掌握了ajax。第一步：獲取XMLHttpRequest對(duì)象。大多數(shù)瀏覽器都支持該對(duì)象：var xhr = new XMLHttpRequest();IE6版本：var xhr = new ActiveXObject(“Msxml2.XMLHTTP”);IE5.5及其更早版本：var xhr = new ActiveXObject(“Microsoft.XMLHTTP”);北京傳智播客教育 XMLHttpRequest對(duì)象初始化function createXmlHttpRequest() var xmlHttp; try /Firefox, Opera 8.0+, Sa

9、fari xmlHttp=new XMLHttpRequest(); catch (e) try /Internet Explorer xmlHttp=new ActiveXObject(Msxml2.XMLHTTP); catch (e) try xmlHttp=new ActiveXObject(Microsoft.XMLHTTP); catch (e) return xmlHttp; 北京傳智播客教育 AJAX的開(kāi)發(fā)步驟第二步：打開(kāi)與服務(wù)器的鏈接xhr.open()方法，用來(lái)打開(kāi)與服務(wù)器的鏈接，它需要三個(gè)參數(shù)。請(qǐng)求方式：可以是GET或POST請(qǐng)求的URL：指定服務(wù)器的資源。請(qǐng)求是否是異步

10、：如果為true，說(shuō)明是異步請(qǐng)求，否則是同步請(qǐng)求。例如：xhr.open(“GET”,”/day23/xxx”,true)第三步：發(fā)送請(qǐng)求xhr.send(null);參數(shù)必須給，如果不給有可能部分瀏覽器無(wú)法發(fā)送。參數(shù)就是請(qǐng)求體的內(nèi)容。如果是GET請(qǐng)求，必須給出null。北京傳智播客教育 XMLHttpRequest對(duì)象方法方法 描述 abort() 停止當(dāng)前請(qǐng)求 getAllResponseHeaders() 把http請(qǐng)求的所有響應(yīng)首部作為鍵/值對(duì)返回getResponseHeader(headerLabel) 返回指定首部的串值open(“method”,”url”,true) 建立對(duì)服

11、務(wù)器的調(diào)用，method參數(shù)可以是GET,POST。url參數(shù)可以是相對(duì)URL或絕對(duì)URL。這個(gè)方法還包括3個(gè)可選參數(shù)。 send(content) 向服務(wù)器發(fā)送請(qǐng)求 setRequestHeader(label, value) 把指定首部設(shè)置為所提供的值。在設(shè)置任何首部之前必須先調(diào)用open() 北京傳智播客教育 AJAX的開(kāi)發(fā)步驟第四步：監(jiān)聽(tīng)xhr的狀態(tài)改變?cè)趚hr的對(duì)象的一個(gè)事件上注冊(cè)監(jiān)聽(tīng)器，事件為onreadystatechange，一旦狀態(tài)改變，觸發(fā)函數(shù)。xhr一共有5個(gè)狀態(tài)：0：初始化未完成狀態(tài)，只是創(chuàng)建了XMLHttpRequest對(duì)象，還未調(diào)用open()方法；1：請(qǐng)求已開(kāi)始，

12、open()方法已調(diào)用，但還沒(méi)調(diào)用send()方法；2：請(qǐng)求發(fā)送完成狀態(tài)，send()方法已調(diào)用；3：開(kāi)始讀取服務(wù)器響應(yīng)，響應(yīng)可能還沒(méi)結(jié)束。4：讀取服務(wù)器響應(yīng)結(jié)束。北京傳智播客教育 AJAX的開(kāi)發(fā)步驟得到xhr對(duì)象的狀態(tài)var state = xhr.readyState; / 0、1、2、3、4得到服務(wù)器的狀態(tài)碼var status = xhr.status; / 200、404、500等得到服務(wù)器端響應(yīng)的內(nèi)容var content = xhr.responseText; / 得到從服務(wù)器響應(yīng)的文本格式的內(nèi)容。var content = xhr.responseXML; / 得到從服務(wù)器端響

13、應(yīng)的XML格式的數(shù)據(jù)。雖然也是字符串，但是瀏覽器會(huì)自定解析該內(nèi)容，得到Document對(duì)象。北京傳智播客教育 XMLHttpRequest對(duì)象屬性北京傳智播客教育 發(fā)送請(qǐng)求-方法和屬性介紹利用XMLHttpRequest 實(shí)例與服務(wù)器進(jìn)行通信包含以下3個(gè)關(guān)鍵部分：onreadystatechange 事件處理函數(shù)open 方法send 方法 北京傳智播客教育 發(fā)送請(qǐng)求-方法和屬性介紹onreadystatechange:該事件處理函數(shù)由服務(wù)器觸發(fā)，而不是用戶(hù)在 Ajax 執(zhí)行過(guò)程中，服務(wù)器會(huì)通知客戶(hù)端當(dāng)前的通信狀態(tài)。這依靠更新 XMLHttpRequest 對(duì)象的 readyState 來(lái)實(shí)現(xiàn)

14、。改變 readyState 屬性是服務(wù)器對(duì)客戶(hù)端連接操作的一種方式。每次 readyState 屬性的改變都會(huì)觸發(fā) readystatechange事件北京傳智播客教育 發(fā)送請(qǐng)求-方法和屬性介紹open(method, url, asynch)XMLHttpRequest 對(duì)象的 open 方法允許程序員用一個(gè)Ajax調(diào)用向服務(wù)器發(fā)送請(qǐng)求。method：請(qǐng)求類(lèi)型，類(lèi)似 “GET”或”P(pán)OST”的字符串。若只想從服務(wù)器檢索一個(gè)文件，而不需要發(fā)送任何數(shù)據(jù)，使用GET(可以在GET請(qǐng)求里通過(guò)附加在URL上的查詢(xún)字符串來(lái)發(fā)送數(shù)據(jù)，不過(guò)數(shù)據(jù)大小限制為2000個(gè)字符)。若需要向服務(wù)器發(fā)送數(shù)據(jù)，用POST

15、。在某些情況下，有些瀏覽器會(huì)把多個(gè)XMLHttpRequest請(qǐng)求的結(jié)果緩存在同一個(gè)URL。如果對(duì)每個(gè)請(qǐng)求的響應(yīng)不同，這就會(huì)帶來(lái)不好的結(jié)果。把當(dāng)前時(shí)間戳追加到URL的最后，就能確保URL的惟一性，從而避免瀏覽器緩存結(jié)果。 url：路徑字符串，指向你所請(qǐng)求的服務(wù)器上的那個(gè)文件?？梢允墙^對(duì)路徑或相對(duì)路徑。asynch：表示請(qǐng)求是否要異步傳輸，默認(rèn)值為true(異步)。指定true，在讀取后面的腳本之前，不需要等待服務(wù)器的相應(yīng)。指定false，當(dāng)腳本處理過(guò)程經(jīng)過(guò)這點(diǎn)時(shí)，會(huì)停下來(lái)，一直等到Ajax請(qǐng)求執(zhí)行完畢再繼續(xù)執(zhí)行。varurl=GetAndPostExample?timeStamp=+newDa

16、te().getTime(); 北京傳智播客教育 發(fā)送請(qǐng)求-方法和屬性介紹send(data)：open 方法定義了 Ajax 請(qǐng)求的一些細(xì)節(jié)。send 方法可為已經(jīng)待命的請(qǐng)求發(fā)送指令data：將要傳遞給服務(wù)器的字符串。若選用的是 GET 請(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)求示例：使用get請(qǐng)求時(shí)send方法參數(shù)時(shí)null,如果傳值的話(huà)，服務(wù)器也接受不到北京傳智播客教

17、育 發(fā)送請(qǐng)求-方法和屬性介紹setRequestHeader(header,value)當(dāng)瀏覽器向服務(wù)器請(qǐng)求頁(yè)面時(shí)，它會(huì)伴隨這個(gè)請(qǐng)求發(fā)送一組首部信息。這些首部信息是一系列描述請(qǐng)求的元數(shù)據(jù)(metadata)。首部信息用來(lái)聲明一個(gè)請(qǐng)求是 GET 還是 POST。Ajax 請(qǐng)求中，發(fā)送首部信息的工作可以由 setRequestHeader完成參數(shù)header： 首部的名字; 參數(shù)value：首部的值。如果用 POST 請(qǐng)求向服務(wù)器發(fā)送數(shù)據(jù)，需要將 “Content-type” 的首部設(shè)置為 “application/x-www-form-urlencoded”.它會(huì)告知服務(wù)器正在發(fā)送數(shù)據(jù)，并且數(shù)據(jù)

18、已經(jīng)符合URL編碼了。該方法必須在open()之后才能調(diào)用完整的 Ajax 的 POST 請(qǐng)求示例：北京傳智播客教育 接收-方法和屬性介紹用 XMLHttpRequest 的方法可向服務(wù)器發(fā)送請(qǐng)求。在 Ajax 處理過(guò)程中，XMLHttpRequest 的如下屬性可被服務(wù)器更改：readyStatestatusresponseTextresponseXML北京傳智播客教育 接收-方法和屬性介紹readyStatereadyState 屬性表示Ajax請(qǐng)求的當(dāng)前狀態(tài)。它的值用數(shù)字代表。0 代表未初始化。 還沒(méi)有調(diào)用 open 方法1 代表正在加載。 open 方法已被調(diào)用，但 send 方法還沒(méi)

19、有被調(diào)用2 代表已加載完畢。send 已被調(diào)用。請(qǐng)求已經(jīng)開(kāi)始3 代表交互中。服務(wù)器正在發(fā)送響應(yīng)4 代表完成。響應(yīng)發(fā)送完畢每次 readyState 值的改變，都會(huì)觸發(fā) readystatechange 事件。如果把 onreadystatechange 事件處理函數(shù)賦給一個(gè)函數(shù)，那么每次 readyState 值的改變都會(huì)引發(fā)該函數(shù)的執(zhí)行。readyState 值的變化會(huì)因?yàn)g覽器的不同而有所差異。但是，當(dāng)請(qǐng)求結(jié)束的時(shí)候，每個(gè)瀏覽器都會(huì)把 readyState 的值統(tǒng)一設(shè)為 4北京傳智播客教育 接收-方法和屬性介紹status服務(wù)器發(fā)送的每一個(gè)響應(yīng)也都帶有首部信息。三位數(shù)的狀態(tài)碼是服務(wù)器發(fā)送的響

20、應(yīng)中最重要的首部信息，并且屬于超文本傳輸協(xié)議中的一部分。常用狀態(tài)碼及其含義：404 沒(méi)找到頁(yè)面(not found)403 禁止訪(fǎng)問(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)碼都保存在 status 屬性里。通過(guò)把這個(gè)值和 200 或 304 比較，可以確保服務(wù)器是否已發(fā)送了一個(gè)成功的響應(yīng)北京傳智播客教育 接收-方法和屬性介紹responseTextXMLHttpRequ

21、est 的 responseText 屬性包含了從服務(wù)器發(fā)送的數(shù)據(jù)。它是一個(gè)HTML,XML或普通文本，這取決于服務(wù)器發(fā)送的內(nèi)容。當(dāng) readyState 屬性值變成 4 時(shí), responseText 屬性才可用，表明 Ajax 請(qǐng)求已經(jīng)結(jié)束。北京傳智播客教育 接收-方法和屬性介紹responseXML如果服務(wù)器返回的是 XML， 那么數(shù)據(jù)將儲(chǔ)存在 responseXML 屬性中。只用服務(wù)器發(fā)送了帶有正確首部信息的數(shù)據(jù)時(shí)， responseXML 屬性才是可用的。 MIME 類(lèi)型必須為 text/xml北京傳智播客教育 Ajax的入門(mén)案例編寫(xiě)入門(mén)的案例，在頁(yè)面上點(diǎn)擊按鈕，動(dòng)態(tài)的給標(biāo)簽進(jìn)行賦值

22、操作。開(kāi)發(fā)步驟獲取異步對(duì)象與服務(wù)器進(jìn)行鏈接發(fā)送請(qǐng)求使用onreadystatechange事件監(jiān)聽(tīng)xhr對(duì)象狀態(tài)的改變獲取響應(yīng)的內(nèi)容北京傳智播客教育 Ajax發(fā)送POST請(qǐng)求需要修改的地方xhr.open(“POST”)在鏈接后設(shè)置Content-Type請(qǐng)求頭xhr.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);xhr.send(“username=zhangsan”);發(fā)送請(qǐng)求體時(shí)可以指定數(shù)據(jù)了。北京傳智播客教育 Ajax校驗(yàn)用戶(hù)名是否存在導(dǎo)入響應(yīng)的jar包前臺(tái)可以使用POST請(qǐng)求方式，不要忘記設(shè)置

23、請(qǐng)求頭信息。北京傳智播客教育 Ajax響應(yīng)的內(nèi)容為XML服務(wù)器端設(shè)置響應(yīng)頭Content-Type 其值為：text/xml;charset=UTF-8客戶(hù)端：接收響應(yīng)的數(shù)據(jù)改變了：var doc = xhr.responseXML; 其doc為一個(gè)document對(duì)象。解決瀏覽器獲取XML文本內(nèi)容值的方法if(window.addEventListener)/ 如果執(zhí)行，說(shuō)明是火狐瀏覽器或者IE高版本else/ 說(shuō)明是IE低版本北京傳智播客教育 Ajax省市聯(lián)動(dòng)案例頁(yè)面包含兩個(gè)選擇框，頁(yè)面一加載，需要先把所有的省份信息（例如：北京,天津,河北等）加載到省份的選擇框中。只要是省份的選擇框發(fā)生了

24、改變事件，把值傳送到后臺(tái)程序，獲取所有的城市信息，把所有的城市信息遍歷到頁(yè)面上。北京傳智播客教育 Xstream的簡(jiǎn)介作用：可以把JavaBean轉(zhuǎn)換成XML Jar包核心JAR包：xstream-1.4.7.jar必須依賴(lài)包：xpp3_min-1.1.4c（XML Pull Parser，一款速度很快的XML解析器）使用步驟創(chuàng)建對(duì)象XStream xs = new Xstream();轉(zhuǎn)換成字符串：String xmlStr = xs.toXML(JavaBean);北京傳智播客教育 Xstream對(duì)象的方法使用別名的方法顯示特定的內(nèi)容xs.alias(china, List.class);

25、xs.alias(province, Province.class);xs.alias(city, City.class);可以把類(lèi)中的屬性升級(jí)為XML元素的屬性xs.useAttributeFor(Province.class, name);去除掉JavaBean中的屬性是集合的屬性xs.addImplicitCollection(Province.class, list);北京傳智播客教育 數(shù)據(jù)格式提要在服務(wù)器端 AJAX 是一門(mén)與語(yǔ)言無(wú)關(guān)的技術(shù)。在業(yè)務(wù)邏輯層使用何種服務(wù)器端語(yǔ)言都可以。從服務(wù)器端接收數(shù)據(jù)的時(shí)候，那些數(shù)據(jù)必須以瀏覽器能夠理解的格式來(lái)發(fā)送。服務(wù)器端的編程語(yǔ)言只能以如下 3 種

26、格式返回?cái)?shù)據(jù)：XMLJSONHTML北京傳智播客教育 XML優(yōu)點(diǎn)：XML 是一種通用的數(shù)據(jù)格式。不必把數(shù)據(jù)強(qiáng)加到已定義好的格式中，而是要為數(shù)據(jù)自定義合適的標(biāo)記。利用 DOM 可以完全掌控文檔。缺點(diǎn)：如果文檔來(lái)自于服務(wù)器，就必須得保證文檔含有正確的首部信息。若文檔類(lèi)型不正確，那么 responseXML 的值將是空的。當(dāng)瀏覽器接收到長(zhǎng)的 XML 文件后， DOM 解析可能會(huì)很復(fù)雜北京傳智播客教育 JSON 簡(jiǎn)介JSON是js提供的一種數(shù)據(jù)交換格式，適用于在js端。JSON的語(yǔ)法首先使用括起來(lái)的是對(duì)象!對(duì)象包含屬性和值，屬性名必須使用雙引號(hào)括起來(lái)，單引號(hào)不行。屬性值：Null數(shù)值字符串?dāng)?shù)組 需要使

27、用括起來(lái)Boolean值 true和false北京傳智播客教育 JSONJSON（JavaScript Object Notation）一種簡(jiǎn)單的數(shù)據(jù)格式，比xml更輕巧。JSON是JavaScript原生格式，這意味著在JavaScript中處理JSON數(shù)據(jù)不需要任何特殊的API或工具包。 JSON的規(guī)則很簡(jiǎn)單：對(duì)象是一個(gè)無(wú)序的“名稱(chēng)/值對(duì)”集合。一個(gè)對(duì)象以“”（左括號(hào)）開(kāi)始，“”（右括號(hào)）結(jié)束。每個(gè)“名稱(chēng)”后跟一個(gè)“:”（冒號(hào)）；“名稱(chēng)/值對(duì)”之間使用“,”（逗號(hào)）分隔。 規(guī)則如下: 1）映射用冒號(hào)（“：”）表示。名稱(chēng):值 2）并列的數(shù)據(jù)之間用逗號(hào)（“，”）分隔。名稱(chēng)1:值1,名稱(chēng)2:值2

28、 3） 映射的集合（對(duì)象）用大括號(hào)（“”）表示。名稱(chēng)1:值1,名稱(chēng)2:值2 4） 并列數(shù)據(jù)的集合（數(shù)組）用方括號(hào)(“”)表示。 名稱(chēng)1:值,名稱(chēng)2:值2, 名稱(chēng)1:值,名稱(chēng)2:值2 5 元素值可具有的類(lèi)型：string, number, object, array, true, false, null 北京傳智播客教育 解析 JSONJSON 只是一種文本字符串。它被存儲(chǔ)在 responseText 屬性中為了讀取存儲(chǔ)在 responseText 屬性中的 JSON 數(shù)據(jù)，需要根據(jù) JavaScript 的 eval 語(yǔ)句。函數(shù) eval 會(huì)把一個(gè)字符串當(dāng)作它的參數(shù)。然后這個(gè)字符串會(huì)被當(dāng)作 J

29、avaScript 代碼來(lái)執(zhí)行。因?yàn)?JSON 的字符串就是由 JavaScript 代碼構(gòu)成的，所以它本身是可執(zhí)行的代碼實(shí)例：北京傳智播客教育 JS處理JSON例子一: var people =firstName: Brett, lastName:McLaughlin, email: ; alert(people.firstName); alert(people.lastName); alert(people.email); 北京傳智播客教育 JS處理JSON例子二: var people = firstName: Brett,email: , firstName: Mary,email: ; alert(people0.firstName); alert(people0.email); alert(people1.firstName); alert(people1.email); 北京傳智播客教育 JS處理JSON例子三: var people = programmers: firstName: Brett, email: , firstName: Jason, email: ;window.alert(grammers0.firstName);window.alert(gramm