javscript之原生ajax请求的封装

ajax系列

1：formateUrl 格式化url函数

• 作用：就是在ajax发起请求的，需要配置url路径 也就是格式化url 所以里面的参数大概有两个，参数1：method，参数2：url！
• 返回值：返回的是拼接后的url路径
  需求：

• 01：就是在ajax发送请求的时候，get是在open之中直接发送请求，传递的参数为method,url （而参数直接拼接在url中的 ? 后面），因此调用格式化url函数，若是为post请求，就直接返回url即可！因此在封装的时候，需要把url存储起来
• 02：然而在post请求的时候，是在open之中，设置method，还有url（而post请求是加密的，参数部分在send之中发送过去，因此这边直接为url路径），设置url之前需要设置请求头！
• 03：然后遍历data这个参数对象，进行url路径的拼接！

• 调用示例：

 var res = formateUrl("http://www.baidu.com", {
   method: "GET",
   callback: "callback",
  	a: 10
 })
 console.log(res); //http://www.baidu.com?

结果： method=GET&callback=callback&a=10

function formateUrl(url, data) { //url为请求的路径 data为请求携带的参数（对象的形式）
  //默认为GET
  var type = "GET";
  if (arguments.length === 1) {
    //参数长度为1的时候，代表为post请求 post请求只是在send之中调用格式化url，只是传递了data这个参数路径！
    type.toUpperCase() = "POST"
    data = url;
    url = ""
  }
  //遍历data（对象，是键值对的形式)，进行url路径的拼接
  //url中get请求是，最初需要拼接一个? + key=value，后面拼接& + key=value
  //而post请之中，不需要拼接?，直接后面拼接& + key=value
  var start = true; //最初的
  for (var key in data) {
    if (type.toUpperCase() === "GET") {
      url += (start ? "?" : "&") + key + "=" + data[key];
    } else if (type.toUpperCase() === "POST") {
      url += (start ? "" : "&") + key + "=" + data[key];
    }
    start = false;
  }
  return url
}

2：完美版本的ajax请求

• 参数：一个对象，对象里面的参数是 method,url,data,callback,jsonpcallback等！
• 调用方式—

ajax({
   method: "jsonp",
   url: "https://api.gogoup.com/p1/data/recommend",
   callback: function (data) {
    console.log(data);
   },
  data: {
    //字段名 ： 回调函数
    jsonpcallback: "callback"
  }
})

//封装一个ajax请求

function ajax(options) {
  return new Promise(function (resolve, reject) {
    //配置默认的参数
    options = Object.assign({
      method: "GET",
      callback: function () {},
      url: "",
      data: {},
      jsonpcallback: "callback"
    }, options)


    //jsonp请求
    if (options.method === "jsonp") {
      //发起请求
      var script = document.createElement("script");
      script.src = formateUrl(options.url, options.data)
      document.body.appendChild(script);

      //响应  需要定义一个全局函数，为了在外部可以使用到 
      // data:{jsonpcallback: "callback"} 需要你传递一个对象（字段：回调函数）
      window[options.jsonpcallback] = function (data) {
        options.callback(data);
        resolve(data)
      }
      //等待script加载完毕后，就清除掉script标签
      script.onload = function () {
        script.remove();
      }

    } else {
      //GET和POST请求
      var xhr = new XMLHttpRequest();
      xhr.open(options.method, options.method.toUpperCase() === "GET" ? formateUrl(options.url, options.data) :
        options.url);
      if (options.method.toUpperCase() === "POST") {
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
      }
      xhr.send(options.method.toUpperCase() === "POST" ? formateUrl(options.data) : null)

      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (/^2\d{2}/.test(xhr.status)) {
            options.callback(xhr.responseText)
            resolve(data)
          }
        }
      }
    }
  })
}