創(chuàng)建xhr對(duì)象
var xhr = new XMLHttpRequest()
關(guān)于xhr對(duì)象屬性
-
追蹤xhr發(fā)送ajax的狀態(tài)
- xhr.readyState對(duì)象即是當(dāng)前請(qǐng)求對(duì)象的時(shí)時(shí)狀態(tài)
- xhr.readyState有四種狀態(tài)
- 0: open()方法還未被調(diào)用
- 1: send()方法還未被調(diào)用
- 2: send()方法已經(jīng)被調(diào)用, 響應(yīng)頭和響應(yīng)狀態(tài)已經(jīng)返回.
- 3: 響應(yīng)體下載中; responseText中已經(jīng)獲取了部分?jǐn)?shù)據(jù).
- 4: 整個(gè)請(qǐng)求過(guò)程已經(jīng)完畢.
- 通過(guò)上面可以發(fā)現(xiàn),當(dāng)xhr.open()沒有執(zhí)行膳算，打印xhr.readyState即是0,當(dāng)然xhr.send()沒有執(zhí)行,xhr.readyState即是1，如果執(zhí)行了open()和send()那么readyState只可能會(huì)出現(xiàn)24而不會(huì)出現(xiàn)01弛作；
- xhr.readyState的每次變化都會(huì)觸發(fā)xhr.onreadystatechange事件
-
上傳和下載的進(jìn)度條的顯示
- xhr的進(jìn)度事件分為上傳xhr.upload.onprogress和下載的xhr.onprogress
- 都會(huì)給事件監(jiān)聽函數(shù)傳遞一個(gè)實(shí)參event對(duì)象,event.loaded表示已經(jīng)載入的數(shù)據(jù),event.total表示總共數(shù)量,前提是event. lengthComputable優(yōu)值得情況下才可以涕蜂。
- 栗子：
//下載 xhr.onprogress = progressHandle //上傳 xhr.upload.onprogress = progressHandle function progressHandle(e) { var e = e || event if(e.lengthComputable) { return Math.round(e.loaded / e.total * 100)+'%' } }
-
指定響應(yīng)的數(shù)據(jù)類型 xhr.responseType
-
含義：就是設(shè)置響應(yīng)數(shù)據(jù)類型,如果后臺(tái)返回的是個(gè)字符串的json,那么前臺(tái)設(shè)置xhr.responseType = 'json',那么自動(dòng)轉(zhuǎn)化成json對(duì)象，而不需要前臺(tái)JSON.parse()去轉(zhuǎn)化了
-
- 可選值：
- '' : 默認(rèn)就是字符串
- 'json': 把后臺(tái)的字符串對(duì)象轉(zhuǎn)成json格式,如果后臺(tái)傳的根本不是字符串json或者json,那么前臺(tái)獲取不到,得到的xhr.response為null映琳；
- 后面的以后再寫吧,天快亮了
-
獲取response的信息（response, responseText, reponseXML）
- 三種屬性都必須等待xhr.status == 200和xhr.readyState == 4才能獲取到值,不然是''或者null和responseType設(shè)的值有關(guān)
- xhr.response 會(huì)返回響應(yīng)的數(shù)據(jù)
- xhr.responseText 只有當(dāng)responseType = 'text'或者'',才會(huì)有值返回机隙，否則是Null
關(guān)于xhr對(duì)象的方法
- 設(shè)置請(qǐng)求頭-setRequestHeader(string headerType, string type)
??栗子： xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
- headerType:請(qǐng)求頭的鍵,常用的比如'Content-Type',這里其實(shí)是不區(qū)分大小寫的,等同于'content-type';
- type:請(qǐng)求頭的值,web客戶端常用的幾個(gè)分別是multipart/form-data來(lái)上傳圖片等文件適用于type=file,application/x-www-form-urlencoded來(lái)上傳表單數(shù)據(jù)
- xhr.setRequestHeader()方法必須寫在open()之后,send()方法之前，否則會(huì)報(bào)錯(cuò)
- 此方法可多次調(diào)用,如果鍵相同,也不會(huì)覆蓋,則會(huì)累加萨西；
- 獲取響應(yīng)頭信息
- xhr.getResponseHeader(string headerKey),獲取單個(gè)請(qǐng)求頭的信息,必須填寫一個(gè)自定義的請(qǐng)求頭的key(其實(shí)就是chrome控制臺(tái)里面,后臺(tái)返回給前臺(tái)的那些response headers里面的那些你想得到某個(gè)字段)有鹿；
- xhr.getAllResponseHeaders(), 獲取所有的響應(yīng)頭的信息，就是chrome控制臺(tái)response headers里面的那些鍵值對(duì)都會(huì)返回谎脯；
- 上面兩個(gè)方法并不是獲取到所有的信息,部分安全信息是獲取不到的,比如cookie之類的
-
注意：要想獲取到響應(yīng)頭的信息,兩個(gè)方法都必須放在onreadystatechange方法中并且xhr.status === 200和xhr.readyState === 4才能成功獲取到
-
send(data)和可以發(fā)送的數(shù)據(jù)
- send(data)中的data可以是以下幾種類型：
ArrayBuffer Blob Document DOMString FormData null- send(data)中的data類型會(huì)影響request中的Content-type請(qǐng)求類型,如下：
- Document => text/html;charset=UTF-8
- Strinf => text/plain;charset=UTF-8
- FormData => multipart/form-data; boundary=[xxx]
- xhr.setRequestHeader會(huì)強(qiáng)制覆蓋這些默認(rèn)值
xhr對(duì)象的事件
-
事件列表(xhr和xhr.upload都有)
onloadstart
onprogress
onabort
ontimeout
onerror
onload
onloadend
- **觸發(fā)條件**
1. onreadystatechange > 每當(dāng)xhr.readyState改變時(shí)觸發(fā);xhr.readyState由非0值變?yōu)?時(shí)不觸發(fā)葱跋。
2. onloadstart > 調(diào)用xhr.send()方法后立即觸發(fā),若xhr.send()未被調(diào)用則不會(huì)觸發(fā)此事件。
3. onprogress > xhr.upload.onprogress在上傳階段(即xhr.send()之后,xhr.readystate=2之前)觸發(fā),每50ms觸發(fā)一次;xhr.onprogress在下載階段(即xhr.readystate=3時(shí))觸發(fā),每50ms觸發(fā)一次源梭。
4. onload > 當(dāng)請(qǐng)求成功完成時(shí)觸發(fā),此時(shí)xhr.readystate=4
5. onerror > 在請(qǐng)求過(guò)程中,若發(fā)生Network error則會(huì)觸發(fā)此事(若發(fā)生Network error時(shí),上傳還沒有結(jié)束,則會(huì)先觸發(fā)xhr.upload.onerror,再觸發(fā)xhr.onerror;若發(fā)生Network error時(shí),上傳已經(jīng)結(jié)束,則只會(huì)觸發(fā)xhr.onerror. **注意**,只有發(fā)生了網(wǎng)絡(luò)層級(jí)別的異常才會(huì)觸發(fā)此事件,對(duì)于應(yīng)用層級(jí)別的異常,如響應(yīng)返回的xhr.statusCode是4xx
時(shí),并不屬于Network error,所以不會(huì)觸發(fā)onerror
事件,而是會(huì)觸發(fā)onload事件娱俺。
