封装原生JS实现Ajax

Posted 2020-08-16 A good study, day day up

 1 function createXHR() {
 2             if (window.XMLHttpRequest) {    
 3                 //IE7+、Firefox、Opera、Chrome 和Safari    
 4                     return new XMLHttpRequest();
 5             } else if (window.ActiveXObject) { 
 6                  //IE6 及以下    
 7                     var versions = [‘MSXML2.XMLHttp‘,‘Microsoft.XMLHTTP‘];
 8                     for (var i = 0,len = versions.length; i<len; i++) {
 9                         try {    
10                                 return new ActiveXObject(version[i]);    
11                                 break;    
12                     } catch (e) {    
13                             //跳过    
14                         }
15                     }    
16              } else {    
17                         throw new Error(‘浏览器不支持XHR对象！‘);    
18                 }
19     }
20 
21  var xhr = createXHR();  //创建XHR对象
22 //封装ajax，参数为一个对象
23  function ajax(obj) {    
24          var xhr = createXHR();    
25         //创建XHR对象    //通过使用JS随机字符串解决IE浏览器第二次默认获取缓存的问题    
26         obj.url = obj.url + ‘?rand=‘ + Math.random();    
27         obj.data = params(obj.data);   //通过params()将名值对转换成字符串    
28         //若是GET请求，则将数据加到url后面
29            if (obj.method === ‘get‘) {    
30                 obj.url += obj.url.indexOf(‘?‘) == -1 ? ‘?‘ + obj.data : ‘&‘ + obj.data;
31         }
32     
33         if (obj.async === true) { 
34              //true表示异步，false表示同步    
35                 //使用异步调用的时候，需要触发readystatechange 事件
36              xhr.onreadystatechange = function () {    
37                     if (xhr.readyState == 4) {
38                       //判断对象的状态是否交互完成    
39                             callback();    //回调    
40                     }    
41                 };
42             }
43             //在使用XHR对象时，必须先调用open()方法，
44             //它接受三个参数：请求类型(get、post)、请求的URL和表示是否异步。
45             xhr.open(obj.method, obj.url, obj.async);
46             if (obj.method === ‘post‘) {
47                     //post方式需要自己设置http的请求头，来模仿表单提交。    
48                     //放在open方法之后，send方法之前。    
49                     xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘);    
50                     xhr.send(obj.data);    //post方式将数据放在send()方法里    
51         } else {    
52                     xhr.send(null);//get方式则填null    
53         }
54         if (obj.async === false) { 
55              //同步    
56                 callback();    
57         }    
58 
59         function callback() {    
60                     if (xhr.status == 200) { 
61                          //判断http的交互是否成功，200表示成功    
62                             obj.success(xhr.responseText);    //回调传递参数    
63                     } else {    
64                             alert(‘获取数据错误！错误代号：‘ + xhr.status + ‘，错误信息：‘ + xhr.statusText);
65                     }    
66          }
67     }
68 
69      //名值对转换为字符串
70      function params(data) {    
71              var arr = [];
72                 for (var i in data) {    
73                     //特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理    
74 　　　　　　　　　　　　arr.push(encodeURIComponent(i) + ‘=‘ + encodeURIComponent(data[i]));    
75     } 

76     return arr.join(‘&‘); 
77 } 

使用方式：

 1 ajax({
 2     method : ‘post‘,
 3     url : ‘demo.php‘,
 4     data : {
 5         ‘name‘ : ‘JR‘,
 6         ‘age‘ : 22
 7     },
 8     success : function (message) {
 9         alert(message);
10     },
11     async : true
12 });