Ajax工作原理和原生JS的ajax封裝

前言：

　　之所以用ajax作為博客的開篇，是因為無論從ajax的出現還是從它的作用上來說，ajax對於前端無疑是意義重大的。甚至可以說，是ajax帶來了前端這個行業。當然，歷史並不能說明當下，曾經的輝煌也會有塵埃落定的時候，但對ajax而言，似乎並不如此。

 

正文：

 

一，定義：Asynchronous JavaScript and XML，意思是異步JS和XML；

　　解釋下異步，異步是相對於同步來說的，同步即同時進行（累積多了就排隊，一個一個執行，必須等上一個結束，才能到下一個），而異步就是執行到我了，我去旁邊繼續執行等結果，后面排隊的繼續不用等我結果出來再執行。

　　這是對於ajax的特點來設計的，因為ajax對后端數據的請求需要時間，而這個時間不利用起來就是浪費。當然，如果必須要等前一個的結果怎么辦，這就使用到JS中的重要部分——回調函數了，其實回調在JS中應用很多，只是我們對它沒有概念而已，像點擊事件執行的就是回調（先綁定事件，只有在點擊發生時，才會執行）。那么ajax也一樣，先請求數據，只有在狀態改變時才會執行接下來的（這個狀態包括請求成功和請求失敗）。

 

二，ajax特點：AJAX 是一種用於創建快速動態網頁的技術，對網頁的某部分進行更新，不用刷新整個網頁。

　　通過在后台與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。

 

三，ajax工作原理：先上一張圖，ajax實現的就是瀏覽器和服務器之間的數據交互

（圖片轉載自https://www.cnblogs.com/ygj0930/p/6126542.html）

 

四，ajax的核心：

　　 —XMLHTTPRequest對象，（是對象，就有屬性和方法）

　　—常用的方法：open("method", "url", "async")，

　　　　　　　　　　　　method表示通過什么方式進行服務器訪問，包括get和post；

　　　　　　　　　　　　url表示訪問服務器的地址；

　　　　　　　　　　　　async表示是否異步，包括true和false（注意：true表示異步）。

　　　　　　　　　send(content)，

　　　　　　　　　　　　content表示向服務器發送的數據。

　　—常用的屬性：先看一下簡單的代碼　

var xhr = new XMLHTTPRequest();

xhr.open("method", "url", "async");

xhr.send(null);

xhr.onreadystatechange = function(){

    if(xhr.readystate == 4){

　　　if(xhr.status == 200){

　　　　　console.log(xhr.responseText)

　　　}

　　}
}

 

下面進行說明：

　　1. 向服務器請求狀態的階段：

　　　onreadystatechange表示請求狀態改變的事件觸發器，

　　　readystate表示請求狀態，4表示完成，具體如下表：

 

　　2. 服務器反饋階段：

　　　status表示http請求狀態碼，200表示成功，具體如下表：

　　3. 服務器反饋的內容：（數據）

　　　responseText表示響應返回的文本，具體如下表：

（圖片轉載自https://blog.csdn.net/limuzi13/article/details/53636830?utm_source=itdadao&utm_medium=referral）

 

五、原生JS的ajax封裝

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工作原理”，本來想寫“原生JS的ajax和jQuery的ajax”的，先到這兒吧。