ajax封装2
请求设置时间限制
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>