前端开发的开始---基于面向对象的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 相关文章推荐
文本链接逐个出现的js脚本
Dec 12 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
Aug 09 Javascript
js中的布尔运算符使用介绍
Nov 20 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
JS控制表单提交的方法
Jul 09 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 Javascript
基于jquery实现五星好评
Nov 18 jQuery
vue-router实现编程式导航的代码实例
Jan 19 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
微信小程序实现吸顶效果
Jan 08 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
Aug 03 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定界符
2014/06/19 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
python实现sublime3的less编译插件示例
2014/04/27 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
5分钟 Pipenv 上手指南
2018/12/20 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
python的移位操作实现详解
2019/08/21 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
py-charm延长试用期限实例
2019/12/22 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
纬创Java面试题笔试题
2014/10/02 面试题
简历的自我评价范文
2014/02/04 职场文书
师德演讲稿范文
2014/05/06 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
班级读书活动总结
2014/06/30 职场文书
火锅店的活动方案
2014/08/15 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
nginx rewrite功能使用场景分析
2022/05/30 Servers