04.封装ajax

  1 <script>
  2       //封装ajax
  3       //  函数名 ajax
  4       //  函数的参数
  5       // url: 请求的地址
  6       // type: 请求的方式 get /post
  7       // data: 要上传的数据 要求是键值对的形式
  8       //  函数的返回值 没有返回值
  9 
 10       // 增加的功能:
 11       // 1. 如果没有传请求的地址,就没有必要执行后面的代码
 12       // 2. 默认是get, 如果传post,则发post请求
 13       // 3. 不需要再上传键值对的字符串了name=zs&age=18&sex=m
 14       // 而是上传一个对象
 15       // {
 16       //   name: 'zs',
 17       //   age: 18,
 18       //   sex: 'm'
 19       // }
 20       //  优化前: 参数列表的问题: 如果记不住顺序,那么传参会错误.少些参数,也会错误
 21       //  优化后: 传入一个对对象. 不需要考虑顺序. 少写type,函数照样可以正常运行
 22       // option要求是一个对象
 23       // option.url
 24       // option.type
 25       // option.data
 26 
 27       // 最后一个功能:
 28 
 29       ajax({
 30         url: '../test.php',
 31         type: 'post',
 32         data: {
 33           name: 'zs'
 34         },
 35         success: function(res) {
 36           //当数据成功的响应回来,那么这个函数会自动被调用
 37           // 而且,希望将获取到的数据,传入到这个回调函数中
 38           // alert('响应成功了');
 39           console.log(res);
 40           // JSON.parse(res)
 41         }
 42       });
 43       function ajax(option) {
 44         //判断是否传入对象,
 45         if (option.constructor !== Object) {
 46           console.log('对象');
 47           return;
 48         }
 49 
 50         //获取参数
 51         var url = option.url;
 52         var type = option.type;
 53         var data = option.data;
 54 
 55         //功能 1  没有传url  return
 56         if (!url) {
 57           return;
 58         }
 59         //功能 2 请求类型
 60         type = type === 'post' ? 'post' : 'get';
 61         //功能 3 将 data 从对象转成 用 & 隔开的键值对的 字符串
 62         var arr = [];
 63         for (var k in data) {
 64           arr.push(k + '=' + data[k]);
 65         }
 66         data = arr.join('&');
 67 
 68         //1.创建对象
 69         var xhr = new XMLHttpRequest();
 70         //2.设置请求行
 71         if (type === 'get') {
 72           url += '?' + arr;
 73           data = null;
 74         }
 75         xhr.open(type, url);
 76         //3.设置请求头
 77         if (type === 'post') {
 78           xhr.setRequestHeader(
 79             'content-type',
 80             'application/x-www-form-urlencoded'
 81           );
 82         }
 83         //4.设置请求主体并发送请求
 84         xhr.send(data);
 85         //5.接收响应
 86         xhr.onreadystatechange = function() {
 87           if (xhr.readyState == 4 && xhr.status == 200) {
 88             var result = xhr.responseText;
 89             if (xhr.getResponseHeader('content-type').indexOf('json') != -1) {
 90               var obj = JSON.parse(result);
 91               option.success & option.success(obj);
 92             } else if (
 93               xhr.getResponseHeader('content-type').indexOf(xml) != -1
 94             ) {
 95               option.success && option.success(xhr.responseXML);
 96             } else {
 97               option.success && option.success(result);
 98             }
 99           } else {
100             //失败
101             option.error && option.error();
102           }
103         };
104       }
105     </script>