封装过的Ajax工具类库AjaxUtil.js

封装过的Ajax工具类库AjaxUtil.js  可以500%提高开发效率的前端UI框架！

.代码  

1. var AjaxUtil = {  
2.        
3.     // 基础选项  
4.     options : {  
5.         method : "get", // 默认提交的方法,get post  
6.         url : "", // 请求的路径 required  
7.         params : {}, // 请求的参数  
8.         type : 'text', // 返回的内容的类型,text,xml,json  
9.         callback : function() {  
10.         }// 回调函数 required  
11.     },  
12.        
13.     // 创建XMLHttpRequest对象  
14.     createRequest : function() {  
15.         var xmlhttp;  
16.         try {  
17.             xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");// IE6以上版本  
18.         } catch (e) {  
19.             try {  
20.                 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");// IE6以下版本  
21.             } catch (e) {  
22.                 try {  
23.                     xmlhttp = new XMLHttpRequest();  
24.                     if (xmlhttp.overrideMimeType) {  
25.                         xmlhttp.overrideMimeType("text/xml");  
26.                     }  
27.                 } catch (e) {  
28.                     alert("您的浏览器不支持Ajax");  
29.                 }  
30.             }  
31.         }  
32.         return xmlhttp;  
33.     },  
34.     // 设置基础选项  
35.     setOptions : function(newOptions) {  
36.         for ( var pro in newOptions) {  
37.             this.options[pro] = newOptions[pro];  
38.         }  
39.     },  
40.     // 格式化请求参数  
41.     formateParameters : function() {  
42.         var paramsArray = [];  
43.         var params = this.options.params;  
44.         for ( var pro in params) {  
45.             var paramValue = params[pro];   
46.             /*if(this.options.method.toUpperCase() === "GET")  
47.             {  
48.                 paramValue = encodeURIComponent(params[pro]);  
49.             }*/  
50.             paramsArray.push(pro + "=" + paramValue);  
51.         }  
52.         return paramsArray.join("&");  
53.     },  
54.        
55.     // 状态改变的处理  
56.     readystatechange : function(xmlhttp) {  
57.         // 获取返回值  
58.         var returnValue;  
59.         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {  
60.             switch (this.options.type) {  
61.             case "xml":  
62.                 returnValue = xmlhttp.responseXML;  
63.                 break;  
64.             case "json":  
65.                 var jsonText = xmlhttp.responseText;  
66.                 if(jsonText){  
67.                     returnValue = eval("(" + jsonText + ")");  
68.                 }  
69.                 break;  
70.             default:  
71.                 returnValue = xmlhttp.responseText;  
72.                 break;  
73.             }  
74.             if (returnValue) {  
75.                 this.options.callback.call(this, returnValue);  
76.             } else {  
77.                 this.options.callback.call(this);  
78.             }  
79.         }  
80.     },  
81.        
82.     // 发送Ajax请求  
83.     request : function(options) {  
84.         var ajaxObj = this;  
85.        
86.         // 设置参数  
87.         ajaxObj.setOptions.call(ajaxObj, options);  
88.        
89.         // 创建XMLHttpRequest对象  
90.         var xmlhttp = ajaxObj.createRequest.call(ajaxObj);  
91.        
92.         // 设置回调函数  
93.         xmlhttp.onreadystatechange = function() {  
94.             ajaxObj.readystatechange.call(ajaxObj, xmlhttp);  
95.         };  
96.        
97.         // 格式化参数  
98.         var formateParams = ajaxObj.formateParameters.call(ajaxObj);  
99.        
100.         // 请求的方式  
101.         var method = ajaxObj.options.method;  
102.         var url = ajaxObj.options.url;  
103.        
104.         if ("GET" === method.toUpperCase()) {  
105.             url += "?" + formateParams;  
106.         }  
107.        
108.         // 建立连接  
109.         xmlhttp.open(method, url, true);  
110.        
111.         if ("GET" === method.toUpperCase()) {  
112.             xmlhttp.send(null);  
113.         } else if ("POST" === method.toUpperCase()) {  
114.             // 如果是POST提交，设置请求头信息  
115.             xmlhttp.setRequestHeader("Content-Type",  
116.                     "application/x-www-form-urlencoded");  
117.             xmlhttp.send(formateParams);  
118.         }  
119.     }  
120. };  

 

一个简单的示例： 可以500%提高开发效率的前端UI框架！

.代码  

1. <strong style="border-color: initial; border-width: 0px; padding: 0px; margin: 0px;">function findUser() {  
2.         var userid = $("userid").value;  
3.         if (userid) {  
4.             AjaxUtil.request({  
5.                 url:"servlet/UserJsonServlet",  
6.                 params:{id:userid},  
7.                 type:'json',  
8.                 callback:process  
9.             });  
10.         }  
11.     }  
12.     
13.     function process(json){  
14.             if(json){  
15.                 $("id").innerHTML = json.id;  
16.                 $("username").innerHTML = json.username;  
17.                 $("age").innerHTML = json.age;  
18.             }  
19.             else{  
20.                 $("msg").innerHTML = "用户不存在";  
21.                 $("id").innerHTML = "";  
22.                 $("username").innerHTML = "";  
23.                 $("age").innerHTML = "";  
24.             }  
25.     }  
26.     
27.     
28.     function $(id) {  
29.         return document.getElementById(id);  
30.     }</strong>