前端开发的开始---基于面向对象的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源码分析-03构造jQuery对象-工具函数
Nov 14 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
Apr 13 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
Aug 18 Javascript
jquery获取节点名称
Apr 26 Javascript
avalonjs制作响应式瀑布流特效
May 06 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 Javascript
JS数组方法concat()用法实例分析
Jan 18 Javascript
JS 创建对象的模式实例小结
Apr 28 Javascript
解决pycharm双击但是无法打开的情况
Oct 31 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
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
通过JS来动态的修改url,实现对url的增删查改
2014/09/01 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
2020/02/11 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
Python  连接字符串(join %)
2008/09/06 Python
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
Python实现的彩票机选器实例
2015/06/17 Python
Python微信库:itchat的用法详解
2017/08/14 Python
一篇文章快速了解Python的GIL
2018/01/12 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
python3的数据类型及数据类型转换实例详解
2019/08/20 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
支部鉴定材料
2014/06/02 职场文书
致接力运动员加油稿
2015/07/21 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python