也写一个Ajax.Request类附代码

 更新时间:2007年08月13日 19:41:16   作者:  
目的:因为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.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);
};


这个类保存成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三个参数,那么类将使用默认值。

相关文章

  • Ajax 实现加载进度条

    Ajax 实现加载进度条

    本文给大家介绍ajax实现加载进度条效果,非常不错,具有参考借鉴价值,需要的朋友参考下
    2016-12-12
  • Ajax bootstrap美化网页并实现页面的加载删除与查看详情

    Ajax bootstrap美化网页并实现页面的加载删除与查看详情

    Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。下面通过本文给大家介绍Ajax bootstrap美化网页并实现页面的加载删除与查看详情,需要的朋友可以参考下
    2017-03-03
  • json获取数据库的信息在前端页面显示方法

    json获取数据库的信息在前端页面显示方法

    今天小编就为大家分享一篇json获取数据库的信息在前端页面显示方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-05-05
  • Ajax基础与登入教程

    Ajax基础与登入教程

    Ajax 是 Asynchronous JavaScript and XML的缩写。其优点可以减轻服务器的负担,按需取数据,最大程度的减少冗余请求。接下来通过本文给大家介绍Ajax基础与登入教程,需要的的朋友参考下
    2017-03-03
  • Ajax请求session失效该如何解决

    Ajax请求session失效该如何解决

    HTML + Servlet + Filter + jQuery 一般来说我们的项目都有登录过滤器,一般请求足以搞定。但是AJAX却是例外的,所以解决方法是设置响应为session失效。
    2015-11-11
  • 服务端配置实现AJAX跨域请求

    服务端配置实现AJAX跨域请求

    这篇文章主要介绍了服务端配置实现AJAX跨域请求的相关资料,需要的朋友可以参考下
    2015-02-02
  • Jquery基于Ajax方法自定义无刷新提交表单Form实例

    Jquery基于Ajax方法自定义无刷新提交表单Form实例

    这篇文章主要介绍了Jquery基于Ajax方法自定义无刷新提交表单Form的方法,结合实例详细分析了Ajax无刷新提交表单的完整实现过程,并总结了使用中的注意事项,具有很好的借鉴价值,需要的朋友可以参考下
    2014-11-11
  • AJAX工作原理及优缺点详解

    AJAX工作原理及优缺点详解

    AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。接下来通过本文给大家讲解ajax的工作原理及优缺点,感兴趣的朋友一起看看吧
    2016-11-11
  • Ajax 说的比较清楚的一篇文章

    Ajax 说的比较清楚的一篇文章

    ajax一般做两个if判断,判断readyState是否等于4,即响应完毕,status是否等于200.,即一切正常
    2013-07-07
  • 一个伪ajax图片上传代码实现示例

    一个伪ajax图片上传代码实现示例

    这篇文章主要介绍了自己写的一个伪ajax图片上传实现代码,需要的朋友可以参考下
    2014-03-03

最新评论