與服務器進行數據交互的方法——ajax，axios,fetch

一，與服務器交互的類型

　　同步交互：

　　　　理解1：同步是阻塞模式，同步交互時，兩個線程的運行是相關的，a線程在運行時，b線程要阻塞等待，直到a線程運行完畢

　　　　理解2：同步交互時，客戶端發出請求後，須要等待服務器相應結束之後，才能發出第二個請求。

　　　　例：再作用戶登陸功能時，必須檢測用戶名密碼都正確之後才能進入系統。

　　異步交互：

　　　　理解1：異步是非阻塞模式，異步交互時，兩個線程的運行不相關，a線程運行時，b線程也正常運行。

　　　　理解2：異步交互時，客戶端發出請求後，不須要等待服務器相應結束，就能夠發出第二個請求。

　　　　例：用戶登陸系統後，系統會刷新系統頁面數據，此時存在多個數據接口與服務器進行交互，好比文字顯示部分的數據接口已經交互完成，但圖片顯示部分還在加載（可能接口還將來得及發出請　　　　　　　求，也可能接口發出請求後還未得到響應）。

二，交互方式之ajax

　　定義：AJAX是「Asynchronous Javascript And XML」的縮寫，翻譯成中文就是「異步Javascript和XML」。即便用js語言與服務器進行交互，傳輸的數據爲XML(不僅是XML)

　　實現：

　　　　1.XMLHttpRequest對象

　　　　　　用於在後臺與服務器進行交互數據

//建立XMLHttpRequest對象
    const variable1 = new XMLHttpRequest();
    //老版本瀏覽器
    //const variable2 = new ActiveObject('Microsoft.XMLHTTP');


    //爲了兼容:
    let xmlhttp;
    if (window.XMLHttpRequest) {
      xmlhttp = new XMLHttpRequest();
    } else {
      xmlhttp = new ActiveObject('Microsoft.XMLHTTP');
    }
    或者
    function createXMLHttpRequest(){
      try{
            return new XMLHttpRequest();
          }catch(e){
             return new ActiveObject('Microsoft.XMLHTTP')
           }          
    }

        　　2.向服務器發送請求

　　　　　　此時用到XMLHttpRequest對象的open()和send()方法：open(),send();

open(method,url,async)
　　method:請求類型GET,POST,PUT
　　url：請求地址
     async:true(異步)或false(同步)
send(string)
     string:僅用於POST請求。                

　　　　3.服務器相應：

   　　　　若是想得到來自服務器的相應，請使用XMLHttpRequest對象的responseText或者responseXML。

　　　　4.onreadystatechange

　　　　　當請求被髮送到服務器時，咱們須要執行一些基於響應的任務。每當 readyState 改變時，就會觸發 onreadystatechange 事件。

　　　　　readyState 屬性存有 XMLHttpRequest 的狀態信息,狀態從0-4發生變化。

　　　　　　0：請求未初始化，

　　　　　　1：服務器鏈接已經創建，

　　　　　　2：請求已經接收，

　　　　　　3：請求處理中，

　　　　　　4：請求已完成，且響應已就緒。

　　　　另外服務器的狀態碼：

　　　　　　200：‘成功’，404：‘未你找到頁面’，500：服務器內部錯誤，401：訪問資源的權限不足，等；

　　　　5.最終實現

　　　　　　

function creatXmlHttpRequest() {
      let xmlHttp
      try {
        xmlHttp = new XMLHttpRequest();
      } catch (e) {
        xmlHttp = new ActiveXObject('Microsift.XMLHTTP')
      }
      return xmlHttp;
    }
    let xmlHttp = creatXmlHttpRequest();
    xmlHttp.onreadystatechange = function () {
      if (xmlHttp.readystate === 4 && xmlhttp.status === 200) {
        document.getElementById('myDiv').innerHTML = xmlhttp.responseText;
      }
    }
    xmlhttp.open("GET", "url", true);
    xmlhttp.send();

   /*
    建立XMLHttpRequest對象；
    調用open()方法打開與服務器的鏈接；
    調用send()方法發送請求；
    爲XMLHttpRequest對象指定onreadystatechange事件函數，這個函數會在
    XMLHttpRequest的狀態改變時被調用；一般咱們只關心狀態爲4的時候。
    XMLHttpRequest對象的status屬性表示服務器狀態碼，它只有在readyState爲4時才能獲取到。
    XMLHttpRequest對象的responseText屬性表示服務器響應內容，它只有在
    readyState爲4時才能獲取到！
  */

//jQuery ajax實現：

$.ajax({
   type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {} });

　　注意：

　　　　1.ajax使用javascript技術向服務器發送異步請求，無須刷新整個頁面（性能提高）

　　　　2.ajax雖然提升了用戶體驗，但無形中向服務器發送的請求次數增多了，致使服務器壓力增大

　　　　3.由於ajax是在瀏覽器中使用Javascript技術完成的，因此還須要處理瀏覽器兼容性問題；

　　　　4.JQueryajax基於原生的XHR開發，另外JQuery整個項目太大，單純使用ajax卻要引入整個JQuery很是的不合理.（JQueryajax 不符合如今前端MVVM的浪潮）

　　　　5.MVVM 的核心是 ViewModel 層，它就像是一箇中轉站，負責轉換 Model 中的數據對象來讓數據變得更容易管理和使用，該層向上與視圖層進行雙向數據綁定，向下與 Model 層經過接口請求進行數據交互，起呈上啓下做用。

三，交互方式之axios

　　定義：基於promise用於瀏覽器和node.js的http客戶端

　　 安裝：

　　　　1.npm 安裝：  $npm install axios

　　　　2.bower安裝：$bower install axios

　　　　3.CDN引入：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

 　　實現方式：

axios({
    method: method,    //method:GET,POST,PUT
    url: url,         //請求地址
    data:data,     //請求參數  {username:'eee',password:'123456'};
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});    

/*另一種方式*/
//GET   
axios.get('/getData?ID=12')
　　.then(function(response){
　　console.log(response)
}).catch(function(e){console.log(e)});
或者：

axios.get('/getData'，{params:{ID:12}}})
　　.then(function(response){
　　console.log(response)
}).catch(function(e){console.log(e)});

//POST
axios.post('/login',{
　　name:'chenke',
　　password:'123456'
}).then(function(response){
　　console.log(response)
}).catch(function(e){console.log(e)});

  　　同時執行多個併發請求：

function getData1(){
   return axios.get('/getData?ID=19');  
}

function getData2(){
   return axios.get('/getData?ID=20');  
}

axios.all([getData1(),getData2()])
.then(axios.spread(function(response1,response2){
   //兩個請求都執行完成。
}))

　　注意：

　　　　1.從node.js建立http請求，支持Promise API,客戶端支持防止CSRF（跨站請求僞造）

　　　　2.能轉換請求和響應數據，能攔截請求和響應，能自動轉換JSON數據，也能取消請求。

四，交互方式之fetch

　　和XMLHttpRequest(XHR)同樣，Fetch也是瀏覽器的原生API(沒有使用XMLHttpResquest),jquery的ajax實際上是封裝了XHR.

　　實現：

fetch('/servers/getData',{ID='1'})   //fetch(url,options)
    .then((response)=>{
      console.log(response);
       return response;
}).catch(e=>{
    console.log(e);
    return e;
})           
/*
   1.fetch api返回的是一個promise
   2.options:
         -method:HTTP請求方法，默認GET  
         -body:請求參數
         -header(Object):請求頭，默認爲{}
         -credentials:默認爲omit，忽略的意思，也就是不帶cookie,還有兩個參數，same-origin,意思是同源請求帶cookie;include,表示不管跨域仍是同源請求都會帶cookie
*/

fetch優勢：

　　1.寫法更簡單，基於標準promise實現，脫離XHR,是ES裏的實現方式，支持asyn/await。  

fetch缺點：

　　1.fetch只對網絡請求報錯，對400,500都當作成功的請求，服務器返回4xx(400,401等),5xx錯誤碼時並不會reject,只有其餘的網絡錯誤致使請求不能完成時，fetch纔會被reject.

　　2.fetch默認不帶cookie,須要在options裏添加配置項，{credentials：‘include’}

　　3.fetch沒有辦法原生檢測請求的進度，而XHR能夠。

　　4.fetch不支持abort,不支持超時控制，使用setTimeOut及Promise.reject實現的超時控制並不能阻止請求過程繼續在後臺運行，浪浪費流量。