前端开发的开始---基于面向对象的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中的事件
Sep 23 Javascript
javascript针对DOM的应用分析(四)
Apr 15 Javascript
JavaScript中Cookies的相关使用教程
Jun 04 Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 Javascript
js基本算法:冒泡排序,二分查找的简单实例
Oct 08 Javascript
Angular2 多级注入器详解及实例
Oct 30 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
微信小程序之圆形进度条实现思路
Feb 22 Javascript
React组件中的this的具体使用
Feb 28 Javascript
vue+express 构建后台管理系统的示例代码
Jul 19 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
Aug 28 Javascript
JavaScript实现点击图片换背景
Nov 20 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 __autoload()方法真的影响性能吗?
2012/03/30 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
jQuery选中select控件 无法设置selected的解决方法
2010/09/01 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
使用jquery操作session方法分享
2015/01/22 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
Python编码爬坑指南(必看)
2016/06/10 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
Tensorflow 查看变量的值方法
2018/06/14 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
新年快乐! python实现绚烂的烟花绽放效果
2019/01/30 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
Python实现简单的2048小游戏
2021/03/01 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
关于.NET, HTML的五个问题
2012/08/29 面试题
如何填写个人简历自我评价
2013/12/10 职场文书
董事长助理工作职责
2014/06/08 职场文书
停课通知书
2015/04/24 职场文书
党员干部廉政承诺书
2015/04/28 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
2021/04/04 Servers
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
Python排序算法之插入排序及其优化方案详解
2021/06/11 Python
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android