前端开发的开始---基于面向对象的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 相关文章推荐
js no-repeat写法 背景不重复
Mar 18 Javascript
JavaScript的parseInt 进制问题
May 07 Javascript
JS实现文字掉落效果的方法
May 06 Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 Javascript
javascript实现全角半角检测的方法
Jul 23 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 Javascript
layui表格设计以及数据初始化详解
Oct 26 Javascript
vue路由传参的基本实现方式小结【三种方式】
Feb 05 Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 Javascript
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
基于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
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
PHP中的类型提示(type hinting)功能介绍
2015/07/01 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
Yii调试查看执行SQL语句的方法
2016/07/15 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
jQuery 剧场版 你必须知道的javascript
2009/05/27 Javascript
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
2012/02/10 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
Javascript技术难点之apply,call与this之间的衔接
2015/12/04 Javascript
javascript每日必学之封装
2016/02/23 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
python中不能连接超时的问题及解决方法
2018/06/10 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
Python中常见的数制转换有哪些
2020/05/27 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
详解使用CSS3的@media来编写响应式的页面
2017/11/01 HTML / CSS
T3官网:头发造型工具
2019/12/26 全球购物
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
求职简历中自我评价
2014/01/28 职场文书
综治工作心得体会
2014/09/11 职场文书
银行授权委托书范本
2014/10/04 职场文书
2016年教师党员创先争优承诺书
2016/03/24 职场文书
当你焦虑迷茫时,请读读这6句话
2019/07/24 职场文书
JavaScript继承的三种方法实例
2021/05/12 Javascript