请解释jsonp的工作原理

最新推荐文章于 2024-06-20 20:55:24 发布
最新推荐文章于 2024-06-20 20:55:24 发布
阅读量2.1k 收藏 2
点赞数 2
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LuckXinXin/article/details/105557638
版权

解释jsonp 的原理 以及为什么不是ajax

jsonp的原理：jsonp之所以能跨域，是因为他并不是发送ajax请求，并不是利用XMLHTTPRequest对象和服务端进行通信，他其实是利用动态创建的script标签，而script标签是没有同源策略限制的，可以跨域的。创建script标签，然后将其src，指向我们真实的服务端的地址，在这个地址的后面有一个参数比如calback=a,然后服务端可以解析到这个url，中的callback=a，服务端在返回的数据时，就会调用a方法，去包裹一段数据，然后返回这段js代码，相当于在前端去执行这个a方法。那么在前端发送请求之前，就要在window上去注册这个a方法，那么在服务端返回这个a方法执行的时候，就可以去之前在window上定义的a方法中获得数据了

LuckXinXin
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JSONP原理及简单实现
10-22
主要介绍了JSONP原理及简单实现的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
jsonp的原理与实现
油墨香^-^的博客
06-24 5314
1、概述 jsonp是一种跨域通信的手段，它的原理其实很简单： 首先是利用script标签的src属性来实现跨域。 通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信。 由于使用script标签的src属性，因此只支持get方法 2、实现流程 1）、设定一个script标签 <script src="http://jsonp.js?callback=xxx"></script> 2）、cal
jsonp原理详解——终于搞清楚jsonp是啥了
热门推荐
学Java，找哪吒
07-14 1万+
一、JSONP的由来 1、Ajax直接请求普通文件存在跨域无权限访问的问题，不管是静态页面、动态页面、web服务，只要是跨域请求，一律不准。 2、不过我们发现，web页面调用js文件则不受跨域的影响（不仅如此，我们还发现凡是拥有“src”这个属性的标签都拥有跨域的能力，比如<\script>、<\img>、<\iframe>）。 3、于是可以判断，当前阶段如果想通过纯web端跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用
跨域数据请求技术JSONP详解
最新发布
繁依Fanyi的博客
06-20 1452
当谈到 JSONP，就像是在谈论你在一场派对上认识的新朋友一样。让我们从头开始介绍。JSONP，简称 JSON with Padding，是一种利用标签进行跨域数据请求的技术。它允许你在网页中请求来自其他域的数据，而无需担心浏览器的同源策略（Same-Origin Policy）带来的限制。以一个简单的比喻来说，就像你在一家餐馆点菜一样。你可以在自己家里使用电话点餐，然后等着外卖送达，而不需要亲自去餐馆。JSONP允许你在当前页面中加载其他网站的数据，就像是通过电话点餐一样轻松。
jsonp原理详解
jkzyx123的博客
05-12 1195
jsonp实现原理
什么是JSONP及其实现原理
My_Soul_的博客
05-20 2629
一、为什么会有JSONP 解决跨域问题；因为XMLHttpRequest有同源策略，而在实际开发中又常有跨域的需求，早期开发者为解决跨域问题，设计出了JSONP这个东西 二、JSONP长什么样 类似JSON，一种JSON的变体，样式就像是包在函数的参数里 函数名({“data”:”数据”})，一般情况下这个函数都是个回调函数即 callback({“data”:”数据”}) 三、JSONP的实现原理 利用 <script>标签可以跨域get引入js脚本；通过<script><i
浅析JSONP技术原理及实现
10-22
主要介绍了浅析JSONP技术原理及实现 的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
JSONP实现原理
11-28
JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的...
JSONP 原理
01-08
### JSONP的工作原理 1. **动态创建`<script>`标签**: JSONP的核心在于利用`<script>`标签的`src`属性可以加载跨域脚本的特性。当我们在HTML文档中添加一个`<script>`标签并设置其`src`属性指向提供JSONP服务的...
JSONP 的工作原理
qq_37604843的博客
11-28 723
7/80— layout: JSONP 的工作原理 title: JSONP 的工作原理 date: 2017-11-15 21:06:47tags:JSONP 的工作原理1. JSONP由来根据浏览器同源策略，所谓同源就是协议、主机、端口号都相同时成为同源。a 域的js不能直接访问 b域名的信息，但是script 标签的src属性可以跨域引用文件，jsonp是请求之后后台包装好一段json，
jsonp 详解 —— 终于搞懂 jsonp 了
M_emory_的博客
07-02 9538
JSONP 不是一门编程语言，也不是什么特别的技术，它更像一个漏洞，程序员可以利用这个漏洞，实现跨域（可以简单理解为跨域名）传输数据。在介绍 JSONP 之前，先来介绍一下浏览器的同源策略。通过 jsonp，我们可以避开浏览器的同源策略，从而进行跨域请求。jsonp 是利用 HTML 标签的 src 属性引用资源不受同源策影响的特性来实现的，实现步骤如下：通过动态创建 script 标签，其 scr 指向非同源的 url，并传递一个 callback 参数给服务端。
jsonp原理和详解
"其实我是一演员"的专栏
03-25 1947
在介绍JSONP之前，先简单的介绍一些JSON。JSON是JavaScript Object Notation的缩写，是一种轻量的、可读的基于文本的数据交换开放标准。源于JavsScript编程语言中对简单数据结构和关联数组的展示功能。它是仅含有数据对和简单括号结构的纯文本，因此可通过许多途径进行JSON消息的传递。 1. JSONP定义JSONP是英文JSONwith Paddi...
jsonp 的原理及应用
CODER的博客
11-06 1万+
1. 什么是jsonp jsonp全称json with padding，填充式的json,jsonp是为跨域而生的 2. 那么有哪些标签可以跨域呢 <img src=""> //图片 <link href=""> //css <script src=""> //程序 我们可以使用script来帮助我们跨域 2.1 写一个服务端 server.js //服务端 //引入支持接受请求，返回响应的模块http const http=require("http"); //创建
前端跨域jsonp的细节，挡住面试官的连环提问
AlexGeek
04-16 2581
1.前言 在前端面试中，想必每一个人都会被问到跨域相关的问题，背过八股文的小伙伴肯定对跨域的解决对答如流，常见的跨域解决方案在网上有很多整理，但是如果问到实现的细节，你是否能够手写实现或者深入解读呢？其实很多情况下，面试官不仅仅会考察第一层的概念，还会追问第二层、第三层内容，所以对于实现原理的掌握是必要的，今天笔者就整理一下跨域的基本方式，重点介绍jsonp的实现~ 2.跨域方案 常见的跨域解决方案有8种左右，在面试中能答出4-5种就可以了~ 2.1 如果只是想要实现主域名下的不同子域名的跨域操作，我们
jsonp介绍
YY的博客
11-16 3331
jsonp介绍
jsonp 原理详解及 jsonp-pro 源码解析
m0_73257876的博客
08-27 467
JSONP（JSON with Padding）是资料格式JSON的一种“使用模式”，可以让网页从别的网域获取资料。由于浏览器同源策略，一般来说位于server1.a.com的网页无法与 server2.a.com的服务器沟通，而HTML的 元素是一个例外。利用 元素的这个开放策略，网页可以得到从其他来源动态产生的JSON资料，而这种使用模式就是所谓的 JSONP。...
什么是jsonp跨域原理
04-07
其原理是利用 script 标签的 src 属性可以加载跨域资源的特性，将数据封装成函数调用的形式，作为 script 文件传回来。服务器接收到请求后，将数据以 JSON 的格式返回，并在返回数据的同时，将数据封装成一个函数的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值