Ajax-快速上手前后端交互

Ajax

在之前自己也有總結過關於Ajax的筆記，各種的懵圈，通過一次項目和幾次的總結和分享，我對Ajax終於算是有了一定的理解和自己的見解。相信大家見過和度過了很多的關於Ajax的什么前世今生、大刀闊斧等文章，我自己也受益匪淺。在這里我就談談自己的簡單理解和用法。

• Ajax是什么？
  Ajax就是當瀏覽器（客戶端）向服務器發送請求時用的一種技術，它的核心是XMLHttpRequest對象，他最大的特點就是向服務器請求額外的數據而無須加載頁面（刷新），既異步加載。

• Ajax技術是怎樣實現請求的？
  目前Ajax技術有兩種方式實現請求：一、通過他的核心對象XHR（XMLHttpRequest的縮寫）；二、通過window.fetch()方法進行請求。
  1.1通過XHR對象進行請求（原生js）代碼如下：

    //1、創建XHR對象
    var request = new XMLHttpRequest();//在大多數瀏覽器中，在ie5、ie6中不支持這個方式
    //在ie5、ie6中兼容只需定義下面這個函數
    var request;
    if(window.XMLHttpRequest){
        request = new XMLHttpRequest();
    }else{
        request = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
  
    //2、進行請求完整代碼
    var xhr = '';
    var requestData = '';
    //兼容性處理
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
  
    xhr.open('GET/POST','url',true/false);//get和post請求，true為異步請求、false我為同步請求,請求的URL中可帶參數進行請求
    xhr.setRequestHeader("Content-type", "application/json");//添加http頭信息，該函數的順序必須是open之后，send之前
    xhr.send(JSON.stringify({
        name: '小明',
        age: 20
    }));//post的send(String)必須要，send用於發送請求參數，如果不需要請求體發送請求參數，則為null。
        //send傳輸的數據是以json數據格式傳給后台的。
    //返回響應
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
                //請求成功的處理函數，服務器返回的數據存入responseText屬性中
                requestData = xhr.responseText;//獲取到后台響應的數據
                var date = JSON.parse(requestData);//將響應數據轉化成json格式，以便使用
                //使用數據
                //~~~
            }else{
                //請求數據錯誤的處理函數
            }
        }else{
            //ajax發送失敗，沒有得到響應數據
        }
    }
  

  1.2使用jQuery的$.ajax()方法實現請求，代碼如下：

     $.ajax({
        type: 'GET',//請求方式
        url: 'url',//請求資源地址或請求接口
        data: {
            //請求參數
        },
        success: function(data){//服務器響應的數據都存入data中
            //請求成功處理函數
            if(data.status === '0'){
                alert(data.message);
            } else {
                //向自己的html添加服務器響應的數據
            }
        }
        error: function(){
            //請求失敗處理函數
        }
    });
  

  2、目前市場上已經在使用window.fetch()方法，XMLHttpRequest 是一個設計粗糙的 API，不符合關注分離（Separation of Concerns）的原則，配置和調用方式非常混亂，而且基於事件的異步模型寫起來也沒有現代的 Promise，generator/yield，async/await 友好。Fetch 的出現就是為了解決XHR的問題
  他的請求代碼如下：

    window.fetch(url).then(function(response){//響應值放入response中
        return response.json();//用json()方法把相應的數據轉化為javascript對象
    }).then(function(data)
        //請求成功處理函數
    }).catch(function(e){
        //請求失敗處理函數
    })
  

• Ajax擴展
  Ajax為了擴充他的功能，發展了XHR2,這里我就不再詳細說明，想要對Ajax的請求做詳細了解的可以查看我最初的Ajax學習筆記!