JavaScript中模擬實(shí)現(xiàn)jsonp
更新時(shí)間:2015年06月19日 09:55:57 投稿:junjie
這篇文章主要介紹了JavaScript中模擬實(shí)現(xiàn)jsonp,本文直接給出實(shí)現(xiàn)代碼,代碼中包含詳細(xì)注釋,需要的朋友可以參考下
function prescript(s) { if (s.cache === undefined) { s.cache = false; } if (s.crossDomain) { s.type = "GET"; } } function prejsonp(s, originalSettings, jqXHR) { // 給回調(diào)函數(shù)命名 var callbackName = s.jsonpCallback s.url += (/(?:)/.test(s.url) ? "&" : "?") + s.jsonp + "=" + callbackName; // 腳本執(zhí)行后使用數(shù)據(jù)轉(zhuǎn)換器來檢索json // 提供給代碼獲取服務(wù)器的是據(jù) s.getData = function() { if (!responseContainer) { jQuery.error(callbackName + " was not called"); } return responseContainer[0]; }; //修改處理機(jī)制 s.dataTypes[0] = "json"; // 創(chuàng)建一個(gè)全局函數(shù) overwritten = window[callbackName]; //用來收集服務(wù)器給的數(shù)據(jù) window[callbackName] = function() { responseContainer = arguments; }; return "script"; } /** * jsonp的預(yù)先處理 */ function inspectPrefiltersOrTransportsA(options, originalOptions, jqXHR) { //預(yù)處理jsonp var dataTypeOrTransport = prejsonp(options, originalOptions, jqXHR) //擴(kuò)充dataTypes options.dataTypes.unshift(dataTypeOrTransport); //預(yù)處理script類型 prescript(options) } /** * 分發(fā)器 * @return {[type]} [description] */ function inspectPrefiltersOrTransportsB(s, originalOptions, jqXHR) { return { send: function(_, complete) { var script = jQuery("<script>").prop({ async: true, charset: s.scriptCharset, src: s.url }).on( "load error", callback = function(evt) { script.remove(); callback = null; if (evt) { complete() } } ); //<script async="" src="http://192.168.1.113:8080/github/jQuery/jsonp.php document.head.appendChild(script[0]); } } } /** * 模擬ajax的 jsonp請(qǐng)求 * @param {[type]} options [description] * @return {[type]} [description] */ function createAjax(options) { if (typeof url === "object") { options = url; url = undefined; } options = options || {}; /** * 參數(shù) * jQuery.ajaxSetup 是默認(rèn)參數(shù) * @type {[type]} */ var s = jQuery.ajaxSetup({}, options); // Deferreds // 異步機(jī)制 var deferred = jQuery.Deferred(); var completeDeferred = jQuery.Callbacks("once memory"); /** * 實(shí)際返回的ajax對(duì)象 * @type {Object} */ var jqXHR = {} // 把jqXHR對(duì)象轉(zhuǎn)化promise對(duì)象,幷加入complete、success、error方法 deferred.promise(jqXHR).complete = completeDeferred.add; //別名 jqXHR.success = jqXHR.done; jqXHR.error = jqXHR.fail; s.dataTypes = jQuery.trim(s.dataType || "*").toLowerCase().match(/(?:)/) || [""]; //預(yù)處理 inspectPrefiltersOrTransportsA(s, options, jqXHR); for (i in { success: 1, error: 1, complete: 1 }) { jqXHR[i](s[i]); } /** * 分發(fā)器 */ transport = inspectPrefiltersOrTransportsB(s, options, jqXHR); function done(status, nativeStatusText, responses, headers) { console.log(s,s.getData()) } //發(fā)送請(qǐng)求 transport.send(s, done); return jqXHR; } function show(data){ $('body').append('<li>'+ data +'</li>'); } /** * 數(shù)據(jù)回調(diào)接收 * @return {[type]} [description] */ function flightHandler(){ } $("#test").click(function(){ //執(zhí)行一個(gè)異步的HTTP(Ajax)的請(qǐng)求。 var ajax = createAjax({ url: 'http://192.168.1.113:8080/github/jQuery/jsonp.php', data: { 'action': 'aaron' }, // 預(yù)傳參的數(shù)組 dataType: 'jsonp', // 數(shù)據(jù)類型 jsonp: 'callback', // 指定回調(diào)函數(shù)名,與服務(wù)器端接收的一致,并回傳回來 jsonpCallback:flightHandler, success: function() { show('局部事件success') } }) })
相關(guān)文章
javascript異常處理實(shí)現(xiàn)原理詳解
這篇文章主要介紹了javascript異常處理實(shí)現(xiàn)原理詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02判斷js的Array和Object的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄袛鄇s的Array和Object的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08jQuery多項(xiàng)選項(xiàng)卡的實(shí)現(xiàn)思路附樣式及代碼
這篇文章主要介紹了jQuery多項(xiàng)選項(xiàng)卡的實(shí)現(xiàn)思路,需要的朋友可以參考下2014-06-06Javascript中Promise的四種常用方法總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于Javascript中Promise的四種常用方法,分別是處理異步回調(diào)、多個(gè)異步函數(shù)同步處理、異步依賴異步回調(diào)和封裝統(tǒng)一的入口辦法或者錯(cuò)誤處理,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來一起看看吧。2017-07-07H5實(shí)現(xiàn)中獎(jiǎng)記錄逐行滾動(dòng)切換效果
這篇文章主要為大家詳細(xì)介紹了H5實(shí)現(xiàn)中獎(jiǎng)記錄逐行滾動(dòng)切換效果,利用定時(shí)器實(shí)現(xiàn)中獎(jiǎng)記錄逐行展示,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03