ajax數據交互

記憶力愈來愈差，忽然發現segmentfoult的好處就是總結過的東西永遠在，隨時拿出來用，今天帶來的內容是ajax數據交互，由於最近項目中發現接口對接真夠麻煩的，使用別人寫好的框架也是蹩腳的很。本篇文章從原生的XMLHttpRequest對象談起，講述數據請求過程以及編碼過程。

1. 原生AJAX

所謂的Ajax就是異步的javascript和xml.所謂異步就是在不影響用戶的操做下發送請求過程，xml是一個數據格式，不過如今在ajax交互中，你們使用更爲簡單的json。

咱們都知道，ajax只是瀏覽器與服務器進行數據交互的方式之一，遵循HTTP協議，請求方式爲Get請求和POST提交，若是爲POST提交方式的時候，瀏覽器中的數據將會被封裝到請求報文中，此時問題出來了。如何格式化請求的數據？？？幾個意思呢？是這樣，舉個例子，若是此時瀏覽器想給服務器發送一組數據 {id:1001,name:'terry'},學過JS的同窗都知道，這是JS中的一個對象，可是在HTTP協議中，是不容許傳遞對象的，由於在文本中沒法表示一個對象，這裏就有了對象序列化的概念，就是將對象轉換爲一種文本描述，好比xml,再好比json,再好比查詢字符串。到底將數據轉換爲哪一種格式呢？這時候要先後臺協商一下，由於不一樣的序列化（編碼）方式會影響後臺開發者接受參數。所謂協議就是這樣的一種東西，你能夠在協議中聲明你發送的數據各位爲xml/json/querystring中的一種,而後你必定要記住，要把參數按照這個數據格式進行編碼，不然你就違背了協議！

以下，是我使用原生的XMLHttpRequest封裝的一個post方法

let post = ({url,data,successHandler,errorHandler})=>{
      //1. 實例化XMLHttpRequest對象
      let xhr = new XMLHttpRequest();
      //2. 打開請求
      xhr.open('post',url);
      //3. 設定返回值類型爲json
      xhr.responseType = "json";
      //4. 設置頭部信息
      xhr.setRequestHeader('Accept','application/json');
      //* 當前數據編碼爲表單編碼
      //xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
      //* 當前數據編碼爲json
      xhr.setRequestHeader('Content-Type','application/json')
      xhr.onreadystatechange = function(){
          //console.log(this.readystate);
          if(this.readyState == 4){
              if(this.status == 200){
                  // success
                  successHandler(this.response);
              } else {
                  //
                  errorHandler(this.response);
              }
          }
      };
      //5. 直接請求
      //將數據轉換爲查詢字符串
      xhr.send(data);
      //xhr.send(urlEncoded(data));
      //將數據轉換爲json
      xhr.send(JSON.stringify(data));
  }

在上述代碼中，我經過 xhr.setRequestHeader('Content-Type','application/json')這段代碼來聲明標準，也就是說：看好嘍，我給你發的數據格式爲application/json也就是所謂的json。而後在發送數據的時候我必定要 xhr.send(JSON.stringify(data));,這個代碼的意思發送數據的時候我將數據序列化爲JSON字符串。

好了，若是我想要發送給後臺查詢字符串的話該怎麼辦？仍是要兩步，第一步：設置請求頭信息，告知後臺個人數據格式xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')。第二步進行數據編碼xhr.send(qs.stringify(data));。注意這裏的qs爲一個查詢字符串轉化的庫，參照https://www.npmjs.com/package/qs

2. jQuery中的ajax

明白了原生ajax的交互方式，那麼第三方框架的交互方式就好理解了。咱們先看一下jquery中的$.ajax方法。語法是這樣的

$.ajax({
    url:'',
    method:'',
    dataType:''
    contentType:'application/x-www-form-urlencoded; charset=UTF-8',
    data:{},
    headers:{},
    processData:true
    ...
})

以上ajax中的參數是在數據交互中比較關鍵的幾個屬性，url,method,contentType比較簡單，分別表明請求地址，請求方式，期待服務器返回數據類型,dataType 的值不固定，而是Intelligent Guessersh，根據返回值的內容來決定是xml, json, script, or html。

• data ，發送給服務端的數據，若是是一個對象，默認會將該對象轉換爲查詢字符串，若是是get請求，那麼這個查詢字符串會拼接到請求地址後。好了，這裏提到了默認轉換爲查詢字符串，咱們在上面說過，必定要分兩步，第一請求頭部聲明，第二數據格式轉換。這裏既然作了轉換，確定會有請求頭部聲明，那就是contentType參數，該參數的默認值爲application/x-www-form-urlencoded; charset=UTF-8.
• processData ，默認爲true,也就是默認會讓jquery將data中的對象轉換爲查詢字符串。

好了，若是這時後臺須要咱們發送json數據化該怎麼辦？

$.ajax({
    processData:false,
    contentType:'application/json',
    data:JSON.stringify({
    
    })
})

在上述代碼中，processData:false表示禁用jquery的默認編碼功能，contentType:'application/json' 設置請求頭部信息，聲明當前請求數據格式爲json。最後再給data傳值的時候，須要先對數據進行序列化，將對象序列化爲JSON字符串。這樣就能夠發送一個JSON格式的數據了。

3. axios

axios又是另一套Ajax框架，基於Promise的，更加純粹的AJAX框架，在vue開發中使用axios會更爲方便的。

axios({
    url:'',
    method:'',
    baseURL:'',
    responseType:'json',
    headers:{
    
    },
    params:{
    },
    paramsSerializer:{}
    data:{
    
    },
    transformRequest:[],
    transformResponse:[],
})

以上，url與method與jquery中相似，表示請求地址和請求方式。baseURL是比jquery強大的地方，能夠爲全部請求設置基路徑，也就是說真正的請求地址應該是 baseURL+url。

• responseType ，與jQuery中的dataType相似，表示期待服務端返回的數據類型，默認爲JSON。
• headers ， 能夠設定請求頭信息
• params ， 請求參數，通常是在請求地址上攜帶的，注意與data的區別
• paramsSerializer ，序列化params
• data ， 在請求體中的數據，發送到服務器。 僅僅在請求方式爲'PUT', 'POST','PATCH' 的狀況下才能使用，另外，若是transformRequest設定爲空，data必須爲string, ArrayBuffer, hash, Stream
• transformRequest ，在數據發送的服務端以前，修改data數據
• transformResponse ，在響應數據發送到then catch以前處理響應數據

好了，明確了這些參數後，咱們考慮，如何發送json數據

axios.post('',{id:1001,name:'terry})

因爲默認headers中爲'Content-Type':'application/json'，同時發送post請求的時候axios會將data中的數據轉換爲json.因此咱們無需複雜處理便可發送json格式的數據。

那麼，若是發送查詢字符串嗎？仍是以前的兩步操做，第一設置請求頭信息，第二在請求前修改數據編碼。

axios.defaults.headers.post['Content-type']='application/x-www-form-urlencoded';
axios.defaults.transformRequest=[function(data){ qs.stringify(data);}]
axios.post('',{id:1001,name:'terry})