您現在的位置是:電腦技術吧?>? 基礎知識 ??>??jsonp如何實現,jsonp實現??>??正文詳情

jsonp如何實現,jsonp實現

竇沛凝2019-12-05 17:42:01 人圍觀
簡介jsonp如何實現跨域本文主要介紹了jsonp在JavaScript中的模擬實現。本文直接給出了實現代碼,其中包含了詳細的注釋。對于您的朋友,請參考“1234567891013141jsonp簡單實現

這篇文章主要介紹了JavaScript中模擬實現jsonp,本文直接給出實現代碼,代碼中包含詳細注釋,需要的朋友可以參考下  ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 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') } }) })

版權聲明:本文由 竇沛凝 整理編輯。

原標題:什么是jsonp,為什么用jsonp

轉載注明出處:http://www.dn9ww09s.icu/basics/15191.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 批處理中如何判斷幾個文件是否存在,批處理文件中一cp命令

    批處理中如何判斷幾個文件是否存在,批處理文件中一cp命令 相關圖片ps中批處理批處理是邏輯單元的一組T-SQL語句。要將腳本分成批,可以使用go語句。一。Go語句必須是自包含的。2。Go語句使每個批獨立地發送到服務器,獨立于其他批處理程序ps中批處理...

  • datatable怎么用,datatable比較

    datatable怎么用,datatable比較 相關圖片datatable詳解本文主要介紹viewstate和datatable的動態數據輸入示例。以下代碼可用于您的朋友:%@page language=C?EnableViewStatec# datatable...

  • c語言在線編程,c語言經典程序100例

    c語言在線編程,c語言經典程序100例 相關圖片c語言例子本文從C?程序員的角度詳細介紹了學習typescript的過程,主要針對兩種語言的異同進行了簡單的比較研究,希望對您有所幫助。Typescript發展得很好。在菜鳥教程100例...

  • 9 patch,怎樣用patch

    9 patch,怎樣用patch 相關圖片patch是什么Oracle補丁也稱為Oracle補丁。有幾種Oracle修補程序。很難數這些小塊,也很難避免讓人眼花繚亂。不過,甲骨文補丁程序是有序的。Oracle提供的oppatch of...

  • 常用代碼片段,30s代碼片段

    常用代碼片段,30s代碼片段 相關圖片有關下面代碼片段的說法一。打開一個新窗口并發送參數:發送參數:響應。Write()接收參數:字符串a=request.querystring(ID);字符串B=request.que管理常用代碼片段...

  • 用戶角色與權限,用戶角色權限具體實現

    用戶角色與權限,用戶角色權限具體實現 相關圖片用戶角色權限管理系統Oracle數據庫用戶管理Oracle權限設置一、權限分類:系統權限:系統指定用戶使用數據庫的權限。(系統權限針對用戶)。實體權限:某個權限用戶對其他用戶的表...

  • 閉包內存泄露,閉包為什么會造成內存泄露

    閉包內存泄露,閉包為什么會造成內存泄露 相關圖片閉包阮一峰本文主要介紹JS閉包導致內存泄漏的相關數據。可以在JS閉包中定義局部變量以供參考。但是,如果從外部調用它,特別是重復調用,將導致大量內存開銷。如何防止這種現象...

  • 單選,三d單選

    單選,三d單選 相關圖片3d單選網我之所以使用checkboxlist來實現無線電選擇,是因為我認為checkboxlist控件頁的顯示效果應該更好。您可以參考中提供的radiobutonlis福彩單選...

  • oracle11g空表導出,oracle導出空數據庫

    oracle11g空表導出,oracle導出空數據庫 相關圖片oracle空白表如何在Oracle 11g中導出空表?由于Oracle 11g延遲段創建的新特性,當沒有數據插入時Oracle不會分配數據段,因此exp不能在11g數據庫中導出oracle查詢空表要2到3秒...

  • javascript 框架,javascript的基本框架

    javascript 框架,javascript的基本框架 相關圖片javascript怎么樣本文主要介紹了JavaScript框架設計和其他工廠的相關信息,非常簡單易懂。如果需要的話你可以檢查一下。JavaScript中類和繼承的出現表明JavaScrbootstrap框架...

熱評文章

  • 驗證表單,javascript表單驗證

    驗證表單,javascript表單驗證 相關圖片html怎么驗證表單本文主要介紹angularjs中表單驗證編程的詳細說明。Angularjs是一個非常流行的JavaScript庫。您可以為您的朋友參考以下要求:名稱是必需的,用html表單驗證...

  • 準則,兩個準則

    準則,兩個準則 相關圖片兩條例一準則本文主要介紹JavaScript API設計的一些建議和指導原則。它列出了許多著名的JSAPI輔助解釋,并強烈推薦!你可以把設計作為一個非常普遍的概念,它可以理兩準則四條例...

  • cmd打開sqlserver,cmd登錄sqlserver

    cmd打開sqlserver,cmd登錄sqlserver 相關圖片cmd窗口sql如果您的遠程桌面無法遠程,系統將提示您用戶數超過。您可以嘗試使用SQL server。您還可以通過在SQL server中執行CMD命令來注銷登錄用戶。連接到Mcmd登錄sql...

  • 12560 協議適配器錯誤,協議適配器錯誤12560怎么處理

    12560 協議適配器錯誤,協議適配器錯誤12560怎么處理 相關圖片數據庫協議適配器錯誤解決方案:首先,確保創建了多個本地數據庫實例。如果尚未創建新實例,則默認實例為:orcl;如果已創建新實例,則輸入自己新創建的實例名稱。此時,只需在...

  • sqlserver死鎖,sqlserver死鎖解決

    sqlserver死鎖,sqlserver死鎖解決 相關圖片sql 死鎖一。死鎖1的四個必要條件。互斥:資源不能共享,只能由一個進程使用。2。等待:已獲取資源的進程可以再次申請新資源。三。沒有pre-sqlserver日志查看死鎖...

  • jquerygrid,jquerygrid拖拽

    jquerygrid,jquerygrid拖拽 相關圖片js表格grid控件本教程將教您制作一個jQuery響應圖像以顯示庫效果。所有的圖像都以網格的形式排列,然后隨機翻轉一些網格來切換圖片。這個效果可以作為我們網站的背景或裝飾。grij...

  • jquery toggle,jquery

    jquery toggle,jquery 相關圖片jquery listJQuery的toggle()函數使用show()或hide()函數來切換HTML元素的可見狀態。今天,我們將討論在jQuery中使用toggle函數的替代方法jquery文檔...

  • 什么是增量備份,增量備份和完全備份

    什么是增量備份,增量備份和完全備份 相關圖片增量和差異備份RMAN中有兩種增量備份:差異模式和累積模式。備份級別分為五個級別:0、1、2、3和4,其中級別0最高。差異備份(同意上級備份甚至對等備份):分析:上周日增量備份...

  • sqlserver數據庫連接配置,連接sqlserver數據庫方法

    sqlserver數據庫連接配置,連接sqlserver數據庫方法 相關圖片sql2000數據庫導入聯系Java或JSP,必然會使用數據庫SQL Server 2000/2005(我使用的是2005標準版[9.0.3054]測試),經過自己的搜索和研究,使用Jsql server連接服務器...

  • jquery ready,js ready

    jquery ready,js ready 相關圖片jquery toggle本文主要介紹jQuery中ready()函數的執行時間以及窗口加載事件比較的相關資料。對于您的朋友,可以參考jQuery中ready()的實現是domcontejquery callback...

關注微信

变脸官网查询