jsonp的原理与实现

SillyMonkey 发布于2019-08-22 10:45 / 2643人阅读

摘要：概述是一种跨域通信的手段，它的原理其实很简单首先是利用标签的属性来实现跨域。可靠的实现添加回调函数拼接传递的是一个匿名的回调函数，要执行的话，暴露为一个全局方法出错处理使用示例来源个人博客

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的实现原理图像识别技术的原理与应用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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