前端开发的开始---基于面向对象的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入门·对象属性方法大总结
Oct 01 Javascript
js常见表单应用技巧
Jan 09 Javascript
写给想学习Javascript的朋友一点学习经验小结
Nov 23 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
js检测iframe是否加载完成的方法
Nov 26 Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
vue使用axios跨域请求数据问题详解
Oct 18 Javascript
微信小程序实现商品属性联动选择
Feb 15 Javascript
JS实现盒子拖拽效果
Feb 06 Javascript
vue项目中使用多选框的实例代码
Jul 22 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 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
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
2012/02/03 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
微信小程序 教程之模块化
2016/10/17 Javascript
浅谈Angular中ngModel的$render
2016/10/24 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
vue图片加载失败时用默认图片替换的方法
2019/08/29 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
jQuery实现的上拉刷新功能组件示例
2020/05/01 jQuery
Python实现读写INI配置文件的方法示例
2018/06/09 Python
python模块常用用法实例详解
2019/10/17 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
英文求职信结束语大全
2013/10/26 职场文书
招商经理岗位职责
2013/11/16 职场文书
家长对孩子的评语
2014/04/18 职场文书
高三学生评语大全
2014/04/25 职场文书
2015年企业新年寄语
2014/12/08 职场文书
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis
Python中threading库实现线程锁与释放锁
2021/05/17 Python
如何用RabbitMQ和Swoole实现一个异步任务系统
2021/05/29 PHP
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js