前端开发的开始---基于面向对象的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 相关文章推荐
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
微信小程序 删除项目工程实现步骤
Nov 10 Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 Javascript
详解express与koa中间件模式对比
Aug 07 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
Dec 02 Javascript
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
原生JavaScript实现弹幕组件的示例代码
Oct 12 Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 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实现在服务器上创建目录的方法
2015/03/16 PHP
Yii获取当前url和域名的方法
2015/06/08 PHP
PHP去除字符串最后一个字符的三种方法实例
2017/03/01 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
谈谈因Vue.js引发关于getter和setter的思考
2016/12/02 Javascript
Vee-Validate的使用方法详解
2017/09/22 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
JQuery扩展对象方法操作示例
2018/08/21 jQuery
Vue表单及表单绑定方法
2018/09/04 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
vue2.0 如何在hash模式下实现微信分享
2019/01/22 Javascript
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
python实现mysql的读写分离及负载均衡
2018/02/04 Python
python实现单向链表详解
2018/02/08 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
python如何提升爬虫效率
2020/09/27 Python
wedgwood加拿大官网:1759年成立的英国国宝级陶瓷餐具品牌
2018/07/17 全球购物
澳大利亚在线家具店:Luxo Living
2019/03/24 全球购物
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
租车协议书范本2014
2014/11/17 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB
java项目构建Gradle的使用教程
2022/03/24 Java/Android
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL