前端开发的开始---基于面向对象的Ajax类

所属分类: 网络编程 / JavaScript 阅读数: 1181
收藏 0 赞 0 分享
先看调用方式:

复制代码 代码如下:

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 if条件判断方法小结

今天在为网站增加一些代码功能的时候,需要用到if条件判断,发现简写方法忘了,这里特整理下
收藏 0 赞 0 分享

javascript教程:关于if简写语句优化的方法

这篇文章主要介绍了js中if简写语句优化的方法,需要的朋友可以参考下
收藏 0 赞 0 分享

wap浏览自动跳转到wap页面的js代码

这篇文章主要介绍了如何让用户输入wap手机网站的网址时自动跳转到wap网站,需要的朋友可以参考下
收藏 0 赞 0 分享

jqGrid读取选择的多行的某个属性代码

这篇文章主要介绍了jqGrid读取选择的多行的某个属性实现代码,需要的朋友可以参考下
收藏 0 赞 0 分享

让alert不出现弹窗的两种方法

这篇文章主要介绍了让alert不出现弹窗的两种方法,需要的朋友可以参考下
收藏 0 赞 0 分享

JSON+HTML实现国家省市联动选择效果

实现国家省市联动的方法有很多,本文要为大家介绍的JSON+HTML如何实现,需要的朋友可以参考下
收藏 0 赞 0 分享

javascript的alert box在java中如何显示多行

这篇文章主要介绍了javascript的alert box在java中如何显示多行,需要的朋友可以参考下
收藏 0 赞 0 分享

绑定回车enter事件代码

这篇文章主要介绍了绑定回车enter事件代码,需要的朋友可以参考下
收藏 0 赞 0 分享

Jquery 返回json数据在IE浏览器中提示下载的问题

Jquery 返回json数据,IE浏览器提示下载的问题,当提交完数据后返回的本来是json数据的,在火弧里测试正常,解决方法如下
收藏 0 赞 0 分享

用jquery实现的一个超级简单的下拉菜单

这篇文章主要介绍了用jquery实现的一个超级简单的下拉菜单,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多