前端开发的开始---基于面向对象的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 setTimeout和setInterval 的区别
Dec 08 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
Dec 15 Javascript
javascript控制层显示或隐藏的方法
Jul 22 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
Require.js的基本用法详解
Jul 03 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
Nov 30 Javascript
vue项目中使用fetch的实现方法
Apr 25 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 Javascript
Vue.js仿Select下拉框效果
Feb 18 Javascript
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
基于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
实用函数2
2007/11/08 PHP
php获取url参数方法总结
2014/11/13 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
php提取微信账单的有效信息
2018/10/01 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
jquery 圆形旋转图片滚动切换效果
2011/01/19 Javascript
JQuery在页面中添加和除移DOM示例代码
2013/06/24 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
2016/12/19 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
浅谈Node.js 沙箱环境
2018/05/15 Javascript
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
python实现堆和索引堆的代码示例
2018/03/19 Python
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
python文件选择对话框的操作方法
2019/06/27 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
Python文字截图识别OCR工具实例解析
2020/03/05 Python
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
2018/04/19 HTML / CSS
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
代码中finally中的代码会不会执行
2012/02/06 面试题
艺术应用与设计个人的自我评价
2013/11/23 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
报名委托书
2015/01/29 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
2016国庆促销广告语
2016/01/28 职场文书
Python Pandas模块实现数据的统计分析的方法
2021/06/24 Python
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript