jsonp 實現原理及代碼解析

xiaodao 發(fā)布于2019-08-20 13:46 / 2391人閱讀

摘要：如果后臺要返回一個回調函數包裹的字符串，在前端定義好該回調函數的方法，就能在回調函數中獲取到后臺返回的數據了。

前端代碼




    
    jsonp 的使用

后臺代碼

需要本地有 nodejs 環(huán)境，以及安裝 express 包 npm install express --save

var express = require("express");

var app = express();

app.get("/", function (req, res) {
    var callback = req.query.callback; //這里的callback 就是上面 jsonp: "callback" 定義的名稱
    res.send(callback + "({"data": "test", "test": "data"})");
});

app.listen(3000, function () {
    console.log("app is listening at port 3000");
});

實現原理

先來看看用js 實現 jsonp 的代碼




    
    js 實現jsonp 
    



";
        $("body").after(scriptStr);

從代碼可以看出來，要實現 jsonp 只是多定義了一個回調函數 jsonpCallback，再把jsonp請求的url 改為了用script src 請求的方法。
總結得出jsonp 實現原理是：因為script 標簽是不受同源策略約束的，所以只要把請求寫在src 中，就可以得到你要的 json 數據，但是通過這種方式獲得的如果只是 json 數據，就不能用，但是數據還是一樣會返回來。

如果后臺要返回一個回調函數包裹的字符串，在前端定義好該回調函數的方法，就能在回調函數中獲取到后臺返回的數據了。

返回來后會執(zhí)行 jsonpCallBack 方法，并把數據作為參數傳到 jsonpCallBack 方法執(zhí)行。

常見問題

GPU云服務器云服務器 js解析jsonp數據格式 ddos攻擊原理及防范人工智能原理及應用單片機原理及接口技術

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81234.html

前端培訓-中級階段（11、12）- 跨域請求原理以及實現（2019-08-22期）

摘要：上節(jié)我們講了同源策略，這節(jié)我們講講如何跨域。當這些從的腳本執(zhí)行出錯，因為違背了同源策略為了保證用戶信息不被泄露，錯誤信息不會顯示出來，取而代之只會返回一個。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發(fā)的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，打牢基礎知識的中心思想，我們開課啦（每...

binaryTree 2019-08-26 10:21 評論0 收藏0
同源策略與跨域資源共享的糾纏

摘要：扯了這么多，自然不是為了吹水，而是要為了引出前端開發(fā)的一個重要的知識點同源策略什么是同源策略出于保護用戶信息安全的目的，現在的瀏覽器都會實施同源策略這個政策，所謂同源策略指的是不同源的客戶端腳本在沒有明確授權情況下，不允許讀寫對方的資源。導語你家的小孩帶了他的朋友來你們的家里玩，你家的小孩如果要在自家屋里拿玩具玩、拿東西吃你自然是不會阻止，但是如果你家小孩的朋友人品不行，亂拿東西吃、...

alighters 2019-08-21 11:17 評論0 收藏0
同源策略與跨域資源共享的糾纏

摘要：扯了這么多，自然不是為了吹水，而是要為了引出前端開發(fā)的一個重要的知識點同源策略什么是同源策略出于保護用戶信息安全的目的，現在的瀏覽器都會實施同源策略這個政策，所謂同源策略指的是不同源的客戶端腳本在沒有明確授權情況下，不允許讀寫對方的資源。導語你家的小孩帶了他的朋友來你們的家里玩，你家的小孩如果要在自家屋里拿玩具玩、拿東西吃你自然是不會阻止，但是如果你家小孩的朋友人品不行，亂拿東西吃、...

趙連江 2019-06-27 15:05 評論0 收藏0
帶你實現一個 JSONP 實例

摘要：前提是的方法名與引入的文件方法名一致。簡單描述就是先定義一個方法，然后引入外部調用這個方法并攜帶數據。 JSONP 被用于跨域獲取數據。在講解它之前，先講講它與 JSON 之間的區(qū)別什么是JSON？ JSON 是一種基于文本的數據交換方式，或者叫做數據描述格式。其優(yōu)點是： 1、基于純文本，跨平臺傳遞極其簡單； 2、Javascript 原生支持，后臺語言幾乎全部支持； 3、輕量級數...

verano 2019-08-23 11:58 評論0 收藏0
PHP筆試面試題精選（一）

摘要：，跨站腳本攻擊。實際發(fā)的請求就是，用于表示這是一個請求。，用于告知服務器根據這個參數獲取回調函數的名稱，通常約定就叫。，回調函數的名稱，也是前面參數的值，可省略，會自動生成。本次課程主要圍繞 PHP 面試和筆試中經常會出現的一些知識點，但是面試官會在筆試題基礎上深入擴展，那么你知道如何更好的回答讓面試官滿意嗎？題目收集自騰訊，迅雷，美圖等公司的筆試面試題，以及本人面試經歷中印象中的知...

JohnLui 2019-06-27 17:00 評論0 收藏0