對於Ajax來說，JQuery是一個不可多得的好JS庫，但是很多朋友並不瞭解Jquery對Ajax的實現過程，或者說不太瞭解，這點CG在此是不提倡的，CG寫下面代碼一方面是為瞭解決一位網友的疑問，同時也希望那些如果想在Jquery技術上有深入提高的朋友能夠多看看Jquery原始碼。
下面是簡單實現的一個Ajax支援類，有不明白的話可以發起提問和留言。
| 代碼如下 |
複製代碼 |
/**
* 名稱：Ajax支援javascript類
* 功能：用於對頁面實現Ajax支援，簡單封裝Ajax請求
* 建立時間：2010-01-14
* 作者：CG
*/
//以下為通用函數或對象
//是否是IE
var isIE = (document.all) ? true : false;
//$ id選取器
var $ = function(id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
//Class 類對象
var Class = {
create: function() {
return function() { this.initialize.apply(this, arguments); }
}
};
//事件函數綁定
var Bind = function(object, fun) {
return function() {
return fun.apply(object, arguments);
}
};
//全域Ajax對象
//用於AjaxSupport對象調用
var $ajax = function(obj){
//錯誤資訊
if(undefined == obj.error){
obj.error = ajaxError;
}
//建立新的對象，此處可以使用單例來實現，減少資源消耗
new AjaxSupport(obj);
};
//通用Ajax錯誤顯示
function ajaxError(msg){
alert(msg);
}
var AjaxSupport = Class.create();
AjaxSupport.prototype ={
/**初始化方法
* 參數: obj 調用對象
*/
initialize: function(obj){
this._xmlHttp = null;
//URL對象
this._url = obj.url;
//要求方法對象
this._method = obj.method;
//請求方式
this._asyn= obj.asyn;
//請求資料
this._data= obj.data;
//請求成功
this._success = obj.success;
//錯誤
this._error = obj.error;
//初始化HttpRequest
this._initHttpRequest();
//開始請求
this._ajaxRequest();
},
//請求狀態變化
_readyStateChange: function() {
//只判斷是4的情況，其他情需要另行設定
if(4 == this._xmlHttp.readyState){
//請求成功
if(200 == this._xmlHttp.status){
if(undefined != this._success){
//將請求發送給調用者
this._success(this._xmlHttp.responseXML);
}
}
// 錯誤，或返回結果非200
else{
if(undefined != this._error){
this._error("Error:Server Internal Error!");
}
}
}
},
//開始Ajax請求
_ajaxRequest: function() {
//開啟請求
try{
//開啟請求
this._xmlHttp.open(this._method , this._url ,this._asyn);
}catch(e){
//開啟請求錯誤
if(undefined != this._error){
this._error("Error:Openning Ajax Request Error!");
}
}
try{
//發送請求
this._xmlHttp.send(this._data);
}
catch(e){
//發送資料錯誤
if(undefined != this._error){
this._error("Error:Sending Ajax Request Error!");
}
}
},
//初始化HttpRequest對象
_initHttpRequest: function(){
//初始化HTTPReqest
if(!isIE){//FF opera safari
this._xmlHttp = new XMLHttpRequest();
}else{//IE
try{//IE6+
this._xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{//IE5.5+
this._xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
//瀏覽器不支援
if(undefined != this._error){
this._error("Sorry! Your Browser dose not Support Ajax!");
}
}
}
}
//事件綁定
if(null != this._xmlHttp) {
//綁定狀態改變事件
this._xmlHttp.onreadystatechange = Bind(this, this._readyStateChange);
}else{
//綁定事件調用錯誤資訊
if(undefined != this._error){
this._error("Error: init Ajax Object Error!");
}
}
}
} |
以下是簡單的調用代碼,相信用過Jquery的朋友覺得很類似吧？
| 代碼如下 |
複製代碼 |
function testAjax() {
var req = "text=" + $("txtName").value;
//對象調用Ajax測試
$ajax({
url:"AjaxTest",
method:"post",
asyn:true,
data:req,
success: function(obj){
//這裡測試輸出資料，不作XML解析
$("msg").innerHTML = obj;
},
error: function(msg){
//錯誤資訊顯示
$("msg").innerHTML = msg;
}
});
} |
