前端开发的开始---基于面向对象的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调用webService远程访问出错的解决方法
May 21 Javascript
用js来刷新当前页面保留参数的具体实现
Dec 23 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
原生javascript实现隔行换色
Jan 04 Javascript
JavaScript代码判断点击第几个按钮
Dec 13 Javascript
js实现密码强度检测【附示例】
Mar 30 Javascript
聊一聊JavaScript作用域和作用域链
May 03 Javascript
React Native仿美团下拉菜单的实例代码
Aug 08 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 Javascript
总结4个方面优化Vue项目
Feb 11 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
重料打造自己的“宝马”---第三代
2021/03/02 无线电
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】
2017/09/02 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
actionscript与javascript的区别
2011/05/25 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
javaScript中定义类或对象的五种方式总结
2016/12/04 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
vue实现axios图片上传功能
2019/08/20 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
python实现文件名批量替换和内容替换
2014/03/20 Python
python在指定目录下查找gif文件的方法
2015/05/04 Python
python urllib爬取百度云连接的实例代码
2017/06/19 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
Python 如何批量更新已安装的库
2020/05/26 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
英国定做窗帘和纺织品面料一站式商店:Dekoria
2018/08/29 全球购物
27个经典Linux面试题及答案,你知道几个?
2014/03/11 面试题
Laravel中Kafka的使用详解
2021/03/24 PHP
乐观大学生的自我评价
2014/01/10 职场文书
护理专科毕业生自荐书范文
2014/02/19 职场文书
安全教育实施方案
2014/03/02 职场文书
施工质量承诺书范文
2014/05/30 职场文书
民事诉讼代理委托书
2014/10/08 职场文书
大学生求职意向书
2015/05/11 职场文书
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏