国产精品毛片频,Av人妻一区二区三区免费视频

jsonp的實現

我們發送一個 jsonp 的請求：

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

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

這里有幾個要注意的：

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

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

然后通過創建腳本動態加載：

<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 請求的參數，通過解析出 callback 執行 callback 這個回調并傳遞參數。

要處理的幾個問題：

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

所以流程就會分二步：

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

分發器執行代碼：

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

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

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

任務

?不會了怎么辦

index.html

<!doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <title>模擬jsonp的實現</title> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <button id="test">測試模擬jsonp的實現</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) { // 給回調函數命名 var callbackName = s.jsonpCallback s.url += (/(?:)/.test(s.url) ? "&" : "?") + s.jsonp + "=" + callbackName; // 腳本執行后使用數據轉換器來檢索json // 提供給代碼獲取服務器的是據 s.getData = function() { if (!responseContainer) { jQuery.error(callbackName + " was not called"); } return responseContainer[0]; }; //修改處理機制 s.dataTypes[0] = "json"; // 創建一個全局函數 overwritten = window[callbackName]; //用來收集服務器給的數據 window[callbackName] = function() { responseContainer = arguments; }; return "script"; } /** * jsonp的預先處理 */ function inspectPrefiltersOrTransportsA(options, originalOptions, jqXHR) { //預處理jsonp var dataTypeOrTransport = prejsonp(options, originalOptions, jqXHR) //擴充dataTypes options.dataTypes.unshift(dataTypeOrTransport); //預處理script類型 prescript(options) } /** * 分發器 * @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 || {}; /** * 參數 * jQuery.ajaxSetup 是默認參數 * @type {[type]} */ var s = jQuery.ajaxSetup({}, options); // Deferreds // 異步機制 var deferred = jQuery.Deferred(); var completeDeferred = jQuery.Callbacks("once memory"); /** * 實際返回的ajax對象 * @type {Object} */ var jqXHR = {} // 把jqXHR對象轉化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(/(?:)/) || [""]; //預處理 inspectPrefiltersOrTransportsA(s, options, jqXHR); for (i in { success: 1, error: 1, complete: 1 }) { jqXHR[i](s[i]); } /** * 分發器 */ transport = inspectPrefiltersOrTransportsB(s, options, jqXHR); function done(status, nativeStatusText, responses, headers) { console.log(s,s.getData()) } //發送請求 transport.send(s, done); return jqXHR; } function show(data){ $('body').append('<li>'+ data +'</li>'); } /** * 數據回調接收 * @return {[type]} [description] */ function flightHandler(){ } $("#test").click(function(){ //執行一個異步的HTTP（Ajax）的請求。 var ajax = createAjax({ url: 'http://192.168.1.113:8080/github/jQuery/jsonp.php', data: { 'action': 'aaron' }, // 預傳參的數組 dataType: 'jsonp', // 數據類型 jsonp: 'callback', // 指定回調函數名，與服務器端接收的一致，并回傳回來 jsonpCallback:flightHandler, success: function() { show('局部事件success') } }) }) </script> </body> </html>

提問題

提交

其他問答

查看更多本節問答

寫筆記

公開筆記

提交

全屏

請驗證，完成請求

由于請求次數過多，請先驗證，完成再次請求

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

6-10 jsonp的實現

jsonp的實現

任務

提問題

其他問答

寫筆記

您還未綁定服務號

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

手記推薦

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

6-10 jsonp的實現

熱搜

最近搜索清空

jsonp的實現

任務

提問題

其他問答

寫筆記

您還未綁定服務號

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

手記推薦

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