jsonp的原理與實現

SillyMonkey 發布于2019-08-22 10:45 / 2669人閱讀

摘要：概述是一種跨域通信的手段，它的原理其實很簡單首先是利用標簽的屬性來實現跨域。可靠的實現添加回調函數拼接傳遞的是一個匿名的回調函數，要執行的話，暴露為一個全局方法出錯處理使用示例來源個人博客

1. 概述

jsonp是一種跨域通信的手段，它的原理其實很簡單：

首先是利用script標簽的src屬性來實現跨域。

通過將前端方法作為參數傳遞到服務器端，然后由服務器端注入參數之后再返回，實現服務器端向客戶端通信。

由于使用script標簽的src屬性，因此只支持get方法

2. 實現流程

設定一個script標簽

callback定義了一個函數名，而遠程服務端通過調用指定的函數并傳入參數來實現傳遞參數，將fn(response)傳遞回客戶端

$callback = !empty($_GET["callback"]) ? $_GET["callback"] : "callback";
echo $callback."(.json_encode($data).)";

客戶端接收到返回的js腳本，開始解析和執行fn(response)

3. jsonp簡單實現

一個簡單的jsonp實現，其實就是拼接url，然后將動態添加一個script元素到頭部。

function jsonp(req){
    var script = document.createElement("script");
    var url = req.url + "?callback=" + req.callback.name;
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script); 
}

前端js示例

function hello(res){
    alert("hello " + res.data);
}
jsonp({
    url : "",
    callback : hello 
});

服務器端代碼

var http = require("http");
var urllib = require("url");

var port = 8080;
var data = {"data":"world"};

http.createServer(function(req,res){
    var params = urllib.parse(req.url,true);
    if(params.query.callback){
        console.log(params.query.callback);
        //jsonp
        var str = params.query.callback + "(" + JSON.stringify(data) + ")";
        res.end(str);
    } else {
        res.end();
    }
    
}).listen(port,function(){
    console.log("jsonp server is on");
});

然而，這個實現雖然簡單，但有一些不足的地方：

我們傳遞的回調必須是一個全局方法，我們都知道要盡量減少全局的方法。

需要加入一些參數校驗，確保接口可以正常執行。

4. 可靠的jsonp實現

(function (global) {
    var id = 0,
        container = document.getElementsByTagName("head")[0];

    function jsonp(options) {
        if(!options || !options.url) return;

        var scriptNode = document.createElement("script"),
            data = options.data || {},
            url = options.url,
            callback = options.callback,
            fnName = "jsonp" + id++;

        // 添加回調函數
        data["callback"] = fnName;

        // 拼接url
        var params = [];
        for (var key in data) {
            params.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
        }
        url = url.indexOf("?") > 0 ? (url + "&") : (url + "?");
        url += params.join("&");
        scriptNode.src = url;

        // 傳遞的是一個匿名的回調函數，要執行的話，暴露為一個全局方法
        global[fnName] = function (ret) {
            callback && callback(ret);
            container.removeChild(scriptNode);
            delete global[fnName];
        }

        // 出錯處理
        scriptNode.onerror = function () {
            callback && callback({error:"error"});
            container.removeChild(scriptNode);
            global[fnName] && delete global[fnName];
        }

        scriptNode.type = "text/javascript";
        container.appendChild(scriptNode)
    }

    global.jsonp = jsonp;

})(this);

使用示例

jsonp({
    url : "www.example.com",
    data : {id : 1},
    callback : function (ret) {
        console.log(ret);
    }
});

5. 來源

個人博客

云服務器 GPU云服務器回調的原理、實現與應用 json與jsonp的區別 volatile的實現原理圖像識別技術的原理與應用

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

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

關于javascript跨域及JSONP的原理與應用

摘要：因為同源策略的限制，我們不能在與外部服務器進行通信的時候使用。這個是跨域服務器取數據的接口，參數為回調函數的名字，返回的格式為原理首先在客戶端注冊一個然后把的名字傳給服務器。一、同源策略同源策略，它是由Netscape提出的一個著名的安全策略，現在所有的可支持javascript的瀏覽器都會使用這個策略。為什么需要同源策略，這里舉個例子：假設現在沒有同源策略，會發生什么事...

CoderBear 2019-08-21 10:23 評論0 收藏0
JSONP原理及JQUERY JSONP的使用

摘要：同源策略在中有一個很重要的安全性限制，被稱為同源策略。然而，當進行一些比較深入的前端編程的時候，不可避免地需要進行跨域操作，這時候同源策略就顯得過于苛刻。 JSONP原理 JSON和JSONP 　　JSON(JavaScript Object Notation)是一種輕量級的數據交換格式。對于JSON大家應該是很了解了吧，不是很清楚的朋友可以去json.org上了解下，簡單易懂。　　...

suosuopuo 2019-08-23 10:29 評論0 收藏0
JSONP原理剖析

摘要：運行一下頁面，成功彈出提示窗口，的執行全過程順利完成到這里為止的話，相信你已經能夠理解的客戶端實現原理了吧剩下的就是如何把代碼封裝一下，以便于與用戶界面交互，從而實現多次和重復調用。先說說JSONP是怎么產生的：其實網上關于JSONP的講解有很多，但卻千篇一律，而且云里霧里，對于很多剛接觸的人來講理解起來有些困難，小可不才，試著用自己的方式來闡釋一下這個問題，看看是否有幫助。 1、...

DangoSky 2019-08-21 17:15 評論0 收藏0
jsonp的原理介紹及Promise封裝

摘要：什么叫是填充式或參數式的簡寫，是通過請求跨域接口，獲取數據的新實現方式的實現原理動態創建標簽，因為標簽是沒有同源策略限制，可以跨域的。具體看接下來的實現這個是庫的具體實現，建議下載來研究一下，最好自己動手寫一遍。什么叫jsonp? jsonp是json with padding（填充式json或參數式json）的簡寫，是通過ajax請求跨域接口，獲取數據的新實現方式 jsonp的實現...

ninefive 2019-08-21 17:43 評論0 收藏0
Jsonp及其實現原理

摘要：同源策略，它是由提出的一個著名的安全策略，現在所有支持的瀏覽器都會使用這個策略。客戶端在對文件調用成功之后，也就獲得了自己所需的數據，剩下的就是按照自己需求進行處理和展現了，這種獲取遠程數據的方式看起來非常像，但其實并不一樣。參考資料一、先說說JSON 首先JSON是一種基于文本的數據交換方式，或者叫做數據描述格式。 JSON的優點：基于純文本，跨平臺傳遞極其簡單； Javas...

TesterHome 2019-08-20 14:35 評論0 收藏0