javascript跨域请求包装函数与用法示例
本文实例讲述了javascript跨域请求包装函数与用法。分享给大家供大家参考，具体如下：
一、源码
//定义AJAX跨域请求的JSON
(function(){
if(typeofwindow.$JSON=='undefined'){
window.$JSON={};
};
$JSON._ajax=function(config){
config=config[0]||{};
this.url=config.url||'';
this.type=config.type||'xhr';
this.method=(this.type=='json')?'GET':config.method.toUpperCase()||'GET';
this.param=config.param||null;
this.callback=config.callback||{};
this.XHR=null;
if(typeofwindow._$JSON_callback=='undefined'){
window._$JSON_callback={};
}
this._createRequest();
};
$JSON._ajax.prototype={
//缓存XHR请求，再次再调用时不再进行判断
_createXHR:function(){
varmethods=[
function(){returnnewXMLHttpRequest();},
function(){returnnewActiveXObject('Msxml2.XMLHTTP');},
function(){returnnewActiveXObject('Microsoft.XMLHTTP');}
];
for(vari=0,l=methods.length;i<l;i++){
try{
methods[i]();
}catch(e){
continue;
}
this._createXHR=methods[i];
returnmethods[i]();
}
},
//建立XHR请求
_createRequest:function(){
return(this.type=='json')?this._setJSONRequest():this._setXHRRequest();
},
_setXHRRequest:function(){
var_this=this;
varparam='';
for(variinthis.param){
if(param==''){
param=i+'='+this.param[i];
}else{
param+='&'+i+'='+this.param[i];
}
}
this.XHR=this._createXHR();
this.XHR.onreadystatechange=function(){
if(_this.XHR.readyState==4&&_this.XHR.status==200){
_this.callback.success(_this.XHR.responseText);
}else{
_this.callback.failure('重新操作');
}
};
this.XHR.open(this.method,this.url,true);
this.XHR.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
this.XHR.send(param);
},
//建立JSON请求
_setJSONRequest:function(){
varhead=document.getElementsByTagName('head')[0];
varscript=document.createElement('script');
varfun=this._setRandomFun();
var_this=this;
varparam='';
for(variinthis.param){
if(param==''){
param=i+'='+this.param[i];
}else{
param+='&'+i+'='+this.param[i];
}
}
script.type='text/javascript';
script.charset='utf-8';
if(head){
head.appendChild(script);
}else{
document.body.appendChild(script);
}
//data：为回调函数所需要传入的参数
//定义页面中的回调函数，如例子中的"jsonpCallback()"方法
window._$JSON_callback[fun.id]=function(data){
_this.callback.success(data);
setTimeout(function(){
deletewindow._$JSON_callback[fun.id];
script.parentNode.removeChild(script);
},100);
};
script.src=this.url+'?callback='+fun.name+'&'+param;
},
//生成随机JSON回调函数
_setRandomFun:function(){
varid='';
do{
id='$JSON'+Math.floor(Math.random()*10000);
}while(window._$JSON_callback[id])
return{
id:id,
name:'window._$JSON_callback.'+id
}
}
};
window.$JSON.ajax=function(){
returnnew$JSON._ajax(arguments);
}
})();
二、调用方式
//调用方式
varajax=new$JSON.ajax({
url:'http://www.sina.com/api',
type:'json',
method:'get',
param:{
bar:true
},
callback:{
success:function(data){
console.log('55668',data);
},
failure:function(error){
alert(errow);
}
}
});
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中ajax操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。