前端开发的开始---基于面向对象的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 相关文章推荐
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
Jan 25 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
Feb 22 Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 Javascript
vue.js使用watch监听路由变化的方法
Jul 08 Javascript
JavaScript创建对象方法实例小结
Sep 03 Javascript
vue路由切换时取消之前的所有请求操作
Sep 01 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
Sony CFR 320 修复改造
2020/03/14 无线电
PHP在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
php 静态化实现代码
2009/03/20 PHP
PHP开发规范手册之PHP代码规范详解
2011/01/13 PHP
PHP使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
jQuery功能函数详解
2015/02/01 Javascript
javascript中clipboardData对象用法详解
2015/05/13 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
js严格模式总结(分享)
2016/08/22 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
基于canvas实现手写签名(vue)
2020/05/21 Javascript
Python可跨平台实现获取按键的方法
2015/03/05 Python
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
通过python爬虫赚钱的方法
2019/01/29 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
微信小程序python用户认证的实现
2019/07/29 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
如何让python的运行速度得到提升
2020/07/08 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
用python对oracle进行简单性能测试
2020/12/05 Python
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
会计顶岗实习心得
2014/01/25 职场文书
食品工程专业求职信
2014/06/15 职场文书
工程部经理岗位职责
2015/02/02 职场文书
世界红十字日活动总结
2015/02/10 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书
酒店销售经理岗位职责
2015/04/02 职场文书
搞笑欢迎词大全
2015/09/30 职场文书