04.封装ajax

<script>
      //封装ajax
      //  函数名 ajax
      //  函数的参数
      // url: 请求的地址
      // type: 请求的方式 get /post
      // data: 要上传的数据 要求是键值对的形式
      //  函数的返回值 没有返回值

      // 增加的功能:
      // 1. 如果没有传请求的地址,就没有必要执行后面的代码
      // 2. 默认是get, 如果传post,则发post请求
      // 3. 不需要再上传键值对的字符串了name=zs&age=18&sex=m
      // 而是上传一个对象
      // {
      //   name: 'zs',
      //   age: 18,
      //   sex: 'm'
      // }
      //  优化前: 参数列表的问题: 如果记不住顺序,那么传参会错误.少些参数,也会错误
      //  优化后: 传入一个对对象. 不需要考虑顺序. 少写type,函数照样可以正常运行
      // option要求是一个对象
      // option.url
      // option.type
      // option.data

      // 最后一个功能:

      ajax({
        url: '../test.php',
        type: 'post',
        data: {
          name: 'zs'
        },
        success: function(res) {
          //当数据成功的响应回来,那么这个函数会自动被调用
          // 而且,希望将获取到的数据,传入到这个回调函数中
          // alert('响应成功了');
          console.log(res);
          // JSON.parse(res)
        }
      });
      function ajax(option) {
        //判断是否传入对象,
        if (option.constructor !== Object) {
          console.log('对象');
          return;
        }

        //获取参数
        var url = option.url;
        var type = option.type;
        var data = option.data;

        //功能 1  没有传url  return
        if (!url) {
          return;
        }
        //功能 2 请求类型
        type = type === 'post' ? 'post' : 'get';
        //功能 3 将 data 从对象转成 用 & 隔开的键值对的 字符串
        var arr = [];
        for (var k in data) {
          arr.push(k + '=' + data[k]);
        }
        data = arr.join('&');

        //1.创建对象
        var xhr = new XMLHttpRequest();
        //2.设置请求行
        if (type === 'get') {
          url += '?' + arr;
          data = null;
        }
        xhr.open(type, url);
        //3.设置请求头
        if (type === 'post') {
          xhr.setRequestHeader(
            'content-type',
            'application/x-www-form-urlencoded'
          );
        }
        //4.设置请求主体并发送请求
        xhr.send(data);
        //5.接收响应
        xhr.onreadystatechange = function() {
          if (xhr.readyState == 4 && xhr.status == 200) {
            var result = xhr.responseText;
            if (xhr.getResponseHeader('content-type').indexOf('json') != -1) {
              var obj = JSON.parse(result);
              option.success & option.success(obj);
            } else if (
              xhr.getResponseHeader('content-type').indexOf(xml) != -1
            ) {
              option.success && option.success(xhr.responseXML);
            } else {
              option.success && option.success(result);
            }
          } else {
            //失败
            option.error && option.error();
          }
        };
      }
    </script>