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})