[分享]ajax数据交互

记忆力越来越差，突然发现好处就是总结过的东西永远在，随时拿出来用，今天带来的内容是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