javascript跨域請(qǐng)求包裝函數(shù)與用法示例
本文實(shí)例講述了javascript跨域請(qǐng)求包裝函數(shù)與用法。分享給大家供大家參考,具體如下:
一、源碼
// 定義AJAX跨域請(qǐng)求的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請(qǐng)求,再次再調(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請(qǐng)求 _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請(qǐng)求 _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動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- Javascript跨域請(qǐng)求的4種解決方式
- AJAX跨域請(qǐng)求json數(shù)據(jù)的實(shí)現(xiàn)方法
- js跨域請(qǐng)求數(shù)據(jù)的3種常用的方法
- js跨域請(qǐng)求的5中解決方式
- ajax跨域請(qǐng)求js拒絕訪問的解決方法
- AJAX跨域請(qǐng)求之JSONP獲取JSON數(shù)據(jù)
- JSONP跨域請(qǐng)求實(shí)例詳解
- Ajax jsonp跨域請(qǐng)求實(shí)現(xiàn)方法
- JS JSOP跨域請(qǐng)求實(shí)例詳解
- jsonp跨域請(qǐng)求數(shù)據(jù)實(shí)現(xiàn)手機(jī)號(hào)碼查詢實(shí)例分析
相關(guān)文章
JavaScript省市級(jí)聯(lián)下拉菜單實(shí)例
這篇文章主要為大家詳細(xì)介紹了JavaScript省市級(jí)聯(lián)下拉菜單實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02javascript 文字上下間隔滾動(dòng)的代碼 符合WEB標(biāo)準(zhǔn) 腳本之家修正版
javascript 文字上下間隔滾動(dòng)的代碼 符合WEB標(biāo)準(zhǔn) 腳本之家修正版,這里提供了兩個(gè)版本,第二個(gè)在firefox下運(yùn)行有些問題大家可以修改下,第一個(gè)的高度問題,已經(jīng)修正,其實(shí)就是簡(jiǎn)單的加了css樣式。2009-12-12javascript改變position值實(shí)現(xiàn)菜單滾動(dòng)至頂部后固定
現(xiàn)在很多網(wǎng)站都有這樣的一個(gè)效果,當(dāng)頁面滾動(dòng)到一定高度時(shí),菜單欄會(huì)固定在頁面頂部;該效果在 ie6 下不支持,因?yàn)閕e6不支持 position:fixed,效果很不錯(cuò),感興趣的朋友可以了解下啊2013-01-01關(guān)于JavaScript數(shù)組你所不知道的3件事
這篇文章主要為大家詳細(xì)介紹了關(guān)于JavaScript數(shù)組三個(gè)并不那么常見的功能,你所不知道的事情,感興趣的小伙伴們可以參考一下2016-08-08JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉樹的計(jì)數(shù)算法示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉樹的計(jì)數(shù)算法,結(jié)合具體實(shí)例形式分析了javascript二叉樹記錄更新次數(shù)的原理與操作技巧,需要的朋友可以參考下2017-04-04javascript實(shí)現(xiàn)的一個(gè)自定義長(zhǎng)度的文本自動(dòng)換行的函數(shù)。
javascript實(shí)現(xiàn)的一個(gè)自定義長(zhǎng)度的文本自動(dòng)換行的函數(shù)。...2007-08-08