創(chuàng)建xhr對象

var xhr = new XMLHttpRequest()

關(guān)于xhr對象屬性

• 追蹤xhr發(fā)送ajax的狀態(tài)
  1. xhr.readyState對象即是當(dāng)前請求對象的時(shí)時(shí)狀態(tài)
  2. 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è)請求過程已經(jīng)完畢.
  3. 通過上面可以發(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)2_{4而不會(huì)出現(xiàn)0}1；

4. xhr.readyState的每次變化都會(huì)觸發(fā)xhr.onreadystatechange事件

• 上傳和下載的進(jìn)度條的顯示
  1. xhr的進(jìn)度事件分為上傳xhr.upload.onprogress和下載的xhr.onprogress
  2. 都會(huì)給事件監(jiān)聽函數(shù)傳遞一個(gè)實(shí)參event對象,event.loaded表示已經(jīng)載入的數(shù)據(jù),event.total表示總共數(shù)量,前提是event. lengthComputable優(yōu)值得情況下才可以。

3. 栗子：

    //下載
     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
  1. 含義： 就是設(shè)置響應(yīng)數(shù)據(jù)類型,如果后臺返回的是個(gè)字符串的json,那么前臺設(shè)置xhr.responseType = 'json',那么自動(dòng)轉(zhuǎn)化成json對象，而不需要前臺JSON.parse()去轉(zhuǎn)化了

2. 可選值：
   • '' : 默認(rèn)就是字符串
   • 'json': 把后臺的字符串對象轉(zhuǎn)成json格式,如果后臺傳的根本不是字符串json或者json,那么前臺獲取不到,得到的xhr.response為null；
   • 后面的以后再寫吧,天快亮了

• 獲取response的信息（response, responseText, reponseXML）
  1. 三種屬性都必須等待xhr.status == 200和xhr.readyState == 4才能獲取到值,不然是''或者null和responseType設(shè)的值有關(guān)
  2. xhr.response 會(huì)返回響應(yīng)的數(shù)據(jù)
  3. xhr.responseText 只有當(dāng)responseType = 'text'或者'',才會(huì)有值返回，否則是Null

關(guān)于xhr對象的方法

• 設(shè)置請求頭-setRequestHeader(string headerType, string type)

 ??栗子： xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
- headerType:請求頭的鍵,常用的比如'Content-Type',這里其實(shí)是不區(qū)分大小寫的,等同于'content-type';
- type:請求頭的值,web客戶端常用的幾個(gè)分別是multipart/form-data來上傳圖片等文件適用于type=file,application/x-www-form-urlencoded來上傳表單數(shù)據(jù)
- xhr.setRequestHeader()方法必須寫在open()之后,send()方法之前，否則會(huì)報(bào)錯(cuò)
- 此方法可多次調(diào)用,如果鍵相同,也不會(huì)覆蓋,則會(huì)累加；

• 獲取響應(yīng)頭信息

1. xhr.getResponseHeader(string headerKey),獲取單個(gè)請求頭的信息,必須填寫一個(gè)自定義的請求頭的key(其實(shí)就是chrome控制臺里面,后臺返回給前臺的那些response headers里面的那些你想得到某個(gè)字段)；
2. xhr.getAllResponseHeaders(), 獲取所有的響應(yīng)頭的信息，就是chrome控制臺response headers里面的那些鍵值對都會(huì)返回；
3. 上面兩個(gè)方法并不是獲取到所有的信息,部分安全信息是獲取不到的,比如cookie之類的
4. 注意：要想獲取到響應(yīng)頭的信息,兩個(gè)方法都必須放在onreadystatechange方法中并且xhr.status === 200和xhr.readyState === 4才能成功獲取到

• send(data)和可以發(fā)送的數(shù)據(jù)
  1. send(data)中的data可以是以下幾種類型：

  ArrayBuffer
  Blob
  Document
  DOMString
  FormData
  null
  

  2. send(data)中的data類型會(huì)影響request中的Content-type請求類型,如下：
     • Document => text/html;charset=UTF-8
     • Strinf => text/plain;charset=UTF-8
     • FormData => multipart/form-data; boundary=[xxx]
  3. xhr.setRequestHeader會(huì)強(qiáng)制覆蓋這些默認(rèn)值

xhr對象的事件

• 事件列表(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)請求成功完成時(shí)觸發(fā),此時(shí)xhr.readystate=4
5. onerror > 在請求過程中,若發(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ò)層級別的異常才會(huì)觸發(fā)此事件,對于應(yīng)用層級別的異常,如響應(yīng)返回的xhr.statusCode是4xx
時(shí),并不屬于Network error,所以不會(huì)觸發(fā)onerror
事件,而是會(huì)觸發(fā)onload事件。