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

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

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

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

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

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

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

7、Request最早是在IE5中以ActiveX組件的形式實現(xiàn)的。非W3C標(biāo)準(zhǔn).創(chuàng)建XMLHttpRequest對象（由于非標(biāo)準(zhǔn)所以實現(xiàn)方法不統(tǒng)一）Internet Explorer把XMLHttpRequest實現(xiàn)為一個ActiveX對象其他瀏覽器（Firefox、Safari、Opera）把它實現(xiàn)為一個本地的JavaScript對象。XMLHttpRequest在不同瀏覽器上的實現(xiàn)是兼容的，所以可以用同樣的方式訪問XMLHttpRequest實例的屬性和方法，而不論這個實例創(chuàng)建的方法是什么。北京傳智播客教育 AJAX的開發(fā)步驟前言：學(xué)習(xí)ajax只需要學(xué)習(xí)一個對象：XMLHttpRequest

8、對象，如果掌握了它，就掌握了ajax。第一步：獲取XMLHttpRequest對象。大多數(shù)瀏覽器都支持該對象：var xhr = new XMLHttpRequest();IE6版本：var xhr = new ActiveXObject(“Msxml2.XMLHTTP”);IE5.5及其更早版本：var xhr = new ActiveXObject(“Microsoft.XMLHTTP”);北京傳智播客教育 XMLHttpRequest對象初始化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的開發(fā)步驟第二步：打開與服務(wù)器的鏈接xhr.open()方法，用來打開與服務(wù)器的鏈接，它需要三個參數(shù)。請求方式：可以是GET或POST請求的URL：指定服務(wù)器的資源。請求是否是異步

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

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

12、open()方法已調(diào)用，但還沒調(diào)用send()方法；2：請求發(fā)送完成狀態(tài)，send()方法已調(diào)用；3：開始讀取服務(wù)器響應(yīng)，響應(yīng)可能還沒結(jié)束。4：讀取服務(wù)器響應(yīng)結(jié)束。北京傳智播客教育 AJAX的開發(fā)步驟得到xhr對象的狀態(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ù)。雖然也是字符串，但是瀏覽器會自定解析該內(nèi)容，得到Document對象。北京傳智播客教育 XMLHttpRequest對象屬性北京傳智播客教育 發(fā)送請求-方法和屬性介紹利用XMLHttpRequest 實例與服務(wù)器進(jìn)行通信包含以下3個關(guān)鍵部分：onreadystatechange 事件處理函數(shù)open 方法send 方法 北京傳智播客教育 發(fā)送請求-方法和屬性介紹onreadystatechange:該事件處理函數(shù)由服務(wù)器觸發(fā)，而不是用戶在 Ajax 執(zhí)行過程中，服務(wù)器會通知客戶端當(dāng)前的通信狀態(tài)。這依靠更新 XMLHttpRequest 對象的 readyState 來實現(xiàn)

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

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

16、te().getTime(); 北京傳智播客教育 發(fā)送請求-方法和屬性介紹send(data)：open 方法定義了 Ajax 請求的一些細(xì)節(jié)。send 方法可為已經(jīng)待命的請求發(fā)送指令data：將要傳遞給服務(wù)器的字符串。若選用的是 GET 請求，則不會發(fā)送任何數(shù)據(jù)， 給 send 方法傳遞 null 即可：request.send(null);當(dāng)向send()方法提供參數(shù)時，要確保open()中指定的方法是POST，如果沒有數(shù)據(jù)作為請求體的一部分發(fā)送，則使用null.完整的 Ajax 的 GET 請求示例：使用get請求時send方法參數(shù)時null,如果傳值的話，服務(wù)器也接受不到北京傳智播客教

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

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

19、有被調(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é)束的時候，每個瀏覽器都會把 readyState 的值統(tǒng)一設(shè)為 4北京傳智播客教育 接收-方法和屬性介紹status服務(wù)器發(fā)送的每一個響應(yīng)也都帶有首部信息。三位數(shù)的狀態(tài)碼是服務(wù)器發(fā)送的響

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

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

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

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

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

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

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

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

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

29、avaScript 代碼來執(zhí)行。因為 JSON 的字符串就是由 JavaScript 代碼構(gòu)成的，所以它本身是可執(zhí)行的代碼實例：北京傳智播客教育 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