首页 > 代码库 > 原生JS封装ajax方法

原生JS封装ajax方法

2024-09-12 02:54:18   213人阅读

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <meta charset="utf-8">
 5   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6   <title>Examples</title>
10   <script>
11 
12     //将对象序列化
13     function params(data) {
14       var arg = [];
15       for (var i in data) {
16         arr.push(encodeURIComponent(i) + ‘=‘ + encodeURIComponent(data[i]));
17       }
18       return arr.join(‘&‘);
19     }
20 
21     //封装ajax
22     function ajax(obj) {
23       //创建xhr对象;
24       obj.xhr = new XMLHttpRequest();
25       //后面随机数防止浏览器缓存
26       obj.url = url + "?rand=" + Math.random();
27       //序列化对象
28       obj.data = params(obj.data);
29       //当是get请求时
30       if (obj.method = ‘get‘) {
31         //当前面没设置随机数时
32         obj.url += obj.url.indexOf(‘?‘) == -1 ? ‘?‘ +obj.data : ‘&‘ + obj.data;
33       }
34       //异步调用
35       if (obj.async == true) {
36         //监听响应状态
37         xhr.onreadystatechange = function() {
38           if (xhr.readyState == 4) {
39             callback();
40           }
41         };
42       }
43       //启动HTTP请求
44       xhr.open(obj.method, obj.url, obj.aysnc);
45       //当是post请求时
46       if(obj.method === ‘post‘) {
47         //模仿表单提交
48         xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘);
49         //发送HTTP请求-post
50         xhr.send(obj.data);
51       } else {
52         //发送HTTP请求-get
53         xhr.send(null);
54       }
55       //同步调用
56       if (obj.async == false) {
57         callback();
58       }
59       //回调函数传参
60       function callback() {
61         if (xhr.atatus == 200) {
62           obj.success(xhr.responseText);
63         } else {
64           alert("失败，失败状态码：" + xhr.status);
65         }
66       }
67     }
68 
69     document.addEventListener(‘click‘, function() {
70       ajax({
71         method: ‘get‘,
72         url: ‘demo3.php‘,
73         data: {
74           ‘name‘ = ‘Lee‘,
75           ‘age‘ = 100
76         },
77         success: function(text) {
78           alert(text);
79         },
80         async = true
81       });
82     }, false);
83   </script>
84 </head>
85 <body>
86     
87 </body>
88 </html>

 

原生JS封装ajax方法


联系
我们