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>