亚洲国产精品久久久久网站 ,无人高清视频免费观看在线

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

jsonp的實現(xiàn)

我們發(fā)送一個 jsonp 的請求：

$.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ù)器端接收的一致，并回傳回來
})

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

這里有幾個要注意的：

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

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

然后通過創(chuà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 方就會收到 get 請求的參數(shù)，通過解析出 callback 執(zhí)行 callback 這個回調(diào)并傳遞參數(shù)。

要處理的幾個問題：

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

所以流程就會分二步：

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

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

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

*: Array[1]     針對xhr方式
script: Array[1]  針對script,jsonp方式

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

任務(wù)

?不會了怎么辦

||

index.html

<!doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <title>模擬jsonp的實現(xiàn)</title> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <button id="test">測試模擬jsonp的實現(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)換器來檢索json // 提供給代碼獲取服務(wù)器的是據(jù) s.getData = function() { if (!responseContainer) { jQuery.error(callbackName + " was not called"); } return responseContainer[0]; }; //修改處理機(jī)制 s.dataTypes[0] = "json"; // 創(chuàng)建一個全局函數(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請求 * @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"); /** * 實際返回的ajax對象 * @type {Object} */ var jqXHR = {} // 把jqXHR對象轉(zhuǎn)化promise對象，幷加入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ā)送請求 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í)行一個異步的HTTP（Ajax）的請求。 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') } }) }) </script> </body> </html>

提問題

提交

其他問答

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

寫筆記

公開筆記

提交

||

全屏

請驗證，完成請求

由于請求次數(shù)過多，請先驗證，完成再次請求

打開微信掃碼自動綁定

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

綁定后可得到

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

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

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

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

jsonp的實現(xiàn)

任務(wù)

提問題

其他問答

寫筆記

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

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

手記推薦

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

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

熱搜

最近搜索清空

jsonp的實現(xiàn)

任務(wù)

提問題

其他問答

寫筆記

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

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

手記推薦

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