什麼！你想要封裝好的ajax

一智獨秀發表於2020-06-06
封裝

ajax作為前端開發領域一個必不可少的內容，也是靈魂所在，今天就ajax的封裝給大家做一個分析， 如果沒有猜錯的話現在基本上用原生去寫ajax的意見不多了，這是肯定的 ，為什麼這麼說，jq的ajax大家肯定都很熟悉不過了前兩年又出來的axios，因其簡潔的語法與受到vue作者的青睞，一度熱度居高不下，基本滿足所有的請求，本質上也是對原生XHR的封裝，只不過它是Promise的實現版本，符合最新的ES規範，它本身具有以下特徵： 1.從瀏覽器中建立 XMLHttpRequest 2.支援 Promise API 3.客戶端支援防止CSRF 4.提供了一些併發請求的介面（重要，方便了很多的操作） 5.從 node.js 建立 http 請求 6.攔截請求和響應 7.轉換請求和響應資料 8.取消請求 9.自動轉換JSON資料 PS:防止CSRF:就是讓你的每個請求都帶一個從cookie中拿到的key, 根據瀏覽器同源策略，假冒的網站是拿不到你cookie中得key的，這樣，後臺就可以輕鬆辨別出這個請求是否是使用者在假冒網站上的誤導輸入，從而採取正確的策略。

廢話不多說今天分析下封裝的過程幾原理：

function ajax(){ 
  var ajaxData = { 
    type: (arguments[0].type || "GET").toUpperCase(), 
    url: arguments[0].url || "", 
    async: arguments[0].async || "true", 
    data: arguments[0].data || null, 
    dataType: arguments[0].dataType || "json", 
    contentType: arguments[0].contentType || "application/x-www-form-urlencoded; charset=utf-8", 
    beforeSend: arguments[0].beforeSend || function(){}, 
    success: arguments[0].success || function(){}, 
    error: arguments[0].error || function(){} 
  } 

  ajaxData.beforeSend() 
  var xhr = createxmlHttpRequest();  
  xhr.responseType=ajaxData.dataType; 

  xhr.open(ajaxData.type,ajaxData.url,ajaxData.async);  
  xhr.setRequestHeader("Content-Type",ajaxData.contentType);  
  xhr.send(convertData(ajaxData.data));  

  xhr.onreadystatechange = function() {  
    if (xhr.readyState == 4) {  
      if(xhr.status == 200){ 
        ajaxData.success(xhr.response) 
      }else{ 
        ajaxData.error() 
      }  
    } 
  }  
} 

function createxmlHttpRequest() {  
  if (window.ActiveXObject) {  
    return new ActiveXObject("Microsoft.XMLHTTP");  
  } else if (window.XMLHttpRequest) {  
    return new XMLHttpRequest();  
  }  
} 
  
function convertData(data){ 
  if( typeof data === 'object' ){ 
    var convertResult = "" ;  
    for(var c in data){  
      convertResult+= c + "=" + data[c] + "&";  
    }  
    convertResult=convertResult.substring(0,convertResult.length-1) 
    return convertResult; 
  }else{ 
    return data; 
  } 
}

ajax({ 
  type:"POST", 
  url:"ajax.php", 
  dataType:"json", 
  data:{
    "name":"abc",
    "age":123,
    "id":"456"　}, 
  beforeSend:function(){ 
    //some js code 
  }, 
  success:function(msg){ 
    console.log(msg) 
  }, 
  error:function(){ 
    console.log("error") 
  } 
})

幾點說明： IE7及其以上版本中支援原生的 XHR 物件，因此可以直接用： var oAjax = new XMLHttpRequest(); IE6及其之前的版本中，XHR物件是通過MSXML庫中的一個ActiveX物件實現的。使用下面的語句建立： var oAjax=new ActiveXObject(’Microsoft.XMLHTTP’); GET 請求方式是通過URL引數將資料提交到伺服器的，POST則是通過將資料作為 send 的引數提交到伺服器；POST 請求中，在傳送資料之前，要設定表單提交的內容型別；

//可以以下步驟代替上面的open、setRequestHeader、send三行，此處對GET和POST做了很好的區分
    var params = {};
    for(var key in ajaxData.data){
         params.push(key + "=" + ajaxData.data[key]);
    }
    var sendData = params.join("&");
    if(ajaxData.type.toUpperCase() == "GET"){
         xhr.open(ajaxData.type, ajaxData.url + "?" + sendData, ajaxData.async);
         xhr.send(null);
    }else{
         xhr.open(ajaxData.type, ajaxData.url, ajaxData.async);
         xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");
         xhr.send(sendData);
    }

基本上內容都在這兒了 這個過程也是ajax基本的工作原理了，今天的知其然知其所以然環節就到這裡，感謝南歌子提供的靈感

相關文章