1 (function (window) {
 2     function AjaxTool() {}
 3 
 4     AjaxTool.ajaxRequest =function (param,sucecessCallBack,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 
12         var xhr = new XMLHttpRequest();
13         if(requestType.toLowerCase() ==='get'){
14         var codeUrl=encodeURI(url + '?' +getStrWithObject(paramObj))
15             xhr.open('get',codeUrl,true);
16             xhr.send()
17         }else if(requestType.toLowerCase() ==='post'){
18             var codeParam =encodeURI(getStrWithObject(paramObj))
19             xhr.open('post',url,true);
20             xhr.send(codeParam)
21             //post请求
22         }
23         // xhr.open('get',url + '?' +getStrWithObject(paramObj),true);
24         // xhr.send()
25         //监听服务器响应
26         xhr.addEventListener("readystatechange", function () {
27             if(xhr.readyState===4){
28                 if(xhr.status==200){
29 
30                     sucecessCallBack &&  sucecessCallBack(xhr)
31                     //清除定时器
32                     clearTimeout(timer)
33 
34                 }else{
35                     failedCallback && failedCallback (xhr)
36                 }
37             }
38         })
39         /**
40          *
41          * 0 代表不限制请求的时间
42          * **/
43         var timer =null;
44         if(timeOut>0){
45             timer=setTimeout(function () {
46                 //取消请求  abort()  取消当钱响应  ,关闭连接并且结束任何未解决的网络活动
47                 xhr.abort()
48             },timeOut)
49         }
50     }
51     /**
52      * {name:"张三",
53       * age:18,
54       *  }
55      *  ['name="张三"',"age=18"]
56      * name="张三" &age =18
57      * */
58     /**
59      * 把对象转换成拼接字符串
60      * @param {object} paramObj
61      *
62      * **/
63     //设置请求时间
64 
65 
66     function getStrWithObject( paramObj){
67         var resArr =[];
68         //1.转化对象
69         for(var key in paramObj){
70             var str =key + '='+ paramObj[key];
71             resArr.push(str)
72         }
73         //2.拼接时间戳
74         resArr.push('random='+ getRandomStr())
75         //3.数组转成字符串
76         return resArr.join('&')
77     }
78     /**
79      * 获取时间戳
80      * */
81     function getRandomStr(){
82         return Math.random(new Date().getTime())
83     }
84     window.AjaxTool=AjaxTool
85 })(window)
 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>数据请求</title>
 9     <style>
10         body{
11           background-color: #00B7FF;
12         }
13     </style>
14 </head>
15 <body>
16 <lable>
17     <input type="text" id="user">
18 </lable>
19 <label >
20     <input type="text" id="pwd">
21 </label>
22 <button id="send">发送get请求</button>
23 <script src="/javascripts/AjaxTest2.js"></script>
24 <script>
25     window.addEventListener('load',function () {
26 
27 
28         $("send").addEventListener("click",function () {
29             var user= $("user").value
30             var age =$("pwd").value
31            // AjaxTool.ajaxRequest('') //请求的方式,参数 ,请求的路径 ,回调函数
32           /*  //01.请求方式
33             var xhr=new XMLHttpRequest()
34             //02.请求方法
35             xhr.open("get","http://localhost:3000/api/Test03?user="+user+"&pwd="+pwd+"&random="+getRandom(),true)
36             //03.发送请求
37             xhr.send()
38             //指定请求回避方式
39             xhr.addEventListener("readystatechange", function () {
40                 if(xhr.readyState===4 && xhr.status==200){
41                     console.log(xhr.responseText)
42                 }
43             })*/
44 
45           //2.处理参数对象
46             var paramsObj={
47                 "name":user,
48                 "age":age
49             }
50             var param={
51                 "requestType":"get", //请求方式
52                 "url":"http://localhost:3000/api/Test03",//请求路径
53                 "timeOut":2000,//请求时长
54                 "paramObj":paramsObj ,// 请求参数
55                 "timeOut":2000
56             }
57             AjaxTool.ajaxRequest(param,function (xhr) {
58                 console.log("请求成功")
59             },function (xhr) {
60                 console.log("请求失败")
61             })
62             // AjaxTool.ajaxRequest('http://localhost:3000/api/Test03',paramsObj,
63             //      //处理成功的函数
64             //     function (xhr) {
65             //     console.log("请求成功")
66             // },function (xhr) {
67             //     console.log("请求失败")
68             // })
69 
70         })
71         function $(id) {
72             return typeof id==="string"?document.getElementById(id):null
73         }
74     })
75 
76 </script>
77 
78 </body>
79 </html>