Ajax封装

Posted monica4

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax封装相关的知识,希望对你有一定的参考价值。

 1 //封装
 2 
 3 function obj2str(data) 
 4     /*
 5  6     "username":"inj",
 7     "userpwd":"123",
 8     "t":"1234554212"
 9 10      */
11     data.t = new Date().getTime();
12     var res = [];
13     for (var key in data)
14         //如果URL有中文会转换为指定格式---encodeURIComponent
15         //data[key]就是value
16         res.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));//[username=inj,userpwd=123];
17     
18     return res.join("&");//username=inj&userpwd=123
19 //    join将数组转换为字符串
20 
21 
22 function  ajax(option) 
23     // 0.将对象转换为字符串
24     var str = obj2str(option.data);//key=value&key=value;
25     // 1.创建异步对象
26     var timer;
27     var xmlhttp = new XMLHttpRequest();
28     // 2.设置请求方式和地址
29 
30     //URL设置每次都不一样的,兼容IE
31     //URL不能是中文
32     //转成小写
33     //请求方式的类型GET,POST
34     if (option.type.toLowerCase() === "get")
35     xmlhttp.open(option.type, option.url+"?"+str, true);
36     // 3.发送请求
37     xmlhttp.send();
38     else
39         xmlhttp.open(option.type,option.url,true);
40         //注意:放在open和send中间
41         xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
42         xmlhttp.send(str);
43     
44 
45     // 4.监听状态的变化
46     xmlhttp.onreadystatechange = function (ev2) 
47         //4:请求已完成,且响应就绪
48         if (xmlhttp.readyState === 4)
49             clearInterval(timer);
50             if (xmlhttp.status < 300 && xmlhttp.status >= 200 || xmlhttp.status ===304)
51                 // console.log("接收到");
52                 option.success(xmlhttp);
53             
54             else 
55                 // console.log("没接收到");
56                 option.error(xmlhttp);
57             
58         
59     
60 //    判断外界是否传入了超时时间
61     if (option.timeout)
62         timer = setInterval(function () 
63             //中断请求
64             xmlhttp.abort();
65             clearInterval(timer);
66         ,option.timeout);
67     
68 

 

以上是关于Ajax封装的主要内容,如果未能解决你的问题,请参考以下文章

Ajax的封装。

通用封装ajax代码

AJAX封装-2

封装的ajax请求

ajax封装

封装ajax支持getpost