1 (function (window) { 2 function AjaxTool() {} 3 4 AjaxTool.ajaxRequest = function (param, successCallback, failedCallback) { 5 // 1. 获取参数 6 var requestType = param['requestType'] || 'get'; // 请求方式 7 var url = param['url']; // 请求的路径 8 var paramObj = param['paramObj']; 9 var timeOut = param['timeOut'] || 0; 10 11 // 2. 发送请求 12 var xhr = new XMLHttpRequest(); 13 // 判断 14 if(requestType.toLowerCase() === 'get'){ // get请求 15 var codeURL = encodeURI(url + '?' + getStrWithObject(paramObj)); 16 xhr.open('get', codeURL, true); 17 xhr.send(); 18 }else if(requestType.toLowerCase() === 'post'){ // post请求 19 var codeParam = encodeURI(getStrWithObject(paramObj)); 20 xhr.open('post', url, true); 21 // 设置请求头 22 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 23 xhr.send(codeParam); 24 } 25 // 监听服务器端响应 26 xhr.addEventListener('readystatechange', function (ev2) { 27 if(xhr.readyState === 4){ 28 if(xhr.status === 200){ 29 // 请求成功 30 successCallback && successCallback(xhr); 31 // 清除定时器 32 clearTimeout(timer); 33 }else { 34 // 请求失败 35 failedCallback && failedCallback(xhr); 36 } 37 } 38 }); 39 40 // 0 代表不限制请求的时间 41 var timer = null; 42 if(timeOut > 0){ 43 timer = setTimeout(function () { 44 // 取消请求 45 xhr.abort(); 46 }, timeOut); 47 } 48 }; 49 50 /** 51 * 把对象转换成拼接字符串 52 * @param {Object}paramObj 53 */ 54 function getStrWithObject(paramObj) { 55 var resArr = []; 56 // 1. 转化对象 57 for (var key in paramObj) { 58 var str = key + '=' + paramObj[key]; 59 resArr.push(str); 60 } 61 // 2. 拼接时间戳 62 resArr.push('random=' + getRandomStr()); 63 64 // 3. 数组转成字符串 65 return resArr.join('&'); 66 } 67 68 /** 69 * 获取随机时间戳 70 * @returns {number} 71 */ 72 function getRandomStr() { 73 return Math.random() + (new Date().getTime()); 74 } 75 76 window.AjaxTool = AjaxTool; 77 })(window);
1 <script> 2 window.addEventListener('load', function (ev) { 3 var btn = document.getElementById('send'); 4 btn.addEventListener('click', function (ev1) { 5 6 // 1. 获取用户输入的内容 7 var account = document.getElementById('account').value; 8 var pwd = document.getElementById('pwd').value; 9 var paramObj = { 10 'account': account, 11 'pwd': pwd 12 }; 13 14 var param = { 15 'requestType': 'post', 16 'url': 'http://localhost:3000/api/five', 17 'timeOut': 2000, 18 'paramObj': paramObj 19 } 20 21 // 2. 创建网络请求对象 22 AjaxTool.ajaxRequest(param, function (xhr) { 23 console.log('成功', xhr.responseText); 24 }, function () { 25 console.log('失败') 26 }) 27 }); 28 }); 29 </script>