Code
Object.extend =function(targetObj,fnJson){
//扩展方法，类似于jQuery的$.extend,可以扩展类的方法，也可以合并对象
for(var fnName in fnJson){
targetObj[fnName]=fnJson[fnName];
}
return targetObj;
};
HttpAjax = (function(){
function HttpAjax(options){
var settings={
type:'post', //请求类型
url:'', //请求地址
data:{"id":-1}, //json格式的参数
success:function(){},//成功的回调函数
failure:function(){},//失败的回调函数
isAsyn:true //是否为异步
};
this.options = Object.extend(settings,options);
Object.extend(HttpAjax.prototype,{
_createXhr:function(){
if (typeof XMLHttpRequest !== 'undefined') {
return new XMLHttpRequest();
}
else if (typeof ActiveXObject !== 'undefined') {
var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'];
for (var i = 0, len = versions.length; i < len; i++) {
try {
var xhr = new ActiveXObject(versions[i]);
this.IsCreateOk = versions[i];
return xhr;
}
catch (e) { }
}
if (typeof this.IsCreateOk === 'undefined') {
throw new Error("您的浏览器版本过低，无法创建异步对象，请升级您的浏览器！");
}
}
},
_encodeData:function(paramters){
var data = [];
for (var name in paramters) {
//将数组中的数据以=拼接后再添加到data数组中 [name=aa,age=11]
var _regesp = /%20/g; //空格的正则表达式
var _value = paramters[name].toString(); //获取值
data.push(encodeURIComponent(name).replace(_regesp, '+') + "=" + encodeURIComponent(_value).replace(_regesp, '+'));
}
//以&将数组元素拼接后返回 如：name=aa&age=11
return data.join("&");
},
_regCallback:function(xhr){
var _this=this;
xhr.onreadystatechange = function(){
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 300) {
_this.options.success(_this._getResponseData(xhr), xhr.statusText);
} else {
_this.options.failure(xhr.status, xhr.statusText);
}
}
}
},
_getResponseData:function(xhr){
var responseType = xhr.getResponseHeader("Content-Type");
switch (responseType) {
case 'text/xml':
return xhr.responseXML;
case 'text/json':
case 'text/javascript':
case 'application/javascript':
case 'application/x-javascript':
return eval('(' + xhr.responseText + ')');
default:
return xhr.responseText;
};
},
_init:function(options){
this.options=options;
if(this.options.url=="") return;
this.xhr = this._createXhr();//创建异步对象
this._regCallback(this.xhr);//注册回调事件
//根据请求类型，发送异步请求
if(this.options.type.toLowerCase()=="post"){
this._post(this.xhr);
}
else{
this._get(this.xhr);
}
},
_post:function(xhr){
this.xhr=xhr;
this.data=this._encodeData(this.options.data);
this.url=this.options.url+"?d=" + parseInt(Math.random()*100+1,10);
this.asyn=!!this.options.isAsyn;
xhr.open("POST", this.url, this.asyn);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(this.data);
},
_get:function(xhr){
this.xhr=xhr;
this.data=this._encodeData(this.options.data);
this.url=this.options.url+'?' + this.data + '&d=' + parseInt(Math.random()*100+1,10);
this.asyn=!!this.options.isAsyn;
xhr.open('GET', this.url, this.asyn);
xhr.send(null);
}
});
this._init(this.options);
};
return HttpAjax;
})(window);
Code// 调用示例：
var ss = new HttpAjax({//get
type:"get",
url:"testAjax.php",
data:{"name":'Jack'},
success:function(data){
console.log(data);
},
failure:function(data){
console.log(data);
},
isAsyn:false
});
console.log(new HttpAjax({//post
type:"post",
url:"testAjax.php",
data:{"name":'Bob'},
success:function(data){
console.log(data);
},
failure:function(data){
console.log(data);
}
}));
new HttpAjax({//post
type:"post",
url:"testAjax.php",
data:{"name":'Bob'},
success:function(data){
console.log(data);
},
failure:function(data){
console.log(data);
}
});
new HttpAjax({//post
type:"post",
url:"testAjax.php",
data:{"name":'Stack'},
success:function(data){
console.log(data);
},
failure:function(data){
console.log(data);
}
});
Code//请求:
testAjax.php?name=Jack&d=21 GET 200
testAjax.php?d=85 POST 200
testAjax.php?d=46 POST 200
//返回结果：
name:Jack index.htm:134
name:Stack index.htm:159
name:Bob
// 待完善的地方：
添加默认参数：cache //是否允许缓存
添加两个监测状态的事件：beforeSend 、complete
// php后台
<?php
header("Content-Type:text/html; charset=utf8");
echo "name:".$_REQUEST['name'];
?>
