Ajax封装函数

项目场景：

提示：这里简述项目相关背景：

例如：当需要发送Ajax请求时，可以通过调用该Ajax封装函数，减少重复书写的麻烦。

---

导入reAjax.js

提示：这里描述如何使用Ajax封装函数：

例如：我们要在自己的项目中发送Ajax请求首先要导入reAjax.js文件：

<script src="reAjax.js"></script>

---

参数分析：

提示：这里我们对reAjax函数参数进行分析：

methed：请求方式
url：请求地址
data：携带参数（可选）
success：回调函数

reAjax({
  methed: 'GET',
  url: 'http://www.liulongbin.top:3006/api/getbooks',
  //data: {} 可选
  success: resp => console.log(resp)
});

---

函数解析：

提示：这里分析reAjax函数具体实现过程：

/* reAjax(ajaxObj: Object)
 * Ajax请求响应封装
 * @param (methed) 请求方式
 * @param (url) 请求地址
 * @param (data) 携带参数（可选）
 * @param (success) 回调函数
 */

const reAjax = ajaxObj => {
  let xhr = new XMLHttpRequest();//创建xhr对象
  //判断发送什么请求
  if(ajaxObj.methed === 'GET') {
    //判断是否传递参数
    if(ajaxObj.data) {
      xhr.open('GET',`${ajaxObj.url}?${resolveData(ajaxObj.data)}`);
    }
    else {
      xhr.open('GET',ajaxObj.url);
    }
    xhr.send();
  }
  else if(ajaxObj.methed === 'POST') {
    xhr.open('POST', ajaxObj.url);
    xhr.setRequestHeader('Content-Type', 'application/x-WWW-form-urlencoded');//设置Content-Type属性（固定写法）
    xhr.send(resolveData(ajaxObj.data));
  }
  else {
    console.log(error);
  }
  // 监听readystatechange事件
  xhr.addEventListener('readystatechange', () => {
    if(xhr.readyState === 4 && xhr.status === 200) {
      ajaxObj.success(JSON.parse(xhr.responseText));
    }
  })
}

//转换查询字符串
const resolveData = data => {
  if(data) {
    let arr = [];
    for(k in data) {
      arr.push(`${k}=${data[k]}`);
    }
    return `${arr.join('&')}`;
  }
}

---

总结：

该函数主要运用于基础Ajax请求，封装函数易于降低代码的耦合性，提高代码质量。