1
/**//*Author: yican@cs-air.com
2
a simple ajax wrapper
3
*/
4function Ajax() 
{
5 var req = null;
6 var postAction = null;//a hook
7 var divName = "";
8
/**//*post action hook definition*/
9 this.setPostHook = function(f) {
10 postAction = f;
11
}
12 //execute the remote method and refresh the page'd div
13 this.sendRequest = function(url, div, method) {
14 var callback = this.report;//default alert
15 if(div != null){
16 callback = this.processAjaxResponse;
17 divName = div;
18 }
19 if(method == null) {
20 //method = "POST";//default POST - no character encoding problem
21 method = "GET";//default GET
22 } else {
23 method = method.toUpperCase();
24 }
25 /**//*encode URL with Chinese*/
26 url = encodeURI(url);
27 //alert(url);
28 //execute the remote method
29 this.executeXhr(method, callback, url);
30 }
31 //this is call back method
32 this.processAjaxResponse = function() {
33 // only if req shows "loaded"
34 var div = document.getElementById(divName);
35 //display the process bar
36 div.innerHTML = "loading";
37 if (req.readyState == 4) {
38 // only if "OK"
39 //alert(divName);
40 //alert(div);
41 if (req.status == 200) {
42 div.innerHTML = req.responseText;
43 } else {
44 alert("There was a problem retrieving the XML data:\n" +
45 req.statusText);
46 }
47 //execute hook function
48 if(postAction){
49 postAction();
50 }
51 }
52 }
53 //alert
54 this.report = function() {
55 if (req.readyState == 4) {
56 // only if "OK"
57 if (req.status == 200) {
58 alert(req.responseText);
59 } else {
60 alert("There was a problem retrieving the XML data:\n" +
61 req.statusText);
62 }
63 //execute hook function
64 if(postAction){
65 postAction();
66 }
67 }
68 }
69 //execute ajax request
70 this.executeXhr = function(method, callback, url) {
71 // difine a XMLHttpRequest object
72 if (window.XMLHttpRequest) {
73 // branch for native XMLHttpRequest object
74 req = new XMLHttpRequest();
75 } else {
76 // branch for IE/Windows ActiveX version
77 req = new ActiveXObject("Microsoft.XMLHTTP");
78 }
79 try{
80 req.setRequestHeader("Cache-Control: no-store, no-cache, must-revalidate");
81 req.setRequestHeader("Connection","close");
82 } catch(e){}
83 //
84 req.onreadystatechange = callback;
85 if(method == "POST") {
86 //split the url
87 var urlWithParam = url.split("?");//split the url in two parts
88 var urlPrefix = urlWithParam[0];//the url
89 var arg = urlWithParam[1];//the arguments
90 req.open("POST", urlPrefix, true);
91 req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
92 req.send(arg);
93 } else {
94 req.open("GET", url, true);
95 //req.send(null);
96 req.send();
97 }
98 }
99}
100
//get all the form elements value
101function getUrlForPost(form) {
102 var url = "";
103 url += (form.action + "?");//url start with the form's action
104 var len = form.elements.length;
105 for (i = 0; i < len; i++)
106 {
107 var e = form.elements[i];
108 /**//*FIXME: can't get value of selectd options of multi select(a list)*/
109 if(e.name != '') {//you can omit some value by set the element's name to blank
110 if(e.type == 'checkbox' || e.type == 'radio') {
111 //alert(e);
112 //if it is a checked box
113 if(e.checked) {
114 url += (e.name + "=");
115 url += (e.value + "&");
116 }
117 } else {
118 url += (e.name + "=");
119 url += (e.value + "&");
120 }
121 }
122 }
123 if(url.lastIndexOf('&') == (url.length - 1)) {
124 //if the last char is a '&', get rid of it
125 url = url.substring(0, url.length - 1);
126 }
127 //alert(url);//DEBUG
128 return url;
129}
130/**//*A simple wrapper for submit a form*/
131function submitForm(form, div, done, method) {
132 var url = getUrlForPost(form);
133 //alert(url);
134 var object = new Ajax();
135 if(done != null) {
136 object.setPostHook(done);
137 }
138 //post is the most common method for post a form
139 if(method == null){
140 method = "POST";//default 'POST'
141 }
142 //alert(method);
143 object.sendRequest(url, div, method);
144}
使用方法：
（1）提交请求，比如不刷新页面的情况下在页面制定DIV中显示输入表单或者其他内容：
HTML:文件中定义<div id="result"></div>
触发函数：
1var url = "http://somehost.com/do.action";
2var object = new Ajax();
3object.sendRequest(url,"result");
4//默认为GET方法，如果在TOMCAT5中遇到乱码问题可以选择使用POST方法提交
5//object.sendRequest(url,"result","POST");
(2) 提交请求，如删除某个项目之后刷新页面或者重新读取列表，操作提示用alert方法
1var url = "http://somehost.com/do.action?id=ID";
2var object = new Ajax();
3//设定请求完成之后调用的函数
4object.setPostHook(function(){window.location.reload();});
5object.sendRequest(url);
6
（3）自动用Ajax方式提交表单
在上面的js封装中，有一个submitForm()方法，这个方法是为提交字段比较长的表单而特别设计的，它根据表单的各个属性来自动生成URL，自动提交请求，它的效果与直接提交表单的效果差不多，具体使用参加代码实现，不累述。