通過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);