新前端108ajax教程精講2天07-ajax

1、AJAX1. 概述在此之前，可以通過以下幾種方式讓瀏覽器發(fā)出對服務(wù)端的請求，獲得服務(wù)端的數(shù)據(jù)：地址欄輸入地址，回車，刷新特定元素的 href 或 src 屬性表單提交這些方案都是無法通過或者很難通過代碼的方式進(jìn)行編程（對服務(wù)端發(fā)出請求并且接受服務(wù)端返回的響應(yīng)），如果可以通過 JavaScript 直接發(fā)送網(wǎng)絡(luò)請求，那么 Web 的可能就會，隨之能夠?qū)崿F(xiàn)的功能也會，至少不再是“單機(jī)”。AJAX（Asynchronous JavaScript and XML），最早出現(xiàn)在 2005 年的Suggest，是在瀏覽器端進(jìn)行網(wǎng)絡(luò)編程（發(fā)送請求、接收響應(yīng)）的技術(shù)方案，它使頁面。讓 Web 更能接近桌面應(yīng)用

2、的用戶體驗(yàn)?？梢酝ㄟ^ JavaScript 直接獲取服務(wù)端的內(nèi)容而不必重新加載說白了，A JAX 就是瀏覽器提供的一套 API，可以通過 JavaScript 調(diào)用，從而實(shí)現(xiàn)通過代碼控制請求與響應(yīng)。實(shí)現(xiàn)網(wǎng)絡(luò)編程。2. 快速上手能力不夠 API 湊。Web 程序最初的目的就是將信息（數(shù)據(jù)）放到公共的服務(wù)器，讓所有網(wǎng)絡(luò)用戶都可以通過瀏覽器。使用 AJAX 的過程可以類比平常網(wǎng)頁過程/ 1. 創(chuàng)建一個(gè) XMLHttpRequest 類型的對象 相當(dāng)于打開了一個(gè)瀏覽器var xhr = new XMLHttpRequest()1234567891011121314/ 2. 打開與一個(gè)之間的連接 相當(dāng)于

3、在地址欄輸入地址xhr.open(GET, ./time.)/ 3. 通過連接發(fā)送一次請求 相當(dāng)于回車或者點(diǎn)擊xhr.send(null)發(fā)送請求/ 4. 指定 xhr 狀態(tài)變化事件處理函數(shù) 相當(dāng)于處理網(wǎng)頁呈現(xiàn)后的操作xhr.onreadysechange = function () / 通過 xhr 的 readySe 判斷此次請求的響應(yīng)是否接收完成if (this.readySe = 4) / 通過 xhr 的 responseText 獲取到響應(yīng)的響應(yīng)體console.log(this)2.1. readySe由于 readys事件是在對象狀態(tài)變化時(shí)觸發(fā)（不單是在得到響應(yīng)時(shí)），也就意味著

4、這個(gè)事件會被echangexhr觸發(fā)多次，所以有必要了解每一個(gè)狀態(tài)值代表的含義：2.1.1. 時(shí)間軸UNSENTDONE初始化加載完成響應(yīng)體加載中接收到響應(yīng)頭建立連接LOADINGHEADERS_RECEIVEDOPENEDreadySe狀態(tài)描述說明0UNSENT（XHR）被創(chuàng)建，但尚未調(diào)用 open() 方法。1OPENEDopen() 方法已經(jīng)被調(diào)用，建立了連接。2HEADERS_RECEIVEDsend() 方法已經(jīng)被調(diào)用，并且已經(jīng)可以獲取狀態(tài)行和響應(yīng)頭。3LOADING響應(yīng)體中，屬性可能已經(jīng)包含部分?jǐn)?shù)據(jù)。4DONE響應(yīng)體完成，可以直接使用。responseTextresponseTex

5、tvar xhr = new XMLHttpRequest()console.log(xhr.readyS e) 3 / = 04 / 初始化 請求 對象5xhr.open(GET, time. )console.log(xhr.readyS e) 8 / = 19 / open 方法已經(jīng)調(diào)用，建立一個(gè)與服務(wù)端特定端口的連接1011 xhr.send()12xhr.addEventListener(readys echange, function () switch (this.readyS e) case 2:16 / = 217 / 已經(jīng)接受到了響應(yīng)報(bào)文的響應(yīng)頭18/ 可以拿到頭/ con

6、sole.log(this.getAllResponseHeaders()console.log(this.getResponseHeader(server)/ 但是還沒有拿到體console.log(this.responseText)break2526 case 3:27 / = 328 / 正在 響應(yīng)報(bào)文的響應(yīng)體，有可能響應(yīng)體為空，也有可能不完整29/ 在這里處理響應(yīng)體不保險(xiǎn)（不可靠）console.log(this.responseText)break3334 case 4:35 / = 436 / 一切 OK （整個(gè)響應(yīng)報(bào)文已經(jīng)完整 下來了）37/ 這里處理響應(yīng)體console.lo

7、g(this.responseText)break41 42 )通過理解每一個(gè)狀態(tài)值的含義得出一個(gè)結(jié)論：一般 都是在 readyS e 值為 4 時(shí)，執(zhí)行響應(yīng)的后續(xù)邏輯。xhr.onreadys echange = function () if (this.readyS e = 4) 3 / 后續(xù)邏輯.4 5 2.2. 遵循 HTTP 本質(zhì)上 XMLHttpRequest 就是 JavaScript 在 Web 中發(fā)送 HTTP 請求 段，所以 發(fā)送出去的請求 是HTTP 請求，同樣符合 HTTP 約定的格式：/ 設(shè)置請求報(bào)文的請求行xhr.open(GET, ./time. )/ 設(shè)置請求頭

8、xhr.setRequestHeader(Accept, text/plain)/ 設(shè)置請求體xhr.send(null)7xhr.onreadys echange = function () if (this.readyS e = 4) / 獲取響應(yīng)狀態(tài)碼console.log(this.s us)/ 獲取響應(yīng)狀態(tài)描述console.log(this.s usText)/ 獲取響應(yīng)頭信息console.log(this.getResponseHeader(ContentType) / 指定響應(yīng)頭console.log(this.getAllResponseHeader() / 全部響應(yīng)頭/

9、獲取響應(yīng)體console.log(this.responseText) / 文本形式console.log(this.responseXML) / XML 形式，了解即可不用了20 21 參考 ：3. 具體用法. /docs/Web/API/XMLHttpRequest. /docs/Web/API/XMLHttpRequest/Using XMLHttpRequest3.1. GET 請求3.2. T 請求3.3. 同步與異步關(guān)于同步與異步的概念在生活中有很多常見的場景，舉例說明。var xhr = new XMLHttpRequest()/ open 方法的第一個(gè)參數(shù)的作用就是設(shè)置請求的

10、method xhr.open( T, ./add. )/ 設(shè)置請求頭中的 ContentType 為 application/xwwwformurlencoded/ 標(biāo)識此次請求的請求體格式為 urlencoded 以便于服務(wù)端接收數(shù)據(jù)xhr.setRequestHeader(ContentType, application/xwwwformurlencoded)/ 需要提交到服務(wù)端的數(shù)據(jù)可以通過 send 方法的參數(shù)傳遞/ 格式：key1=value1&key2=value2 xhr.send(key1=value1&key2=value2)10 xhr.onreadys echange

11、= function () 11 if (this.readyS e = 4) 12 console.log(this.responseText) 13 14 T 請求過程中，都是采用請求體承載需要提交的數(shù)據(jù)。1 var xhr = new XMLHttpRequest()2 / GET 請求傳遞參數(shù)通常使用的是問號傳參3 / 這里可以在請求地址后面加上參數(shù)，從而傳遞數(shù)據(jù)到服務(wù)端4 xhr.open(GET, ./delete. ?id=1)5 / 一般在 GET 請求時(shí)無需設(shè)置響應(yīng)體，可以傳 null 或者干脆不傳6 xhr.send(null)7 xhr.onreadys echange

12、= function () 8 if (this.readyS e = 4) 9 console.log(this.responseText) 10 11 12/ 一般情況下 URL 傳遞的都是參數(shù)性質(zhì)的數(shù)據(jù)，而 T 一般都是業(yè)務(wù)數(shù)據(jù)通常在一次 GET 請求過程中，參數(shù)傳遞都是通過 URL 地址中的 ? 參數(shù)傳遞。xhr.open() 方法第三個(gè)參數(shù)要求傳入的是一個(gè) bool 值，其作用就是設(shè)置此次請求是否采用異步方式執(zhí)行，默認(rèn) 為 true ，如果需要同步執(zhí)行可以通過傳遞 false 實(shí)現(xiàn)：如果采用同步方式執(zhí)行，則代碼會卡死在 xhr.send() 這一步：演示同步異步差異。一定在發(fā)送請求

13、send() 之前 readys echange （不管同步或者異步）為了讓這個(gè)事件可以更加可靠（一定觸發(fā)），一定是先了解同步模式即可，切記不要使用同步模式。至此， 已經(jīng)大致了解了 AJAX 的基本 API 。console.log(before ajax)var xhr = new XMLHttpRequest()/ 同步方式xhr.open(GET, ./time. , false)/ 同步方式 執(zhí)行需要 先 事件再調(diào)用 send，否則 readys echange 無法觸發(fā)xhr.onreadys echange = function () if (this.readyS e = 4)

14、/ 這里的代碼最后執(zhí)行console.log(request done) 10 11 xhr.send(null)console.log(after ajax)console.log(before ajax)var xhr = new XMLHttpRequest()/ 默認(rèn)第三個(gè)參數(shù)為 true 意味著采用異步方式執(zhí)行xhr.open(GET, ./time. , true)xhr.send(null)xhr.onreadys echange = function () if (this.readyS e = 4) / 這里的代碼最后執(zhí)行console.log(request done) 1

15、0 11 12 console.log(after ajax)同步：一個(gè)人在同一個(gè)時(shí)刻只能做一件事情，在執(zhí)行一些耗時(shí)的操作（不需要看管）不去做別的事，只是等 待異步：在執(zhí)行一些耗時(shí)的操作（不需要看管）去做別的事，而不是等待3.4. 響應(yīng)數(shù)據(jù)格式關(guān)心 就是服務(wù)端發(fā)出何種格式的數(shù)據(jù)，這種格式如何在客戶端用 JavaScript 。3.4.1. XML一種數(shù)據(jù)描述老掉牙的東西，簡單演示一下，不在這里浪費(fèi)時(shí)間，基本現(xiàn)在的項(xiàng)目不用了。 淘汰的原因：數(shù)據(jù)冗余太多3.4.2. JSON也是一種數(shù)據(jù)描述 ，類似于 JavaScript 字面量方式服務(wù)端采用 JSON 格式返回?cái)?shù)據(jù)，客戶端按照 JSON 格式

16、數(shù)據(jù)。3.5. 處理響應(yīng)數(shù)據(jù)渲染模板引擎實(shí)際上就是一個(gè) API，模板引擎有很多種，使用方式大同小異，目的為了可以更容易的將數(shù)據(jù)渲染到 HTML中3.6. 兼容方案XMLHttpRequest 在老版本瀏覽器（IE5/6）中有兼容問題，可以通過另外 式代替1 var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject( .XMLHTTP)模板引擎：artTemplate：不管是 JSON 也好，還是 XML，只是在 AJAX 請求過程中用到，并不代表它們之間有必然的聯(lián)系，它們只是 數(shù)據(jù)協(xié)議罷了提問：如果希望

17、服務(wù)端返回一個(gè)復(fù)雜數(shù)據(jù)，該如何處理？4. 封裝4.1. AJAX 請求封裝函數(shù)就可以理解為一個(gè)想要做的事情，函數(shù)體中約定了這件事情做的過程，直到調(diào)用時(shí)才開始工作。 將函數(shù)作為參數(shù)傳遞就像是將一個(gè)事情交給別人，這就是委托的概念1 /* 發(fā)送一個(gè) AJAX 請求* param String method 請求方法* param String url 請求地址* param Object params 請求參數(shù)* param Function done 請求完成過后需要做的事情（委托/回調(diào)）7 */function ajax (method, url, params, done) / 轉(zhuǎn)換為大寫便于

18、后續(xù)判斷method = method.toUpperCase()11/ 對象形式的參數(shù)轉(zhuǎn)換為 urlencoded 格式var pairs = for (var key in params) pairs.push(key + = + paramskey) 16 17 var querystring = pairs.join(&)1819 var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : newActiveXObject( .XMLHTTP)20 xhr.addEventListener(readys echange, funct

19、ion () if (this.readyS e != 4) return23/ 嘗試通過 JSON 格式 響應(yīng)體try 26done(JSON.parse(this.responseText)27 catch (e) 28done(this.responseText)29 30 )31/ 如果是 GET 請求就設(shè)置 URL 地址 問號參數(shù)if (method = GET) url += ? + querystring35 3637 xhr.open(method, url)38/ 如果是 T 請求就設(shè)置請求體var data = nullif (method = T) xhr.setRequ

20、estHeader(ContentType, application/xwwwformurlencoded)data = querystring44 45 xhr.send(data)46 474.2. jQuery 中的 A JAXjQuery 中有一套專門針對 A JAX 的封裝，功能十分完善，經(jīng)常使用，需要著重注意。4.2.1. $.ajax常用選項(xiàng)參數(shù)介紹：url：請求地址 type：請求方法，默認(rèn)為 get da ype：服務(wù)端響應(yīng)數(shù)據(jù)類型1 $.ajax(2 url: ./get. ,type: get,da ype: json,data: id: 1 ,beforeSend: f

21、unction (xhr) console.log(before send) 8 ,9 suc s: function (data) 10 console.log(data)11 ,error: function (err) console.log(err)14 ,complete: function () console.log(req ompleted) 17 18 )參考： HYPERLINK http:/category/ajax/ http:/category/ajax/http:.cn/jquery/jquery ref ajax.asp48495051525354ajax(get

22、, ./get. , id: 123 , function (data) console.log(data)ajax( t, ./ t. , foo: ted data , function (data) console.log(data)contentType：請求體內(nèi)容類型，默認(rèn) application/x-www-form-urlencoded data：需要傳遞到服務(wù)端的數(shù)據(jù)，如果 GET 則通過 URL 傳遞，如果 T 則通過請求體傳遞 timeout：請求超時(shí)時(shí)間beforeSend：請求發(fā)起之前觸發(fā)suc s：請求成功之后觸發(fā)（響應(yīng)狀態(tài)碼 200） error：請求失敗觸發(fā) co

23、mplete：請求完成觸發(fā)（不管成功與否）4.2.2. $.getGET 請求快捷方法4.2.3. $. tT 請求快捷方法4.2.4. 全局事件處理4.2.5. 內(nèi)容（作業(yè)）$(selector).load()$.getJSON()$.getScript()簡單概括以上方法的作用和基本用法。5. 跨域5.1. 相關(guān)概念同源策略是瀏覽器的一種安全策略，所謂同源是指 ，協(xié)議，端口完全相同，只有同源的地址才可以相互通過A JAX 的方式請求。同源或者不同源說的是兩個(gè)地址之間的關(guān)系，不同源地址之間請求 稱之為跨域請求同源？例如：http/detail.html 與一下地址對比 HYPERLINK h

24、ttp:/category/ajax/global-ajax-even http:/category/ajax/global-ajax-even ndlers/5.2. 解決方案現(xiàn)代化的 Web 應(yīng)用中肯定會有不同源的現(xiàn)象，所以必然要解決這個(gè)問題，從而實(shí)現(xiàn)跨域請求。 參考：5.2.1. JSONPJSON with Padding，是一種借助于 script 發(fā)送跨域請求的技巧。其原理就是在客戶端借助 script 請求服務(wù)端的一個(gè) 頁（ 文件），服務(wù)端的這個(gè) 頁返回一 段帶有函數(shù)調(diào)用的 JavaScript 全局函數(shù)調(diào)用的 ，將原本需要返回給客戶端的數(shù)據(jù)傳遞進(jìn)去。以后絕大多數(shù)情況都是采用 JSONP 段完成不同源地址之間的跨域請求客戶端服務(wù)端返回的結(jié)果總結(jié)一下：由于 XMLHttpRequest 無法發(fā)送不同源地址之間的跨域請求，所以 須要另尋他法，script 這種方 案就是 最終選擇的方式， 把這種方式稱之為 JSONP，如果你不了解原理，先記住怎么用，多用一段時(shí)間再 來看原理。1 foo(我, 是, 你, 原, 本, 需, 要, 的, 數(shù), 據(jù))1 對比地址是否同源原因http/detail.html不同源不同https/detail.html不同源協(xié)議不同http:8080/detail.html不