1. 手寫一個ajax get方法

var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
    if(xhr.readyState == 4){
        if(xhr.status>=200 &&xhr.status<300 || xhr.status == 304){
            console.log(xhr.responseText);
        }
    }
}
xhr.open('get','https://www.baidu.com',true);
xhr.send(Null);
 

考點：

1. 收到響應後，響應的資料會自動填充XHR物件的屬性，因此readState、status和responseText屬性要通過xhr去拿，而不是 回撥函式的引數！ 這是很多人容易 犯的一個錯誤。回撥函式傳回來的是event物件，該物件的target屬性指向的次啊是XMLHttpRequest例項。最好也不要通過this去獲取，因為作用域問題，有的瀏覽器中會報錯，因此為了可靠，應使用xhr物件來獲取這些屬性。

2. readyState屬性都代表什麼？
   0：未初始化。尚未呼叫open()方法；
   1：啟動。已經呼叫open()方法，但是未呼叫send()方法；
   2：傳送。已經呼叫send()方法，但尚未接收到響應；
   3：接收。已經接收到部分響應資料；
   4：完成。已經接收到全部響應資料。

3. 只要readyState屬性的值由一個變成另一個，就會觸發一個readystatechange事件，因此最好在open()之前制定onreadystatechange事件處理程式。

2 設定頭部資訊

使用setRequestHeader()方法設定自定義的請求頭部資訊。如：
xhr.setRequestHeader(‘MyHeader’,’MyValue’);
必須在open()方法之後，send()方法之前呼叫。

3 post請求，發生表單資料

方法一：
首先設定Content-Type頭部資訊為application/x-www-form-urlencoded;然後對錶單進行序列化處理，建立一個字串，最後傳送字串：

    xhr.open('post','/posturl',true);
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    var form=document.getElementById('form');
    xhr.send(serialize(form));

方法二：
使用FormData物件，該方法不必設定請求頭部。

var data= new FormData();
data.append('name','value');
//也可以通過項建構函式傳表單元素
var data=new FormDate(document.forms[0])

append()方法接收兩個引數：鍵和值。

4 XMLHttpRequest 2級

1. formData
2. 超時設定
   xhr.timeout = 1000
   xhr.ontimeout= function(){}
3. load事件
   xhr.onload=function(){}
   該方法在接收到完整的響應資料時觸發
4. abort事件
   呼叫abort()方法觸發

5. progress事件
   該事件在接收響應期間持續觸發

   xhr.onload=function(event){
   
   }

   event包含三個額外的屬性：lengthComputable、position和totalSize，分別表示進度資訊是否可用（boolean），已經接收的位元組數和總位元組數（根據響應頭部中的Content-Length獲取）