Ajax

 

1.原生js封装ajax

 1 function ajax(opt) {
 2     opt = opt || {};//a=b||c js基础——给a一个默认值
 3     opt.method = opt.method.toUpperCase() || 'POST';
 4     opt.url = opt.url || '';
 5     opt.async = opt.async || false;
 6     opt.data = opt.data || null;
 7     opt.success = opt.success || function () { };
 8     var xmlHttp = null;
 9     if (XMLHttpRequest) {//IE7+、Firefox、Chrome、Safari 以及 Opera
10         xmlHttp = new XMLHttpRequest();
11     } else {//兼容IE(IE5,IE6)老版本浏览器
12         xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
13     }
14     var params = [];
15     for (var key in opt.data) {
16         params.push(key + '=' + opt.data[key]);
17     }
18     var postData = params.join('&');//将参数转为如：name=admint&password=root的形式，GET则放在url后面，POST放在send方法中
19     if (opt.method.toUpperCase() === 'POST') {
20         xmlHttp.open(opt.method, opt.url, opt.async);
21         xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
22         xmlHttp.send(postData);
23     } else if (opt.method.toUpperCase() === 'GET') {
24         xmlHttp.open(opt.method, opt.url + (opt.url.indexOf('?') >= 0 ? '&' : '?') + postData, opt.async);
25         xmlHttp.setRequestHeader('Content-Type', 'application/json');
26         xmlHttp.send(null);
27     }
28     if (opt.async) {//服务器响应，status = 4(完成)
29         xmlHttp.onreadystatechange = function () {
30             if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
31                 // 有传入success回调就执行
32                 opt.success(JSON.parse(xmlHttp.responseText));
33             }
34         }
35     } else {
36         if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
37             opt.success(JSON.parse(xmlHttp.responseText));
38         }
39     }
40 }

 

2.jquery封装 ajax

要事先引入jquery.js文件

 1 $.ajax({
 2         url: url,
 3         data: JSON.stringify(param),
 4         type: 'POST',
 5         contentType: 'application/json',
 6         async: false,
 7         success: function (res) {
 8             if (res && res.code == 0) {
 9                 n = true
10             } else {
11                 n = false;
12             }
13         }
14 
15     });

 

3.ES6封装 ajax

 1 //异步get
 2 function ajaxGet(url) {
 3     return new Promise(function (resolve, reject) {
 4         $.ajax({
 5             url: url,
 6             type: 'GET',
 7             success: function (res) {
 8                 resolve(res)
 9             },
10             error: function (err) {
11                 reject('请求失败')
12             }
13         })
14     })
15 };
16 
17 
18 
19 //异步post
20 function ajaxPost(url, data) {
21     
22     return new Promise(function (resolve, reject) {
23         $.ajax({
24             url: url,
25             type: 'POST',
26             contentType: 'application/json',
27             data: data ? JSON.stringify(data) : null,
28             success: function (res) {
29                 resolve(res)
30             },
31             error: function (err) {
32                 reject('请求失败')
33             }
34         });
35     })
36 }

 

调用

 1 ajaxGet(url).then(res => {}) 

 

posted @ 2022-06-27 16:14  StarsOverTheSea  阅读(27)  评论(0)    收藏  举报