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>