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>
