javascript跨域請求包裝函數(shù)與用法示例
本文實(shí)例講述了javascript跨域請求包裝函數(shù)與用法。分享給大家供大家參考,具體如下:
一、源碼
// 定義AJAX跨域請求的JSON
(function(){
if(typeof window.$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(typeof window._$JSON_callback == 'undefined'){
window._$JSON_callback = {};
}
this._createRequest();
};
$JSON._ajax.prototype = {
// 緩存XHR請求,再次再調(diào)用時(shí)不再進(jìn)行判斷
_createXHR : function(){
var methods = [
function(){ return new XMLHttpRequest(); },
function(){ return new ActiveXObject('Msxml2.XMLHTTP'); },
function(){ return new ActiveXObject('Microsoft.XMLHTTP'); }
];
for(var i = 0, l = methods.length; i < l; i++){
try{
methods[i]();
}catch(e){
continue;
}
this._createXHR = methods[i];
return methods[i]();
}
},
// 建立XHR請求
_createRequest : function(){
return (this.type == 'json') ? this._setJSONRequest() : this._setXHRRequest();
},
_setXHRRequest : function(){
var _this = this;
var param = '';
for(var i in this.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(){
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
var fun = this._setRandomFun();
var _this = this;
var param = '';
for(var i in this.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:為回調(diào)函數(shù)所需要傳入的參數(shù)
// 定義頁面中的回調(diào)函數(shù),如例子中的"jsonpCallback()"方法
window._$JSON_callback[fun.id] = function(data){
_this.callback.success(data);
setTimeout(function(){
delete window._$JSON_callback[fun.id];
script.parentNode.removeChild(script);
}, 100);
};
script.src = this.url+'?callback='+fun.name+'&'+param;
},
// 生成隨機(jī)JSON回調(diào)函數(shù)
_setRandomFun : function(){
var id = '';
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(){
return new $JSON._ajax(arguments);
}
})();
二、調(diào)用方式
//調(diào)用方式
var ajax = 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);
}
}
});
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript中ajax操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JavaScript省市級聯(lián)下拉菜單實(shí)例
這篇文章主要為大家詳細(xì)介紹了JavaScript省市級聯(lián)下拉菜單實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02
javascript 文字上下間隔滾動的代碼 符合WEB標(biāo)準(zhǔn) 腳本之家修正版
javascript 文字上下間隔滾動的代碼 符合WEB標(biāo)準(zhǔn) 腳本之家修正版,這里提供了兩個版本,第二個在firefox下運(yùn)行有些問題大家可以修改下,第一個的高度問題,已經(jīng)修正,其實(shí)就是簡單的加了css樣式。2009-12-12
javascript改變position值實(shí)現(xiàn)菜單滾動至頂部后固定
現(xiàn)在很多網(wǎng)站都有這樣的一個效果,當(dāng)頁面滾動到一定高度時(shí),菜單欄會固定在頁面頂部;該效果在 ie6 下不支持,因?yàn)閕e6不支持 position:fixed,效果很不錯,感興趣的朋友可以了解下啊2013-01-01
關(guān)于JavaScript數(shù)組你所不知道的3件事
這篇文章主要為大家詳細(xì)介紹了關(guān)于JavaScript數(shù)組三個并不那么常見的功能,你所不知道的事情,感興趣的小伙伴們可以參考一下2016-08-08
JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉樹的計(jì)數(shù)算法示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉樹的計(jì)數(shù)算法,結(jié)合具體實(shí)例形式分析了javascript二叉樹記錄更新次數(shù)的原理與操作技巧,需要的朋友可以參考下2017-04-04
javascript實(shí)現(xiàn)的一個自定義長度的文本自動換行的函數(shù)。
javascript實(shí)現(xiàn)的一個自定義長度的文本自動換行的函數(shù)。...2007-08-08

