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>
