日本69sex护士,自偷自拍亚洲综合精品第一页

6-10 jsonp的實(shí)現(xiàn)
收藏

jsonp的實(shí)現(xiàn)

我們發(fā)送一個(gè) jsonp 的請(qǐng)求：

$.ajax({
    crossDomain:true,//強(qiáng)制跨域
    url: ' http://url...’, //不同的域
    type: 'GET', // jsonp模式只有GET是合法的
    data: {
        'action': 'aaron'
    }, // 預(yù)傳參的數(shù)組
    dataType: 'jsonp', // 數(shù)據(jù)類型
    jsonp: 'backfunc', // 指定回調(diào)函數(shù)名，與服務(wù)器端接收的一致，并回傳回來(lái)
})

通過(guò) ajax 請(qǐng)求不同域的實(shí)現(xiàn)，jsonp 底層不是靠 XmlHttpRequest 而是 script，所以不要被這個(gè)方法給迷惑了。

這里有幾個(gè)要注意的：

在 ajax 請(qǐng)求中類型如果是 type 是 post，其實(shí)內(nèi)部都只會(huì)用 get，因?yàn)槠淇缬虻脑砭褪怯玫膭?dòng)態(tài)加載 script 的 src，所以我們只能把參數(shù)通過(guò) url 的方式傳遞
我們使用了 dataType 是 'jsonp' 但是 jquery 內(nèi)部有進(jìn)一步的優(yōu)化，如果探測(cè)到還是同域下的請(qǐng)求，依然還是用 XmlHttpRequest 處理，所以我們?cè)谕蛳聹y(cè)試的話，可以把 crossDomain 選項(xiàng)置為 true，這樣強(qiáng)制為跨域處理，這樣就會(huì)通過(guò) script 處理了，那么根據(jù) jsonp 的原理其實(shí) jquery 內(nèi)部會(huì)把 URL 最終會(huì)轉(zhuǎn)化成：

http://192.168.1.113:8080/github/jQuery/jsonp.php?callback=flightHandler&amp;action=aaron&amp;_=1418782732584 ">

然后通過(guò)創(chuàng)建腳本動(dòng)態(tài)加載：

<script type="text/javascript" src=" http://192.168.1.113:8080/github/jQuery/jsonp.php?callback=flightHandler&amp;action=aaron&amp;_=1418782732584 "></script>

然后 php 方就會(huì)收到 get 請(qǐng)求的參數(shù)，通過(guò)解析出 callback 執(zhí)行 callback 這個(gè)回調(diào)并傳遞參數(shù)。

要處理的幾個(gè)問(wèn)題：

1. 采用的是腳本請(qǐng)求的方法，所以雖然 dataType 是 'jsonp' 但是內(nèi)部還是按照 script 處理
2. get 請(qǐng)求的后綴拼接，編碼的處理
3. 避免緩存的處理

所以流程就會(huì)分二步：

針對(duì) jsonp 的預(yù)處理，主要是轉(zhuǎn)化拼接這些參數(shù)，然后處理緩存，因?yàn)?jsonp 的方式也是靠加載 script 所以要關(guān)閉瀏覽器緩存
inspectPrefiltersOrTransports中jsonp 的預(yù)處理后，還要在執(zhí)行 inspect(dataTypeOrTransport); 的遞歸，就是為了關(guān)閉這個(gè)緩存機(jī)制
jquery 通過(guò)預(yù)處理會(huì)在 window 對(duì)象中加載一個(gè)全局的函數(shù)，當(dāng)代碼插入時(shí)函數(shù)執(zhí)行，執(zhí)行完畢后就會(huì)被移除。同時(shí) jquery 還對(duì)非跨域的請(qǐng)求進(jìn)行了優(yōu)化，如果這個(gè)請(qǐng)求是在同一個(gè)域名下那么他就會(huì)像正常的 Ajax 請(qǐng)求一樣工作。

分發(fā)器執(zhí)行代碼：

當(dāng)我們所有的參數(shù)都轉(zhuǎn)化好了，此時(shí)會(huì)經(jīng)過(guò)請(qǐng)求發(fā)送器用來(lái)處理發(fā)送的具體，為什么會(huì)叫做分發(fā)器，因?yàn)榘l(fā)送的請(qǐng)求目標(biāo)，ajax 因?yàn)閰㈦s了 jsonp 的處理，所以實(shí)際上的請(qǐng)求不是通過(guò) xhr.send(XmlHttpRequest) 發(fā)送的，而是通過(guò) get 方式的腳本加載的，所以 transports 對(duì)象在初始化構(gòu)件的時(shí)候，會(huì)生成 2 個(gè)處理器

*: Array[1]     針對(duì)xhr方式
script: Array[1]  針對(duì)script,jsonp方式

所以 transport = inspectPrefiltersOrTransports(transports, s, options, jqXHR),那么得到的 transport 就會(huì)根據(jù)當(dāng)前的處理的類型，來(lái)選擇采用哪種發(fā)送器（*、script）所以最終的實(shí)現(xiàn)就是通過(guò)動(dòng)態(tài)加載腳本！

任務(wù)

?不會(huì)了怎么辦

||

index.html

<!doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <title>模擬jsonp的實(shí)現(xiàn)</title> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <button id="test">測(cè)試模擬jsonp的實(shí)現(xiàn)</button> <script type="text/javascript"> 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類型 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ù)器端接收的一致，并回傳回來(lái) jsonpCallback:flightHandler, success: function() { show('局部事件success') } }) }) </script> </body> </html>

提問(wèn)題

提交

其他問(wèn)答

查看更多本節(jié)問(wèn)答

寫筆記

公開筆記

提交

||

全屏

請(qǐng)驗(yàn)證，完成請(qǐng)求

由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求

打開微信掃碼自動(dòng)綁定

您還未綁定服務(wù)號(hào)

綁定后可得到

· 粉絲專屬優(yōu)惠福利
· 大咖直播交流干貨
· 課程更新,問(wèn)題答復(fù)提醒
· 賬號(hào)支付安全提醒

使用 Ctrl+D 可將網(wǎng)站添加到書簽

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

6-10 jsonp的實(shí)現(xiàn)

jsonp的實(shí)現(xiàn)

任務(wù)

提問(wèn)題

其他問(wèn)答

寫筆記

您還未綁定服務(wù)號(hào)

收藏課程后，能更快找到我哦～

手記推薦

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

6-10 jsonp的實(shí)現(xiàn)

熱搜

最近搜索清空

jsonp的實(shí)現(xiàn)

任務(wù)

提問(wèn)題

其他問(wèn)答

寫筆記

您還未綁定服務(wù)號(hào)

收藏課程后，能更快找到我哦～

手記推薦

收藏課程后，能更快找到我哦～