前端开发的开始---基于面向对象的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 操作select相关方法函数
Dec 06 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
Sep 12 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
javascript一元操作符(递增、递减)使用示例
Aug 07 Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
屏蔽相应键盘按钮操作
Mar 10 Javascript
浅谈bootstrap源码分析之tab(选项卡)
Jun 06 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 Javascript
微信小程序获取当前位置和城市名
Nov 13 Javascript
vue 子组件和父组件传值的示例
Sep 11 Javascript
vue缓存之keep-alive的理解和应用详解
Nov 02 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(1) php开发环境配置
2010/02/15 PHP
php session劫持和防范的方法
2013/11/12 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
YII框架模块化处理操作示例
2019/04/26 PHP
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
JQuery动画与特效实例分析
2015/02/02 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
js严格模式总结(分享)
2016/08/22 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
微信小程序websocket实现聊天功能
2020/03/30 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
[39:52]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第一场
2018/04/04 DOTA
Python中的匿名函数使用简介
2015/04/27 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
python绘制雷达图实例讲解
2021/01/03 Python
Boda Skins皮衣官网:奢侈皮夹克,全球配送
2016/12/15 全球购物
关于礼仪的演讲稿
2014/01/04 职场文书
出纳员的岗位职责
2014/02/22 职场文书
奥利奥广告词
2014/03/20 职场文书
《桥》教学反思
2014/04/09 职场文书
小学生校园广播稿
2014/09/28 职场文书
八项规定整改方案
2014/10/01 职场文书
市委常委会班子党的群众路线教育实践活动整改方案
2014/10/25 职场文书
工程催款通知书
2015/04/17 职场文书
教学反思怎么写
2016/02/24 职场文书
基于Python实现nc批量转tif格式
2022/08/14 Python