也寫一個(gè)Ajax.Request類附代碼
更新時(shí)間:2007年08月13日 19:41:16 作者:
目的:因?yàn)閎log程序里的某些模塊需要用到ajax,直接使用prototype.js體積比較大(40多k),而且僅僅用到其中的ajax功能,因此為了減輕下載的負(fù)擔(dān),又不能改動(dòng)已經(jīng)在prototype.js框架下寫好的代碼,只能是按照prototype的風(fēng)格,自己寫一個(gè)ajax類,達(dá)到零成本移植框架。
新的ajax類如下:
var Ajax = {xmlhttp:function(){
try{
return new ActiveXObject('Msxml2.XMLHTTP');
}catch(e){
try{
return new ActiveXObject('Microsoft.XMLHTTP');
}catch(e){
return new XMLHttpRequest();
}
}
}
};
Ajax.Request = function(){
if (arguments.length<2) return;
var _p = {asynchronous:true,method:"GET",parameters:""}; //default option
for (var key in arguments[1]){ // custom option overwrite default option
_p[key] = arguments[1][key];
}
var _x = Ajax.xmlhttp(); //xml obj
var _url = arguments[0]; //str
if(_p["parameters"].length>0) _p["parameters"] += '&_=';
if(_p["method"].toUpperCase()=="GET")_url += (_url.match(/\?/) ? '&' : '?') + _p["parameters"];
_x.open(_p["method"],_url,_p["asynchronous"]);
_x.onreadystatechange = function(){
if (_x.readyState==4){
if(_x.status==200){
_p["onComplete"]?_p["onComplete"](_x):"";
}else{
_p["onError"]?_p["onError"](_x):"";
}
}
}
if(_p["method"].toUpperCase()=="POST")_x.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
_x.send(_p["method"].toUpperCase()=="POST" ? _p["parameters"] : null);
};
這個(gè)類保存成js文件,體積還不到1k,足夠小了。哈哈。
調(diào)用方法:
var myAjax = new Ajax.Request(
"http://localhost/abc.asp",
{
method:"post",
parameters:"demo=123456789abc",
onComplete:function(xmlhttp){
alert(xmlhttp.responseText)
}
}
);
調(diào)用的風(fēng)格完全與原來(lái)相同!
目前這個(gè)新類只有兩個(gè)回調(diào)函數(shù):onComplete 與 onError,Ajax類也只有Request一個(gè)方法,畢竟現(xiàn)在blog程序還不需要這么多應(yīng)用嘛。parameters 屬性有個(gè)默認(rèn)值:{asynchronous:true,method:"GET",parameters:""},可以從中知道,如果調(diào)用時(shí)不傳入asynchronous、method、parameters三個(gè)參數(shù),那么類將使用默認(rèn)值。
新的ajax類如下:
var Ajax = {xmlhttp:function(){
try{
return new ActiveXObject('Msxml2.XMLHTTP');
}catch(e){
try{
return new ActiveXObject('Microsoft.XMLHTTP');
}catch(e){
return new XMLHttpRequest();
}
}
}
};
Ajax.Request = function(){
if (arguments.length<2) return;
var _p = {asynchronous:true,method:"GET",parameters:""}; //default option
for (var key in arguments[1]){ // custom option overwrite default option
_p[key] = arguments[1][key];
}
var _x = Ajax.xmlhttp(); //xml obj
var _url = arguments[0]; //str
if(_p["parameters"].length>0) _p["parameters"] += '&_=';
if(_p["method"].toUpperCase()=="GET")_url += (_url.match(/\?/) ? '&' : '?') + _p["parameters"];
_x.open(_p["method"],_url,_p["asynchronous"]);
_x.onreadystatechange = function(){
if (_x.readyState==4){
if(_x.status==200){
_p["onComplete"]?_p["onComplete"](_x):"";
}else{
_p["onError"]?_p["onError"](_x):"";
}
}
}
if(_p["method"].toUpperCase()=="POST")_x.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
_x.send(_p["method"].toUpperCase()=="POST" ? _p["parameters"] : null);
};
這個(gè)類保存成js文件,體積還不到1k,足夠小了。哈哈。
調(diào)用方法:
var myAjax = new Ajax.Request(
"http://localhost/abc.asp",
{
method:"post",
parameters:"demo=123456789abc",
onComplete:function(xmlhttp){
alert(xmlhttp.responseText)
}
}
);
調(diào)用的風(fēng)格完全與原來(lái)相同!
目前這個(gè)新類只有兩個(gè)回調(diào)函數(shù):onComplete 與 onError,Ajax類也只有Request一個(gè)方法,畢竟現(xiàn)在blog程序還不需要這么多應(yīng)用嘛。parameters 屬性有個(gè)默認(rèn)值:{asynchronous:true,method:"GET",parameters:""},可以從中知道,如果調(diào)用時(shí)不傳入asynchronous、method、parameters三個(gè)參數(shù),那么類將使用默認(rèn)值。
相關(guān)文章
Ajax bootstrap美化網(wǎng)頁(yè)并實(shí)現(xiàn)頁(yè)面的加載刪除與查看詳情
Bootstrap是Twitter推出的一個(gè)開(kāi)源的用于前端開(kāi)發(fā)的工具包,Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范,它即是由動(dòng)態(tài)CSS語(yǔ)言Less寫成。下面通過(guò)本文給大家介紹Ajax bootstrap美化網(wǎng)頁(yè)并實(shí)現(xiàn)頁(yè)面的加載刪除與查看詳情,需要的朋友可以參考下2017-03-03json獲取數(shù)據(jù)庫(kù)的信息在前端頁(yè)面顯示方法
今天小編就為大家分享一篇json獲取數(shù)據(jù)庫(kù)的信息在前端頁(yè)面顯示方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-05-05服務(wù)端配置實(shí)現(xiàn)AJAX跨域請(qǐng)求
這篇文章主要介紹了服務(wù)端配置實(shí)現(xiàn)AJAX跨域請(qǐng)求的相關(guān)資料,需要的朋友可以參考下2015-02-02Jquery基于Ajax方法自定義無(wú)刷新提交表單Form實(shí)例
這篇文章主要介紹了Jquery基于Ajax方法自定義無(wú)刷新提交表單Form的方法,結(jié)合實(shí)例詳細(xì)分析了Ajax無(wú)刷新提交表單的完整實(shí)現(xiàn)過(guò)程,并總結(jié)了使用中的注意事項(xiàng),具有很好的借鑒價(jià)值,需要的朋友可以參考下2014-11-11一個(gè)偽ajax圖片上傳代碼實(shí)現(xiàn)示例
這篇文章主要介紹了自己寫的一個(gè)偽ajax圖片上傳實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-03-03