前端開發(fā)的開始---基于面向對象的Ajax類

更新時間：2010年09月17日 09:21:04 作者：

因為我基本上ajax開發(fā)都是用jquery來完成，后來想了想，也是應該寫一個。這樣才能提高自己的整體水平。

先看調用方式：

復制代碼代碼如下:

 
ajax.request("ajax.html",{v:Math.random(),num:1},function(data){ 
//do something 
},'get'); 

方式好像jquery哦。。。還是覺得這樣調用方便些。。。

復制代碼代碼如下:

 
var ajax = { 
//Xmlhttprequest類 
Xmlhttprequest :function() { 
this.xhr =false; 
}, 
//外部調用接口 
request : function(url,data,callback,type) { 
//每次都創(chuàng)建一個Xmlhttprequest的對象，使ajax調用互不影響 
var xhr = new this.Xmlhttprequest(); 
xhr.request(url,data,callback,type); 
} 
} 
//將{num:1,t:'a'}這種json數(shù)據(jù)格式轉為num=1&t=a這種字符串形式 
var json2str = function(data){ 
var _data = []; 

for(var name in data) { 
_data.push(name+"="+data[name]); 
} 
return _data.join('&'); 
} 
//擴展Xmlhttprequest類的方法 
ajax.Xmlhttprequest.prototype = { 
//創(chuàng)建XMLHttpRequest 
createXmlHttpRequest : function(){ 

if(window.XMLHttpRequest) { 
return new XMLHttpRequest(); 
} 
else { 
var a = ["Msxml2.XMLHTTP","Microsoft.XMLHTTP","Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0"]; 
for (var i=0,l=a.length;i<l;i++){ 
try{ 
return new ActiveXObject(a[i]); 
}catch(e){}; 
} 
} 
}, 
//回調函數(shù) 
fnCallback : function(callback){ 

if(this.xhr.readyState === 4 && this.xhr.status === 200) { 
callback?callback(this.xhr.responseText):void(0); 
} 
}, 
//ajax請求 
request : function(url, data, callback, type){ 

var that = this; 
var ispost = type==='post'?true:false; 

ispost?url:url += '?'+json2str(data); 

this.xhr = this.createXmlHttpRequest(); 

this.xhr.open(type,url,true); 
ispost?this.xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"):''; 
this.xhr.onreadystatechange = function(){that.fnCallback(callback);}; 
this.xhr.send(ispost?json2str(data):null); 
} 
} 