什么是JSONP

最新推荐文章于 2025-05-23 06:48:24 发布
最新推荐文章于 2025-05-23 06:48:24 发布
阅读量446 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_38102188/article/details/81665669
本文详细介绍了JSONP的工作原理，包括请求方如何通过动态创建script标签并设置src属性来发起跨域请求，以及响应方如何根据查询参数构造回调函数进行响应。此外还说明了JSONP的一些通用约定。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

这里先假定两个网站分别是a.com和b.com

请求方：a.com的前端程序员（浏览器）
响应方：b.com的后端程序员（服务器）
1、请求方动态创建script, src指向响应方，同时传递查询参数？callback=xxx
2、响应方根据查询参数callback, 构造形如：xxx.call(undefined, ‘success’)这样的响应
3、浏览器器接收响应，执行返回的js代码：xxx.call(undefined, ‘success’)
4、‘success’这类数据就是前端需要后台返回的结果
以上就是JSONP

JSONP一般有以下约定：
1、查询参数的key一般叫callback
2、回调函数名xxx一般是随机数的形式，以免污染全局变量

什么是JSONP？
weixin_45436744的博客
10-19 1577
JSONP(JSON with Padding)是 json 的一种"使用模式"，可以让网页从别的域名（网站）那里获取资料，即跨域读取数据。 由于同源政策的原因，我们从不同的域名（网站）访问数据需要一个特殊的技术———JSONP JSONP的原理 1、利用script标签的src属性来实现跨域。 2、通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信。...
什么是JSONP，它为何被创建？
最新发布
qq_29715355的博客
06-27 828
客户端需要在全局作用域中定义与callback参数值相同的回调函数，用于处理服务器返回的数据。当<script>标签加载完成后，会自动执行回调函数，从而实现跨域数据的处理。
JSONP
adb96102的博客
03-05 446
一、JSONP的诞生 首先，因为ajax无法跨域，然后开发者就有所思考 其次，开发者发现，<script>标签的src属性是可以跨域的把跨域服务器写成调用本地的函数，回调数据回来不就好了？ json刚好被js支持（object） 调用跨域服务器上动态生成的js格式文件（不管是什么类型的地址，最终生成的返回值都是一段...
jsonp
Kylin的专栏
06-17 7607
jsonp 我们知道，普通的ajax请求存在跨域无权限访问的问题，这是浏览器的安全策略在起作用 index.php: <?php $info = '{ "code" : 10, "title" : "jsonp", "name" : "rgy" }'; echo $info; ?> test.html中的js代码： $.ajax({ type:
跨域解决方案之JSONP
跟佟格码路一起学习计算机知识吧~
05-23 1132
在 Web 开发领域，跨域问题始终是开发者需要攻克的难关。浏览器的同源策略严格限制了不同源（协议、域名、端口任意一项不同）之间的资源访问，导致 AJAX 请求无法直接获取跨域数据。JSONP（JSON with Padding）作为早期流行的跨域解决方案，利用<script>标签的特性巧妙绕过这一限制。虽然如今 CORS 已成为主流，但 JSONP 的原理与应用仍值得深入了解。
JSONP是什么
weixin_34018202的博客
12-27 160
一、JSONP的诞生 首先，因为ajax无法跨域，然后开发者就有所思考 其次，开发者发现， <script>标签的src属性是可以跨域的把跨域服务器写成 调用本地的函数 ，回调数据回来不就好了？ json刚好被js支持（object） 调用跨域服务器上动态生成的js格式文件（不管是什么类型的地址，最终生成的返回值都是一段js...
什么是JSONP，以及如何正确地处理和实现JSONP请求？
10-21
JSONP (JSON with Padding) 是一种跨域数据交互技术，它的全称是 "JSON with Padding" 或者 "JSON-P"。由于同源策略限制，JavaScript 通常不能直接从其他域名下的服务器获取数据。但是，JSONP 利用了 `<script>` ...
什么是jsonp跨域原理
04-07
JSONP（JSON with Padding）是一种跨域数据请求的方法，它利用了浏览器允许跨域请求 JS 和 img 标签的特性，实现了跨域请求数据的功能。 其原理是利用 script 标签的 src 属性可以加载跨域资源的特性，将数据封装成...
Jsonp 关键字详解及json和jsonp的区别，ajax和jsonp的区别
10-23
JSONP和JSON都是数据交换格式，但它们的使用场景和工作方式存在明显差异。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它以易于阅读和编写的形式存储和表示数据，易于人阅读和编写，同时也易于...
JSONP 是什么？
梁辰兴的博客
11-13 2553
JSONP 不是一门编程语言，也不是什么特别的技术，它更像一个漏洞，程序员可以利用这个漏洞，实现跨域（可以简单理解为跨域名）传输数据。虽然 JSONP 与 JSON 看起来很像，但它们却是完全不同的，本节我们就来简单介绍以下 JSONP。在介绍 JSONP 之前，先来介绍一下浏览器的同源策略。JSONP 全称“JSON with Padding”，译为“带回调的 JSON”，它是 JSON 的一种使用模式。通过 JSONP 可以绕过浏览器的同源策略，进行跨域请求。
一次关于JSONP的小实验与总结
weixin_30496431的博客
01-29 162
前言： 今天，无意间看到自己某个文件夹下有个JSONP的东西。慢慢回忆起，这个东西是之前想写的一个demo，也不知道是多久以前了，但是不知道怎么的，给忘那边了。那么，就趁这个机会把它完成吧，其实也说不上是一个demo，就是一个小实验，虽然，网上也已经有很多关于JSONP的文章和例子了，但是有些东西看看很简单，不亲自试一下总觉得不踏实。我今天为什么要实验，一方面也是经常在网上看...
说说JSON和JSONP，也许你会豁然开朗
rznice的专栏
07-17 1986
前言 　　由于Sencha Touch 2这种开发模式的特性，基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。 　　当然了，通过调用强大的PhoneGap插件然后打包，你可以实现100%的Socket通讯和本地数据库功能，又或者通过HTML5的WebSocket也可以实现与服务器的通讯和服务端推功能，但这两种方式都有其局限性，前者需要PhoneGap支持，后者要求用户设备必须支持We
jsonp原理详解——终于搞清楚jsonp是啥了
热门推荐
学Java，找哪吒
07-14 2万+
一、JSONP的由来 1、Ajax直接请求普通文件存在跨域无权限访问的问题，不管是静态页面、动态页面、web服务，只要是跨域请求，一律不准。 2、不过我们发现，web页面调用js文件则不受跨域的影响（不仅如此，我们还发现凡是拥有“src”这个属性的标签都拥有跨域的能力，比如<\script>、<\img>、<\iframe>）。 3、于是可以判断，当前阶段如果想通过纯web端跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用
JSONP 是什么
weixin_33806914的博客
10-17 341
JSONP 是什么 说实话，我学了这么久，其实也没有好好了解这个东西，当然平常自己在前端方面也涉猎较浅。 1) jsonp 是什么 JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的 跨域 数据访问的问题。 跨域？ 由于同源策略的原因，也就是说你请求资源时，浏览器对于不是你当前域名或者端...
jquery jsonp 跨域
u010961759的专栏
09-18 517
什么是JSONP 　　先说说JSONP是怎么产生的： 　　其实网上关于JSONP的讲解有很多，但却千篇一律，而且云里雾里，对于很多刚接触的人来讲理解起来有些困难，小可不才，试着用自己的方式来阐释一下这个问题，看看是否有帮助。 　　1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准； 　　2、不过
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值