ajax封装2

Posted 2022-05-02 zhangzhengyang

请求设置时间限制

 1 (function (window) 
 2     function AjaxTool() 
 3     
 4 
 5     AjaxTool.ajaxRequest = function (url, paramObj, timeOut, successCallback, failedCallback) 
 6         var xhr = new XMLHttpRequest();
 7         xhr.open(‘get‘, url + ‘?‘ + getStrWithObject(paramObj), true);
 8         xhr.send();
 9         xhr.addEventListener(‘readystatechange‘, function (ev2) 
10            if(xhr.readyState === 4)
11                if(xhr.status === 200)
12                    // 请求成功
13                    successCallback && successCallback(xhr);
14                    // 清除定时器
15                    clearTimeout(timer);
16                else 
17                    // 请求失败
18                    failedCallback && failedCallback(xhr);
19                
20            
21         );
22 
23         //  0 代表不限制请求的时间
24         var timer = null;
25         if(timeOut > 0)
26             timer = setTimeout(function () 
27                 // 取消请求  原有的方法取消请求
28                 xhr.abort();
29             , timeOut);
30         
31     ;
32 
33     /**
34      *  把对象转换成拼接字符串
35      * @param ObjectparamObj
36      */
37     function getStrWithObject(paramObj) 
38         var resArr = [];
39         // 1. 转化对象
40         for (var key in paramObj) 
41             var str = key + ‘=‘ + paramObj[key];
42             resArr.push(str);
43         
44         // 2. 拼接时间戳
45         resArr.push(‘random=‘ + getRandomStr());
46 
47         // 3. 数组转成字符串
48         return resArr.join(‘&‘);
49     
50 
51     /**
52      * 获取随机时间戳
53      * @returns number
54      */
55     function getRandomStr() 
56         return Math.random() + (new Date().getTime());
57     
58 
59     window.AjaxTool = AjaxTool;
60 )(window);

 1 <script>
 2     window.addEventListener(‘load‘, function (ev) 
 3         var btn = document.getElementById(‘send‘);
 4         btn.addEventListener(‘click‘, function (ev1) 
 5             // 1. 获取用户输入的内容
 6             var account = document.getElementById(‘account‘).value;
 7             var pwd = document.getElementById(‘pwd‘).value;
 8             // 2. 参数对象
 9             var paramsObj = 
10                 "account": account,
11                 "pwd": pwd
12             
13             AjaxTool.ajaxRequest(‘http://localhost:3000/api/four‘, paramsObj, 2000, function (xhr) 
14                 // 处理成功的回调
15                 console.log(‘请求成功：‘, xhr.responseText);
16             , function (xhr) 
17                // 处理失败的回调
18                 console.log(‘请求失败‘);
19             )
20         );
21     );
22 </script>