JSONP 的工作原理

最新推荐文章于 2023-05-12 16:16:52 发布
最新推荐文章于 2023-05-12 16:16:52 发布
阅读量720 收藏 2
点赞数
分类专栏： PHP
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37604843/article/details/78654946
版权

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
bo_bo_bo_rr
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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技术原理及实现
10-22
主要介绍了浅析JSONP技术原理及实现 的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
JSONP是什么
weixin_34018202的博客
12-27 98
一、JSONP的诞生 首先，因为ajax无法跨域，然后开发者就有所思考 其次，开发者发现， <script>标签的src属性是可以跨域的把跨域服务器写成 调用本地的函数 ，回调数据回来不就好了？ json刚好被js支持（object） 调用跨域服务器上动态生成的js格式文件（不管是什么类型的地址，最终生成的返回值都是一段js...
JSONP 的工作原理是什么？
diluo9689的博客
11-16 129
利用<script>标签没有跨域限制的“漏洞”来达到与第三方通讯的目的。 当需要通讯时，本站脚本创建一个<script>元素，地址指向第三方的API网址，形如： <script src="http://www.xxxx.com/index.php?par1=1&bar2=2"></script> 并提供一个回调函数来接收...
jsonp的工作原理
weixin_34187822的博客
11-04 63
&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原理及简单实现的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
JSONP 原理
01-08
### JSONP的工作原理 1. **动态创建`<script>`标签**: JSONP的核心在于利用`<script>`标签的`src`属性可以加载跨域脚本的特性。当我们在HTML文档中添加一个`<script>`标签并设置其`src`属性指向提供JSONP服务的...
jsonp原理及使用
10-26
**JSONP的工作原理：** 1. **请求发起**：当需要跨域获取数据时，客户端（通常是网页中的JavaScript）会创建一个新的`<script>`标签，并设置其`src`属性指向提供JSONP服务的服务器URL。URL中通常会包含一个名为`...
请解释jsonp的工作原理
LuckXinXin的博客
10-28 2161
解释jsonp 的原理 以及为什么不是ajax jsonp的原理：jsonp之所以能跨域，是因为他并不是发送ajax请求，并不是利用XMLHTTPRequest对象和服务端进行通信，他其实是利用动态创建的script标签，而script标签是没有同源策略限制的，可以跨域的。创建script标签，然后将其src，指向我们真实的服务端的地址，在这个地址的后面有一个参数比如calback=a,然后服务端...
浅谈JSONP 的工作原理
weixin_30685029的博客
10-14 81
小编最近在工作中经常用到 jsonp 这个东西， 表示之前从来没用过 最近稍微研究了下 当然很多内容来源于网上 收集整理 你懂的 ~~~ 话说我们访问一个页面的时候 需要像另一个网站获取部分信息， 这就是所谓的跨域请求才能完成的功能， 现实生活中有很多 比如引入外部js， img 等等， 说到发送请求， 在web2.0的时代 我们避免不了 ajax 请求了， 当然我们在 工作中用到...
JSONP原理及其使用
ldb923的博客
06-28 540
jsonp主要是为了解决跨域访问问题而产生的，其返回的数据格式一般就是一个js脚本，这个脚本有以下特点：返回的js脚本通常是服务端动态生成的。整个脚本通常有且仅有一条语句，且是一个函数调用。脚本中调用到的函数，是页面上存在的一个函数，其函数名通过get参数传递给服务端，服务端再将其回写到js脚本中。函数的参数，是服务端处理后的结果数据，以json格式直接写在脚本中。这也是jsonp得名的由来。因为...
jsonp 工作原理
bdss58的专栏
04-07 616
jsonp 工作原理在跨域请求的解决方案中，jsonp是一种常用的简洁方案。 <script> 标签可以加载不同域资源。我们常用的jquery库就是通过script标签加载到当前域页面中的。<script type="text/javascript" src="http://xxcnd.com/jquery.min.js">利用script标签加载不同域的资源：script = document.
初识jsonp
weixin_34364071的博客
10-27 71
jsonp 全称是JSON with Padding，是为了解决跨域请求资源而产生的解决方案。很多时候我们需要在客户端获取服务器数据进行操作，一般我们会使用ajax+webservice做此事，但是如果我们希望获取的数据和当前页面并不是一个域，著名的同源策略（不同域的客户端脚本在没明确授权的情况下，不能读写对方的资源）会因为安全原因决绝请求，也就是我们不能向其它域直接发送请求以获取资源。 在lo...
JSONP 的工作原理，JSONP Demo讲解
luyaran的博客
09-09 833
JSONP  是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback 或者开始就定义一个回调方法，参数给服务端，然后服务端返回数据时会将这个callback 参数作为函数名来包裹住 JSON  数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。 JSONP  和 JSON  的区别： JSON  是一种传输格式，而 JSONP  呢是一种数据的获取方
jsonp实现原理
qq_28349987的博客
04-08 377
以页面url为基础，页面内的请求使用不同的协议、域名、端口则会出现跨域问题。这是因为浏览器的同源策略导致jsonp 利用 ‘&lt;script&gt;’标签不受同源策略限制（script标签src属性中的链接可以访问跨域的js脚本）原理：服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码具体过程：首先在页面内定义一个函数 然后添加一个script标签做请求，服务器返回scrip...
jsonp 实现原理及代码解析
weixin_34111790的博客
01-15 100
前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jsonp 的使用</title> <script src="//cdn.bootcss...
jsonp的原理与实现
油墨香^-^的博客
06-24 5302
1、概述 jsonp是一种跨域通信的手段，它的原理其实很简单： 首先是利用script标签的src属性来实现跨域。 通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信。 由于使用script标签的src属性，因此只支持get方法 2、实现流程 1）、设定一个script标签 <script src="http://jsonp.js?callback=xxx"></script> 2）、cal
jsonp原理详解
最新发布
jkzyx123的博客
05-12 1182
jsonp实现原理
什么是jsonp跨域原理
04-07
其原理是利用 script 标签的 src 属性可以加载跨域资源的特性，将数据封装成函数调用的形式，作为 script 文件传回来。服务器接收到请求后，将数据以 JSON 的格式返回，并在返回数据的同时，将数据封装成一个函数的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值