自己封装的一个Ajax小框架

Posted 2021-03-10 skyzou

在经历了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 }())