博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JSONP实现跨域
阅读量:6159 次
发布时间:2019-06-21

本文共 1185 字,大约阅读时间需要 3 分钟。

首先提出:什么是跨域?如何解决跨域?

 跨域可以简单的理解为从一个域名访问另一个域名,由于javascript的同源政策的限制,出于安全的考虑,不允许浏览器这么做。比如a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。跨域分为跨域和跨子域。跨域:www.baidu.com和www.sina.com之间。跨子域:www.baidu.com和mp3.baidu.com之间。

跨域有不同的解决方案,JSONP为当前常见的解决方案。它实际上是动态创建一个script标签,将请求的URL设置为这个标签src,而非ajax下访问,所以也就不需要在服务器环境下打开网页。这种方式需要前端和后台代码都进行相应的修改和实现,不是特别理想。不过目前的流行框架,都封装了JSONP的实现,因此前端无需太大的改动,反而是后台需要多一步实现。

iframe也是比较常见的解决方法之一。通过动态创建iframe标签并访问url,但却没有jsonp好用。

那么,什么是JSONP呢?JSONP又是怎么使用的呢?

JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。

其实有点类似CDN的使用。比如调用JQ的时候可以引用jq的CDN:<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>,就能在页面中获取JQ的源码。jsonp也是创建script标签,通过src属性里面的相关网页的API获取数据。src里一般会有一个回调函数,可以通过自定义回调函数对获取到的数据进行操作。

举个简单例子:

    
Document

 分析上面代码:wd=html5表示在百度搜索框输入html5,然后回调函数cb为上面自定义的aaa,aaa就是将返回来的数据打印出来。结果如图:

 这样就实现了一个最简单的跨域请求。

JQuery下实现JSONP的跨域。

    
Document

 

转载于:https://www.cnblogs.com/wuzhiquan/p/4829658.html

你可能感兴趣的文章
SQL优化技巧
查看>>
thead 固定,tbody 超出滚动(附带改变滚动条样式)
查看>>
Dijkstra算法
查看>>
css 动画 和 响应式布局和兼容性
查看>>
csrf 跨站请求伪造相关以及django的中间件
查看>>
MySQL数据类型--与MySQL零距离接触2-11MySQL自动编号
查看>>
生日小助手源码运行的步骤
查看>>
Configuration python CGI in XAMPP in win-7
查看>>
bzoj 5006(洛谷 4547) [THUWC2017]Bipartite 随机二分图——期望DP
查看>>
CF 888E Maximum Subsequence——折半搜索
查看>>
欧几里德算法(辗转相除法)
查看>>
面试题1-----SVM和LR的异同
查看>>
MFC控件的SubclassDlgItem
查看>>
如何避免历史回退到登录页面
查看>>
《图解HTTP》1~53Page Web网络基础 HTTP协议 HTTP报文内的HTTP信息
查看>>
unix环境高级编程-高级IO(2)
查看>>
树莓派是如何免疫 Meltdown 和 Spectre 漏洞的
查看>>
雅虎瓦片地图切片问题
查看>>
HTML 邮件链接,超链接发邮件
查看>>
HDU 5524:Subtrees
查看>>