前端开发的开始---基于面向对象的Ajax类


Posted in Javascript onSeptember 17, 2010

先看调用方式:

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) { 
//每次都创建一个Xmlhttprequest的对象,使ajax调用互不影响 
var xhr = new this.Xmlhttprequest(); 
xhr.request(url,data,callback,type); 
} 
} 
//将{num:1,t:'a'}这种json数据格式转为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 = { 
//创建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){}; 
} 
} 
}, 
//回调函数 
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); 
} 
}

这个类,肯定有不足的了,欢迎拍砖吧!每个人都有自己的习惯用法,最重要是适合用就行了!
Javascript 相关文章推荐
javascript json 新手入门文档
Dec 03 Javascript
JavaScript经典效果集锦
Jul 06 Javascript
基于jquery自定义图片热区效果
Jul 21 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
JS.elementGetStyle(element, style)应用示例
Sep 24 Javascript
JQuery中form验证出错信息的查看方法
Oct 08 Javascript
js调用webservice构造SOAP进行身份验证
Apr 27 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
Jan 18 Javascript
Vue2递归组件实现树形菜单
Apr 10 Javascript
inner join 内联与left join 左联的实例代码
Sep 18 Javascript
js实现简单的贪吃蛇游戏
Apr 23 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
Sep 17 #Javascript
js下用eval生成JSON对象
Sep 17 #Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
Sep 16 #Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
Sep 15 #Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
Sep 15 #Javascript
基于JQuery的简单实现折叠菜单代码
Sep 15 #Javascript
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 #Javascript
You might like
PHP保存带BOM文件的方法
2015/02/12 PHP
PHP读取Excel类文件
2017/05/15 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
Angular在模板驱动表单中自定义校验器的方法
2017/08/09 Javascript
基于JavaScript 性能优化技巧心得(分享)
2017/12/11 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
Python3 Random模块代码详解
2017/12/04 Python
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
pandas.cut具体使用总结
2019/06/24 Python
django fernet fields字段加密实践详解
2019/08/12 Python
python实现淘宝购物系统
2019/10/25 Python
NumPy中的维度Axis详解
2019/11/26 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
python爬虫实现获取下一页代码
2020/03/13 Python
python3处理word文档实例分析
2020/12/01 Python
python中count函数知识点浅析
2020/12/17 Python
人力资源专业推荐信
2013/11/29 职场文书
高中自我评价范文
2014/01/27 职场文书
感恩母亲节活动方案
2014/03/04 职场文书
2014年公务员思想汇报范文:全心全意为人民服务
2014/03/06 职场文书
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS