也写一个Ajax.Request类附代码

2016-02-19 12:28 1 1 收藏

下面图老师小编要向大家介绍下也写一个Ajax.Request类附代码,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!

【 tulaoshi.com - Web开发 】

目的:因为blog程序里的某些模块需要用到ajax,直接使用prototype.js体积比较大(40多k),而且仅仅用到其中的ajax功能,因此为了减轻下载的负担,又不能改动已经在prototype.js框架下写好的代码,只能是按照prototype的风格,自己写一个ajax类,达到零成本移植框架。

新的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.length2) 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"].length0) _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);
};


这个类保存成js文件,体积还不到1k,足够小了。哈哈。
调用方法:

var myAjax = new Ajax.Request(
"http://localhost/abc.asp",
{
method:"post",
parameters:"demo=123456789abc",
onComplete:function(xmlhttp){
alert(xmlhttp.responseText)
}
}
);

调用的风格完全与原来相同!

目前这个新类只有两个回调函数:onComplete 与 onError,Ajax类也只有Request一个方法,毕竟现在blog程序还不需要这么多应用嘛。parameters 属性有个默认值:{asynchronous:true,method:"GET",parameters:""},可以从中知道,如果调用时不传入asynchronous、method、parameters三个参数,那么类将使用默认值。

来源:https://www.tulaoshi.com/n/20160219/1600980.html

延伸阅读
标签: Web开发
外国人写的一个class,这么一点小小的应用,除非有特殊需求,还没有必要模块化。 用asp产生一个随机数。 %  ''**************************************************************************  '' CLASS: cRandom  '' Calls randomize to seed the random number generat...
标签: Web开发
与现在那些Ajax框架比较,优劣之处?看完再说吧: 1、Ajax.js 代码如下: /*     AJAX v1.4     HJF 2009-7-5 */ function AjaxDO(){     this.HttpRequest = null;     this.openMethod = null; //HTTP请求的方法,为Get、Post 或者Head  ...
标签: Web开发
ajax.js -------------------------[ajax类]-------------------------- 代码如下: function Ajax(recvType){ var aj=new Object(); aj.recvType=recvType ? recvType.toUpperCase() : 'HTML'; //向形参中传递的文件类型 aj.targetUrl=''; aj.sendString=''; aj.resultHandle=null; /*创建XMLHttpRequest对象*/ aj.createXMLHttpReq...
标签: ASP
<%''本程序文件名为:Pages.asp% <%''包含ADO常量表文件adovbs.inc,可从"\Program Files\Common Files\System\ADO"目录下拷贝% <!--#Include File="adovbs.inc"-- <%''*建立数据库连接,这里是Oracle8.05数据库 Set conn=Server.CreateObject("ADODB.Connection") conn.Open "Provider=msdaora.1;Data Source=YourSrcName;User ...
标签: Web开发
代码如下: ?php class DB{     var $host_addr = "localhost"; var $host_user = "root"; var $host_psw  = "123"; var $db_name   = "test"; var $link_id; var $query_id; var $numRow; function DB(...

经验教程

60

收藏

35
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部