码迷,mamicode.com
首页 > Web开发 > 详细

自己封装的一个Ajax小框架

时间:2020-02-13 20:44:38      阅读:93      评论:0      收藏:0      [点我收藏+]

标签:hang   obj   color   require   sync   async   默认   状态   ml2   

在经历了Jsp实训的惨痛教训后,特意花了点时间学习Ajax,学完后自我感觉良好,于是写了如下一个小框架:

 1 /**
 2 * frameAjax 
 3 * 
 4 * 参数:
 5 * paramsObj: Json
 6 * required params:
 7 * type:请求参数类型(String)
 8 * url:请求地址(String)
 9 * data:请求参数(Json),data可为空值。
10 * success:请求回调(Function)
11 * async:表示请求是否异步处理。默认为true,表示异步,可省略不写。
12 * 
13 */
14 
15 (function () {
16     function frameAjax(paramsObj) {
17         //处理请求参数
18         var arr = [];
19         for (var pro in paramsObj.data) {
20             arr.push(pro + ‘=‘ + paramsObj.data[pro]);
21         }
22         var data = arr.join("&");  //用“&”拼接请求参数
23         var async = true; //默认异步
24         if (paramsObj.async) {  //判断是否异步处理
25             async = paramsObj.async;
26         }
27 
28         //创建Ajax引擎对象
29         var ajax = getAjax();
30         //复写onreadystatement函数
31         ajax.onreadystatechange = function () {
32             //判断Ajax状态码
33             if (ajax.readyState == 4) {
34                 //判断响应状态码
35                 if (ajax.status == 200) {
36                     if (paramsObj.success) {
37                         paramsObj.success(ajax);
38                     }
39                 } else if (ajax.status == 404) {
40                     console.error("请求资源不存在");
41                 } else if (ajax.status == 500) {
42                     console.error("服务器繁忙");
43                 }
44             }
45         }
46 
47         //发送请求
48         if (paramsObj.type.toLowerCase() == "get") {
49             ajax.open("get", paramsObj.url + (data == null ? "" : "?" + data), async);
50             ajax.send(null);
51         } else if (paramsObj.type.toLowerCase() == "post") {
52             ajax.open("post", paramsObj.url, async);
53             ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
54             ajax.send(data);
55         } else {
56             console.log("请求类型错误");
57         }
58     }
59 
60     //获取请求对象
61     function getAjax() {
62         var ajax;
63         if (window.XMLHttpRequest) { //火狐
64             ajax = new XMLHttpRequest();
65         } else if (window.ActiveXObject) { //IE
66             ajax = new ActiveXObject("Msxml2.XMLHTTP");
67         }
68         return ajax;
69     }
70     //将框架封装于window对象中
71     window.frameAjax = frameAjax;
72 }())

 

自己封装的一个Ajax小框架

标签:hang   obj   color   require   sync   async   默认   状态   ml2   

原文地址:https://www.cnblogs.com/skyzou/p/12305043.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!