随着WEB2.0的到来，AJAX技术成为了网站首选的靓点技术，从表单提交到“无刷新”体验，从而在给用户带来友好体验的同时又提高与数据库的快速交互。为方便“新手”更方便的让网站使用AJAX技术，本人特封装一个小型的AJAX类如下代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
if ($ == undefined){
var $ = function(id){return document.getElementById(id);}
}
function Ajax(){
var _domId = null;
var _xmlHttp = null;
var _isAsynchronism = true;
var _successFunction = null;
this.createXMLHttpRequest = function(){
try{
if(window.ActiveXObject){
_xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
if(window.XMLHttpRequest){
_xmlHttp = new XMLHttpRequest();
} else{
_xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
}
} catch(e){
alert(e.name + " : " + e.message);
}
};
this.doPost = function(_url, _parameter){
try{
_xmlHttp.open("POST", _url, _isAsynchronism);
_xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
_xmlHttp.send(_parameter);
} catch(e){
alert(e.name + " : " + e.message);
}
};
this.doGet = function(_url, _parameter){
try{
var _random = Math.round(Math.random() * 10000);
var _getParameter = (_url + "?random=" + _random + "&" + _parameter);
if(_getParameter.length > 255) {
this.doPost(_url, _parameter);
} else{
_xmlHttp.open("GET", _getParameter,_isAsynchronism);
_xmlHttp.send(null);
}
} catch(e){
alert(e.name + " : " + e.message);
}
};
this.backFunction = function(){
if(_successFunction == null){
return;
}
if(_isAsynchronism){
if(_domId){
switch(_xmlHttp.readyState){
case 1:
$(_domId).innerHTML = '请稍候，正在建立连接...';
break;
case 2:
$(_domId).innerHTML = '请稍候，正在发送数据...';
break;
case 3:
$(_domId).innerHTML = '请稍候，正在接收数据...';
break;
}
}
if((_xmlHttp.readyState == 4) && (_xmlHttp.status == 200)){
_successFunction(_xmlHttp);
return;
}
}
};
this.ajaxRequest = function(_id, _url, _parameter, _method, _asynchronism, _backFunction){
this.createXMLHttpRequest();
_domId = _id;
_isAsynchronism = _asynchronism;
_successFunction = _backFunction;
_xmlHttp.onreadystatechange = this.backFunction;
if(_method.toLowerCase() == "post"){
this.doPost(_url, _parameter);
}
else if(_method.toLowerCase() == "get"){
this.doGet(_url, _parameter);
}
};
}
|
调用说明：
1、加载JS文件（在网站的任何位置加入）
2、实例化JS类
1
| new Ajax().ajaxRequest(domId,url,parameter,method,asynchronism,function callBack(result){$('result').innerHTML = result.responseText;});
|
3、参数说明
(1)domId：表示需要显示结果的容器ID号，如domId = ‘logining’，如果没有指定可以为domId=’’或domId=null
(2)url：表示服务端接收的页面地址，如url = ‘send.ph’
(3)parameter：表示服务羰接收页面的参数，如parameter = ‘type=’+type，如果该页面无需参数可以为parameter = null
(4)method：表示AJAX的请求方法为method = ‘get’或method=’post’
(5)asnchronism：表示是否同步，如asnchronism = true为同步,asnchronism=false为不同步，默认为同步即可
(6)function callBack()：表示是回调函数把从服务端返回的结果返回，只要在该函数中处理即可。
注：该函数只是简单的实现AJAX的基本功能，主要特点是小巧，同时可自由扩展，如果网站只需要调用AJAX功能而不需要其它复杂的功能时可以考虑使用本AJAX类。