js大佬请进

akatom

现在是不是很少用原生的ajax了
都是jquery ajax的了

yqesl1

ighook 发表于 2020-12-14 15:40
JS原生封装AJAX函数     够简洁么？     还可以自己改改

代码看着舒服，厉害

js攻城狮

现在都用axios！

ighook

JS原生封装AJAX函数     够简洁么？     还可以自己改改  

1. /* 封装ajax函数
   
2. * @param {string}opt.type http连接的方式，包括POST和GET两种方式
   
3. * @param {string}opt.url 发送请求的url
   
4. * @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的
   
5. * @param {object}opt.data 发送的参数，格式为对象类型
   
6. * @param {function}opt.success ajax发送并接收成功调用的回调函数
   
7. */
   
8. function Ajax(opt) {
   
9.     opt = opt || {};
   
10.     opt.method = opt.method.toUpperCase() || 'POST';
    
11.     opt.url = opt.url || '';
    
12.     opt.async = opt.async || true;
    
13.     opt.data = opt.data || null;
    
14.     opt.success = opt.success || function() {};
    
15.     var xmlHttp = null;
    
16.     if (XMLHttpRequest) {
    
17.         xmlHttp = new XMLHttpRequest();
    
18.     } else {
    
19.         xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
    
20.     }
    
21.     var params = [];
    
22.     for (var key in opt.data) {
    
23.         params.push(key + '=' + opt.data[key]);
    
24.     }
    
25.     var postData = params.join('&');
    
26.     if (opt.method.toUpperCase() === 'POST') {
    
27.         xmlHttp.open(opt.method, opt.url, opt.async);
    
28.         xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
    
29.         xmlHttp.send(postData);
    
30.     } else if (opt.method.toUpperCase() === 'GET') {
    
31.         xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
    
32.         xmlHttp.send(null);
    
33.     }
    
34.     xmlHttp.onreadystatechange = function() {
    
35.         if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
    
36.             opt.success(xmlHttp.responseText);
    
37.         }
    
38.     };
    
39. }
    
40. 
    
41. /*Ajax({
    
42.     method: 'POST',
    
43.     url: 'Ru.php',
    
44.     data: {
    
45.         name1: 'value1',
    
46.         name2: 'value2'
    
47.     },
    
48.     success: function(response) {
    
49.         //console.log(response)；
    
50.     }
    
51. });*/

复制代码

duyu

jquery都要被淘汰了。。。

胖虎

喜欢哪个，会用哪个，就用哪个。

tir

不知道，我觉得那个好用就用那个吧

akatom

ighook 发表于 2020-12-14 15:40

这是自己写ajax么  我菜鸟看不懂

akatom

js攻城狮 发表于 2020-12-14 15:40
现在都用axios！

那又是个啥 东西 大佬解释一下

Evan

不是哦，看需求的。能用库就用，不能就用原生。