ajax封装2

谁借莪１个温暖的怀抱￠ 2021-11-11 00:24 346阅读 0赞

请求设置时间限制

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>

转载于:https://www.cnblogs.com/zhangzhengyang/p/11223424.html