前端开发的开始---基于面向对象的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 相关文章推荐
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
Dec 02 Javascript
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 Javascript
JavaScript弹出对话框的三种方式
Mar 23 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
Angular HMR(热模块替换)功能实现方法
Apr 04 Javascript
微信小程序倒计时功能实例代码
Jul 17 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 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
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
php中文件上传的安全问题
2006/10/09 PHP
纯php打造的tab选项卡效果代码(不用js)
2010/12/29 PHP
php数组中删除元素之重新索引的方法
2014/09/16 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
Laravel 5框架学习之环境与配置
2015/04/08 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
JavaScript实现GriwView单列全选(自写代码)
2013/05/13 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
微信小程序 封装http请求实例详解
2017/01/16 Javascript
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
Vue实现手机计算器
2020/08/17 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
python合并文本文件示例
2014/02/07 Python
Python图算法实例分析
2016/08/13 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
python write无法写入文件的解决方法
2019/01/23 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
Feelunique德国官方网站:欧洲最大的在线美容零售商
2019/07/20 全球购物
党员群众路线对照检查材料思想汇报
2014/09/17 职场文书
统计学教授推荐信
2014/09/18 职场文书
2015公司年度工作总结
2015/05/14 职场文书
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers