JavaScript中模擬實(shí)現(xiàn)jsonp
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)換器來(lái)檢索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]; //用來(lái)收集服務(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類(lèi)型 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ù)類(lèi)型 jsonp: 'callback', // 指定回調(diào)函數(shù)名,與服務(wù)器端接收的一致,并回傳回來(lái) jsonpCallback:flightHandler, success: function() { show('局部事件success') } }) })
相關(guān)文章
javascript異常處理實(shí)現(xiàn)原理詳解
這篇文章主要介紹了javascript異常處理實(shí)現(xiàn)原理詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02判斷js的Array和Object的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇判斷js的Array和Object的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08uniapp項(xiàng)目?jī)?yōu)化方式及建議
性能優(yōu)化自古以來(lái)就是重中之重,本文關(guān)于uniapp項(xiàng)目?jī)?yōu)化方式最全整理,會(huì)根據(jù)開(kāi)發(fā)情況進(jìn)行補(bǔ)充,感興趣的可以了解一下2021-08-08微博@符號(hào)的用戶(hù)名提示效果。(想@到誰(shuí)?)
相信你老早就在騰訊或者新浪的微博上體驗(yàn)到了,@符號(hào)在微博時(shí)代的便捷呼叫。2010-11-11jQuery多項(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ù)同步處理、異步依賴(lài)異步回調(diào)和封裝統(tǒng)一的入口辦法或者錯(cuò)誤處理,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-07-07uniapp禁止遮罩層下頁(yè)面滾動(dòng)的解決方法
在uniapp的開(kāi)發(fā)中用過(guò)彈窗的都知道有個(gè)bug就是滑動(dòng)彈窗的內(nèi)容底部頁(yè)面也會(huì)跟著滑動(dòng),所以這篇文章主要給大家介紹了關(guān)于uniapp禁止遮罩層下頁(yè)面滾動(dòng)的解決方法,需要的朋友可以參考下2023-09-09H5實(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模擬一個(gè)類(lèi)似百度google的模糊搜索下拉列表
這篇文章主要介紹使用js模擬一個(gè)類(lèi)似百度google的模糊搜索下拉列表,需要的朋友可以參考下2014-04-04