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为一个查询字符串转化的库，参照
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})