經過XMLHttpRequest,ActiveXObject實現ajax請求

今天學習了原生的ajax請求。我將涉及到的ajax請求方法封裝成了一個對象：

var xhr={
    getXHR: function(){
         var XHR =  null;
         if( typeof window.ActiveXObject != 'undefined'){
            XHR = xhr.createActiveXObject();
        } else{
            XHR = xhr.createStandardXHR();
        }
         return XHR;
    },
    createActiveXObject: function(){
         try{
             return  new window.ActiveXObject("Mscrosoft.XMLHttp");
        } catch(e){}
    },
    createStandardXHR: function(){
         try{
             return  new window.XMLHttpRequest();
        } catch(e){}
    },

    onreadystatechange: function(xhr,callback){
         if(!callback){ return;}
         if(xhr.readyState == 4){
             if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                callback(xhr.responseText);
            }
        }
    },
     // IE8+
    ontimeout: function(callback){
         if(!callback){ return;}
        callback();
    },
    onprogress: function(event,callback){
        console.log("dsss");
         if(!callback){ return;}
        callback(event);
    }
};

 

發送一個請求：

var XHR = xhr.getXHR();
    XHR.onreadystatechange=xhr.onreadystatechange( function(data){
    console.log(data);
    });

    XHR.timeout=10000;

    XHR.ontimeout = xhr.ontimeout( function(){
        alert("timeout");
    });

    XHR.onprogress = xhr.onprogress( function(event){
        console.log(event.totalSize);
    });

    XHR.open("get","url", true);
    XHR.send( null);

open方法接收三個參數，請求類型，請求url，是不是異步。

當爲異步請求時，XHR的readystate屬性有如下屬性值：

當爲0時，即表示沒有調用open()方法；

當爲1時，此時已經調用了open()方法；

當爲2時，此時已經調用了send()方法；

當爲3時，此時已經有部門的數據相應了；

當爲4時，此時數據已經所有相應，並且能夠在客戶端使用了；

 

每次readyState的值改變，都會觸發一次onreadystatechange事件，所以要在調用open()以前指定onreadystatechange事件以便判斷是否已經響應完成且能夠使用數據了。

對onreadystatechange事件的處理程序爲：

 

 onreadystatechange: function(xhr,callback){
         if(!callback){ return;}
         if(xhr.readyState == 4){
             if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                callback(xhr.responseText);
            }
        }
    },

首選檢測是否已經接收了所有響應數據，所以須要判斷xhr.readyState的值是否爲4；

當響應完成後，響應結果存在多種，有的是500失敗了，有的是404未找到等等。所以須要根據返回的狀態status的值來判斷響應是否成功。當status爲304時，表示的是該資源緩存了，直接取的緩存數據。

 

XHR.send(null) ：發送請求，當沒有參數傳遞時，參數爲null;當爲get請求時，攜帶的參數須要經過encodeURIComponent進行編碼。

也能夠自定義請求的頭部信息，在send()與open()方法之間進行設置：

XHR.sendRequestHeader(key,value);