前端开发的开始---基于面向对象的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 相关文章推荐
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 Javascript
jscript之List Excel Color Values
Jun 13 Javascript
javascript 命名规则 变量命名规则
Feb 25 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
javascript中DOM复选框选择用法实例
May 14 Javascript
JavaScript面对国际化编程时的一些建议
Jun 24 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
Jul 24 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 正则 过滤html 的超链接
2009/06/02 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
关于vue单文件中引用路径的处理方法
2018/01/08 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
详解nodejs http请求相关总结
2019/03/31 NodeJs
关于JavaScript 数组你应该知道的事情(推荐)
2019/04/10 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
python中nan与inf转为特定数字方法示例
2017/05/11 Python
Python开发的HTTP库requests详解
2017/08/29 Python
Python numpy生成矩阵、串联矩阵代码分享
2017/12/04 Python
python决策树之CART分类回归树详解
2017/12/20 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
python numpy数组的索引和切片的操作方法
2018/10/20 Python
Python Threading 线程/互斥锁/死锁/GIL锁
2019/07/21 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
Mountain Warehouse波兰官方网站:英国户外品牌
2019/08/29 全球购物
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
旅游管理本科生求职信
2013/10/14 职场文书
《油菜花开了》教学反思
2014/02/22 职场文书
党支部公开承诺书
2014/03/28 职场文书
小学生手册家长评语
2014/04/16 职场文书
大学生实习证明范文(5篇)
2014/09/18 职场文书
六查六看剖析材料
2014/10/06 职场文书
2014年财政局工作总结
2014/12/09 职场文书
军训心得体会范文(2016最新篇)
2016/01/11 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang