jsonp 实现原理及代码解析

xiaodao 发布于2019-08-20 13:46 / 2296人阅读

摘要：如果后台要返回一个回调函数包裹的字符串，在前端定义好该回调函数的方法，就能在回调函数中获取到后台返回的数据了。

前端代码




    
    jsonp 的使用

后台代码

需要本地有 nodejs 环境，以及安装 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 数据，就不能用，但是数据还是一样会返回来。

如果后台要返回一个回调函数包裹的字符串，在前端定义好该回调函数的方法，就能在回调函数中获取到后台返回的数据了。

返回来后会执行 jsonpCallBack 方法，并把数据作为参数传到 jsonpCallBack 方法执行。

常见问题

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

转载请注明本文地址：https://www.ucloud.cn/yun/81234.html

前端培训-中级阶段（11、12）- 跨域请求原理以及实现（2019-08-22期）

摘要：上节我们讲了同源策略，这节我们讲讲如何跨域。当这些从的脚本执行出错，因为违背了同源策略为了保证用户信息不被泄露，错误信息不会显示出来，取而代之只会返回一个。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每...

binaryTree 2019-08-26 10:21 评论0 收藏0
同源策略与跨域资源共享的纠缠

摘要：扯了这么多，自然不是为了吹水，而是要为了引出前端开发的一个重要的知识点同源策略什么是同源策略出于保护用户信息安全的目的，现在的浏览器都会实施同源策略这个政策，所谓同源策略指的是不同源的客户端脚本在没有明确授权情况下，不允许读写对方的资源。导语你家的小孩带了他的朋友来你们的家里玩，你家的小孩如果要在自家屋里拿玩具玩、拿东西吃你自然是不会阻止，但是如果你家小孩的朋友人品不行，乱拿东西吃、...

alighters 2019-08-21 11:17 评论0 收藏0
同源策略与跨域资源共享的纠缠

摘要：扯了这么多，自然不是为了吹水，而是要为了引出前端开发的一个重要的知识点同源策略什么是同源策略出于保护用户信息安全的目的，现在的浏览器都会实施同源策略这个政策，所谓同源策略指的是不同源的客户端脚本在没有明确授权情况下，不允许读写对方的资源。导语你家的小孩带了他的朋友来你们的家里玩，你家的小孩如果要在自家屋里拿玩具玩、拿东西吃你自然是不会阻止，但是如果你家小孩的朋友人品不行，乱拿东西吃、...

赵连江 2019-06-27 15:05 评论0 收藏0
带你实现一个 JSONP 实例

摘要：前提是的方法名与引入的文件方法名一致。简单描述就是先定义一个方法，然后引入外部调用这个方法并携带数据。 JSONP 被用于跨域获取数据。在讲解它之前，先讲讲它与 JSON 之间的区别什么是JSON？ JSON 是一种基于文本的数据交换方式，或者叫做数据描述格式。其优点是： 1、基于纯文本，跨平台传递极其简单； 2、Javascript 原生支持，后台语言几乎全部支持； 3、轻量级数...

verano 2019-08-23 11:58 评论0 收藏0
PHP笔试面试题精选（一）

摘要：，跨站脚本攻击。实际发的请求就是，用于表示这是一个请求。，用于告知服务器根据这个参数获取回调函数的名称，通常约定就叫。，回调函数的名称，也是前面参数的值，可省略，会自动生成。本次课程主要围绕 PHP 面试和笔试中经常会出现的一些知识点，但是面试官会在笔试题基础上深入扩展，那么你知道如何更好的回答让面试官满意吗？题目收集自腾讯，迅雷，美图等公司的笔试面试题，以及本人面试经历中印象中的知...

JohnLui 2019-06-27 17:00 评论0 收藏0