本身封裝的一個Ajax小框架

在經歷了Jsp實訓的慘痛教訓後,特地花了點時間學習Ajax,學完後自我感受良好,因而寫了以下一個小框架: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 }())
相關文章
相關標籤/搜索