JSONP 的工作原理

最新推荐文章于 2025-06-15 16:06:23 发布
最新推荐文章于 2025-06-15 16:06:23 发布
阅读量806 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： PHP
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_37604843/article/details/78654946
本文介绍了JSONP的工作原理及其在跨域数据请求中的作用。详细解释了如何利用script标签的特性实现跨域通信，以及服务端如何响应客户端的请求。

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

7/80—
layout: JSONP 的工作原理
title: JSONP 的工作原理
date: 2017-11-15 21:06:47

tags:

JSONP 的工作原理

1. JSONP由来

根据浏览器同源策略，所谓同源就是协议、主机、端口号都相同时成为同源。a 域的js不能直接访问 b域名的信息，但是script 标签的src属性可以跨域引用文件，jsonp是请求之后后台包装好一段json，并且把数据放在一个callback函数，返回一个js文件，动态引入这个文件，下载完成js之后，会去调用这个callback,通过这样访问数据。

2. JSONP有什么用

由于同源从略的限制，XMLHttpRequest只允许请求前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后再服务端输出JSON数据并执行回调函数，从而解决跨域数据请求

3. 如何使用JSONP

  • HTML代码
    HTML代码
  • PHP代码
    PHP代码

4. JSONP原理

首先在客户端注册一个callback，然后把callback的名字传给服务器。此时，服务器先生成json数据，然后以javascript语法的方式，生成function，function名字就是传递上来I带参数jsonp。最后将json数据直接以入参的方式，放置function中，这样就生成js语法的文档，返回给客户端。客户端浏览器，解析script变迁，并执行返回javascript文档，此时数据作为参数，传入了客户端预先定义好的callback函数里。
简单的说，就是利用script标签没有跨域限制的“漏洞”来达到与第三方通讯的目的。

5. 备注

json 是一种数据格式
jsonp 是一种数据调用的方式，
联系 带callback的json就是jsonp
解释 jsonp 的原理，以及为什么不是真正的 ajax?
人生代码 ---- 公众号
10-13 1739
jsonp的原理:就是利用浏览器可以动态地插入一段js并执行的特点完成的。 2.为什么不是真正的 ajax? ajax的核心是 ： 通过XmlHttpRequest获取非本页内容， jsonp的核心 ： 动态添加<script>标签来调用服务器提供的js脚本。 3…ajax和jsonp的调用方式很像，目的一样，都是请求url，然后把服务器返回的数据进行处理，因此jquery和e...
JSONP实现原理
11-28
JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的[removed] 元素是一个例外。利用 [removed] 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。
JSONP是什么
weixin_34018202的博客
12-27 159
一、JSONP的诞生 首先，因为ajax无法跨域，然后开发者就有所思考 其次，开发者发现， <script>标签的src属性是可以跨域的把跨域服务器写成 调用本地的函数 ，回调数据回来不就好了？ json刚好被js支持（object） 调用跨域服务器上动态生成的js格式文件（不管是什么类型的地址，最终生成的返回值都是一段js...
JSONP 跨域请求原理解析与实践
最新发布
m0_73941339的博客
06-15 628
JSONP（JSON with Padding）是一种跨域数据交互技术，虽然它不是真正的 AJAX 请求，但可以实现类似的局部刷新效果。本文将深入解析 JSONP 的原理，并通过完整的 Java 后端和 JavaScript 前端示例演示其工作流程。
JSONP 的工作原理是什么？
diluo9689的博客
11-16 170
利用<script>标签没有跨域限制的“漏洞”来达到与第三方通讯的目的。 当需要通讯时，本站脚本创建一个<script>元素，地址指向第三方的API网址，形如： <script src="http://www.xxxx.com/index.php?par1=1&bar2=2"></script> 并提供一个回调函数来接收...
jsonp的工作原理
weixin_34187822的博客
11-04 102
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;!-- src 属性他自带有跨域功能，浏览器没有限制。 --
JSONP原理及简单实现
10-22
JSONP原理的核心在于动态创建标签，并将要请求的跨域URL作为该标签的src属性值。这个URL会包含一个callback参数，这个参数指定了一个将在当前页面执行的函数名。当请求成功返回时，数据会被包裹在这个函数调用的结构...
浅析JSONP技术原理及实现
10-22
JSONP的基本工作原理是动态创建一个`<script>`元素，将其`src`属性指向含有JSON数据的跨域URL，并在URL中指定一个回调函数（callback function），服务器在返回数据时将数据作为参数传递给该回调函数。 1. JSONP的...
请解释jsonp的工作原理
LuckXinXin的博客
10-28 2206
解释jsonp 的原理 以及为什么不是ajax jsonp的原理：jsonp之所以能跨域，是因为他并不是发送ajax请求，并不是利用XMLHTTPRequest对象和服务端进行通信，他其实是利用动态创建的script标签，而script标签是没有同源策略限制的，可以跨域的。创建script标签，然后将其src，指向我们真实的服务端的地址，在这个地址的后面有一个参数比如calback=a,然后服务端...
浅谈JSONP 的工作原理
weixin_30685029的博客
10-14 126
小编最近在工作中经常用到 jsonp 这个东西， 表示之前从来没用过 最近稍微研究了下 当然很多内容来源于网上 收集整理 你懂的 ~~~ 话说我们访问一个页面的时候 需要像另一个网站获取部分信息， 这就是所谓的跨域请求才能完成的功能， 现实生活中有很多 比如引入外部js， img 等等， 说到发送请求， 在web2.0的时代 我们避免不了 ajax 请求了， 当然我们在 工作中用到...
说一下 JSONP 实现原理？
m0_68464502的博客
09-27 314
需要注意的是，JSONP只支持GET请求，不支持POST请求，且存在一定的安全风险，需要确保目标服务器可信并且返回的数据是可靠的。另外，在使用JSONP时，需要与目标服务器进行约定，确保前后端的回调函数名称一致，以便正确获取返回的数据。关键点是，由于浏览器对于`<script>`标签的请求不受同源策略的限制，因此可以通过动态创建`<script>`标签实现跨域请求。2. 目标服务器在接收到请求后，将要返回的数据包裹在一个指定的回调函数中，并将整个函数作为响应返回给前端页面。
JSONP原理及其使用
ldb923的博客
06-28 607
jsonp主要是为了解决跨域访问问题而产生的，其返回的数据格式一般就是一个js脚本，这个脚本有以下特点：返回的js脚本通常是服务端动态生成的。整个脚本通常有且仅有一条语句，且是一个函数调用。脚本中调用到的函数，是页面上存在的一个函数，其函数名通过get参数传递给服务端，服务端再将其回写到js脚本中。函数的参数，是服务端处理后的结果数据，以json格式直接写在脚本中。这也是jsonp得名的由来。因为...
jsonp 工作原理
bdss58的专栏
04-07 654
jsonp 工作原理在跨域请求的解决方案中，jsonp是一种常用的简洁方案。 <script> 标签可以加载不同域资源。我们常用的jquery库就是通过script标签加载到当前域页面中的。<script type="text/javascript" src="http://xxcnd.com/jquery.min.js">利用script标签加载不同域的资源：script = document.
初识jsonp
weixin_34364071的博客
10-27 116
jsonp 全称是JSON with Padding，是为了解决跨域请求资源而产生的解决方案。很多时候我们需要在客户端获取服务器数据进行操作，一般我们会使用ajax+webservice做此事，但是如果我们希望获取的数据和当前页面并不是一个域，著名的同源策略（不同域的客户端脚本在没明确授权的情况下，不能读写对方的资源）会因为安全原因决绝请求，也就是我们不能向其它域直接发送请求以获取资源。 在lo...
JSONP 的工作原理，JSONP Demo讲解
luyaran的博客
09-09 896
JSONP  是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback 或者开始就定义一个回调方法，参数给服务端，然后服务端返回数据时会将这个callback 参数作为函数名来包裹住 JSON  数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。 JSONP  和 JSON  的区别： JSON  是一种传输格式，而 JSONP  呢是一种数据的获取方
jsonp实现原理
qq_28349987的博客
04-08 465
以页面url为基础，页面内的请求使用不同的协议、域名、端口则会出现跨域问题。这是因为浏览器的同源策略导致jsonp 利用 ‘&lt;script&gt;’标签不受同源策略限制（script标签src属性中的链接可以访问跨域的js脚本）原理：服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码具体过程：首先在页面内定义一个函数 然后添加一个script标签做请求，服务器返回scrip...
jsonp 实现原理及代码解析
weixin_34111790的博客
01-15 132
前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jsonp 的使用</title> <script src="//cdn.bootcss...
jsonp的原理与实现
油墨香^-^的博客
06-24 5383
1、概述 jsonp是一种跨域通信的手段，它的原理其实很简单： 首先是利用script标签的src属性来实现跨域。 通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信。 由于使用script标签的src属性，因此只支持get方法 2、实现流程 1）、设定一个script标签 <script src="http://jsonp.js?callback=xxx"></script> 2）、cal
JSONP的原理
03-19
### JSONP 的工作原理 JSONP（JSON with Padding）是一种用于解决跨域数据请求的技术。它基于 `<script>` 标签的特性，能够加载来自不同域名下的 JavaScript 文件。 #### 跨域问题背景 浏览器出于安全考虑实施了同源策略（Same-Origin Policy），即只有协议、主机名和端口号完全相同的两个页面才能互相访问对方的资源。然而，在实际开发中，常常需要从不同的服务器获取数据。此时，`<script>` 标签提供了一种绕过此限制的方式，因为它可以加载任意来源的脚本文件[^1]。 #### 实现机制 当客户端发起一个 JSONP 请求时，实际上是在动态创建一个 `<script>` 元素并将其插入 DOM 中。这个 `<script>` 元素指向目标 URL，并附带了一个回调函数名称作为参数。服务端接收到该请求后返回一段可执行的 JavaScript 代码，这段代码调用了指定的回调函数并将所需的数据传递给它[^2]。 以下是具体的流程描述： 1. **定义全局回调方法** 客户端先定义好接收响应数据的方法。 ```javascript function handleResponse(data) { console.log('Received data:', data); } ``` 2. **构建 script 动态节点** 使用 JavaScript 创建一个新的 `<script>` 元素，并设置其 src 属性为目标地址加上附加查询字符串形式传入 callback 参数值。 ```javascript const script = document.createElement('script'); script.src = 'https://example.com/api?callback=handleResponse'; document.body.appendChild(script); ``` 3. **服务端处理逻辑** 当服务器接收到上述带有特定 `callback` 查询项的 GET 请求之后，应该按照约定好的格式组装结果——即将原始 JSON 数据包裹在一个由 client 提供的名字所表示的函数体内再发送回去。 ```javascript // Server-side response example (Node.js/Express) app.get('/api', (req, res) => { const jsonData = { key: 'value' }; const callbackName = req.query.callback; res.type('application/javascript'); res.send(`${callbackName}(${JSON.stringify(jsonData)})`); }); ``` 4. **最终效果展示** 浏览器下载完成后立即运行那段被注入进去的新 JS 片段；由于其中包含了对之前声明过的那个 handler 函数的实际调用操作，因此也就实现了异步取得远程 API 返回的信息的目的[^5]。 #### 缺点分析 尽管 JSONP 是一种简单有效的解决方案，但它也存在一些明显的缺点： - **仅限于GET方式**：因为它是通过添加外部 js 来完成整个交互过程的，所以无法像 AJAX 那样自由选择其他的 HTTP 方法比如 POST 或 DELETE 等； - **安全性隐患**：如果第三方站点不可信，则可能会带来潜在风险，例如恶意修改网页内容或者窃取敏感信息等问题发生概率增加[^4]。 ```python def jsonp_example(): """ A simple Python representation of how a server might respond to a JSONP request. This is purely illustrative and does not represent actual executable code within the context described above. """ import json def generate_jsonp_response(callback_name="jsonpCallback", data={"message": "Hello from JSONP!"}): return f"{callback_name}({json.dumps(data)})" print(generate_jsonp_response()) ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值