前后端数据交互（三）ajax封装及调用

　　有很多框架已经将 ajax 封装，需要的时候只需要调用就好，比如 jquery 是最常用的。我们为什么还需要学习 ajax 的封装呢？首先加强我们对ajax的认识，其次如果只是因为ajax请求需要引入框架，我们可以自己封装一个，这样就不需要引入多余的框架了。一、封装的注意点
　　封装是为了把相同的部分都实现公用，节省资源，提高代码复用性，工作效率也高，所以需要把不同的参数事件类型等通过调用的时候传入，需要注意点有：
　　1.1、传参
　　发送 ajax 请求时，主要参数有：请求url请求类型请求参数成功回调失败回调超时时间
　　以上六个参数必须设置成动态传入的，便于控制任意 ajax 请求。超时时间可以统一设置，如果作为传参可以更方便地控制任意一个请求超时。
　　1.2、请求类型分别处理
　　请求类型有 get 和 post 两种，get类型传值的时候，数据跟在url地址后，post传值时在请求体内携带，还需设置请求数据类型。所以需要判断分别处理。if(type == ＂GET＂){  xhr.open( ＂GET＂ , url+＂?＂+strData , true )  shr.send() }else{  xhr.open(＂POST＂,url,true)  xhr.setRequestHeader(＂content-type＂,＂application/x-www-form-urlencoded＂)  xhr.send( strData ) }
　　1.3、请求超时处理
　　网络服务异常或者接口异常的时候，请求发送出去没有响应，页面也不会做出任何反应，需要全局加一个超时处理，超出时间还没有返回时，自动结束请求，返回异常。
　　使用语法如下：//设置时间为2s xhr.timeout = 2000 ; //超时回调 xhr.ontimeout = function(){  console.log(＂网络异常，稍后重试＂) }
　　1.4、错误处理
　　网络中断，请求无法发送到服务器时，需要对请求失败进行处理。使用onerror事件处理。
　　使用语法如下：xhr.onerror = function(){  console.log(＂网络异常，请检查网络＂) }
　　二、封装 ajax 代码
　　根据ajax的请求流程，封装代码如下：便于以后使用，建议收藏。function ajax(option) {  // method, url, data, timeout, success, error  var xhr;  var str = data2str(option.data);  if (window.XMLHttpRequest) {   xhr = new XMLHttpRequest();  }else {   xhr = new ActiveXObject(＂Microsoft.XMLHTTP＂);  }  if (option.type.toLowerCase() === ＂post＂) {   xhr.open(option.type, option.url, true);    xhr.setRequestHeader(＂Content-type＂, ＂application/x-www-form-urlencoded＂);    xhr.send(str);   } else if (option.type.toLowerCase() === ＂get＂) {    xhr.open(option.type, option.url + ＂?＂ + str, true);    xhr.send();   }  xhr.onreadystatechange = function () {   if (xhr.readyState === 4) {    clearTimeout(timer);    if (xhr.status >= 200 && xhr.status < 300 || xhr === 304) {     option.success(xhr);    }else {     option.error(xhr);    }   }  };  if (option.timeout) {   var timer = setTimeout(function () {    xhr.abort();    clearTimeout(timer);   }, option.timeout)  } } // 将对象转化成用于传输的字符串 function data2str(data) {  var res = [];  data.t = new Date().getTime();  for (var key in data) {   res.push(encodeURIComponent(key) + ＂=＂ + encodeURIComponent(data[key]));  }  return res.join(＂&＂); }
　　使用的时候调用代码如下：ajax({   method:＂GET＂,   url:＂1.txt＂,   data:{    //请求数据   },   timeout:2000,   success:(res)=>{    console.log(＂成功返回＂,res.response)   },   error: err => {    console.log(＂错误信息＂,err)   }  })