请求设置时间限制
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 {Object}paramObj
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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
