33、JSONP跨域
跨域请求数据也是可以的,只不过Ajax这技术不行,而JSONP这种数据格式可以进行跨域。很多年前,浏览器是没有跨域限制的,可以正常跨域,浏览器为了安全和隐私限制了Ajax跨域
JSONP原理就是:将函数执行的部分,放到了服务器上面。
JSONP的优缺点:
优点:
与利用XHR对象发送Ajax请求不同,JSONP可以跨越同源策略;
JSONP的兼容性好,可以在众多浏览器中运行。
缺点:
只支持GET一种类型的HTTP请求,应用场景有限;
调用失败时缺少必要的提示信息,不方便排查问题;
存在一定的安全风险,但可以使用Referer和Token校验进行规避;
不便于控制;
没有回调函数的功能。
原生JSONP跨越请求数据
如果想获取别人服务器上的JSONP数据,你必须声明一个和别人服务器上的同名函数(也可以改名)
<div id='btn'>按钮</div><script type="text/javascript">// 封装成方法var btn = document.getElementById("btn");function JSONP(url, callback){//给传进来的匿名函数起名,并定义在全局,window.回调函数名window.jQuery1102018240398381236766_1558663885975 = callback;//创建DOMvar oscript = document.createElement('script');oscript.src = url;//上树document.body.appendChild(oscript);//过河拆桥,拿完下树document.body.removeChild(oscript);}//发起请求btn.onclick = function(){JSONP("https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=1457,21101,18559,29063,28519,29098,28720,28964,28835,28585,26350&wd=abc&req=2&csor=3&pwd=ab&cb=jQuery1102018240398381236766_1558663885975&_=1558663885984", function(data){console.log(data); //data数据是从函数执行部分传过来的})}</script>
jQuery的JSONP跨域
jQuery对JSONP进行了封装,jsonCallback就是传进去的函数名字
<div id='btn2'>按钮2</div><script>// jquery 的jsonpvar btn2 = document.getElementById("btn2");btn2.onclick = function(){$.ajax({url:"https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=1457,21101,18559,29063,28519,29098,28720,28964,28835,28585,26350&wd=abc&req=2&csor=3&pwd=ab&cb=?&_=1558663885984",dataType:"jsonp",// jsonpCallback:"jQuery1102018240398381236766_1558663885975",success:function(data){console.log(data)}})}</script>
用jQuery跨域的时候,url中的callback后面是函数的名称,也可以自己修改函数名。
如果url的callback后面是?号,不用写jsonpCallback回调函数,jQuery会随机的命名函数。
转载于:https://www.cnblogs.com/zhongchao666/p/10916804.html
33、JSONP跨域相关推荐
- 【转载】一个通过JSONP跨域调用WCF REST服务的例子(以jQuery为例)
一个通过JSONP跨域调用WCF REST服务的例子(以jQuery为例) JSONP(JSON with Padding)可以看成是JSON的一种"使用模式",用以解决" ...
- JSONP跨域资源共享的安全问题
目录 关于 JSONP 一.JSON 劫持 二.Callback 可定义导致的安全问题 三.其他文件格式( Content-Type )与 JSON 四.防御 摘自:http://blog.known ...
- .net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器...
1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...
- jsonp跨域ajax跨域get方法
原理: 就是利用<script >标签没有跨域限制的,从而达到与第三方网站通讯的目的.当需要通讯时,本站脚本创建一个<script>标签,src地址指向第三方网站的的一个网址. ...
- jsonp跨域实现单点登录,跨域传递用户信息以及保存cookie注意事项
网站A:代码:网站a的login.html页面刷新,使用jsonp方式将信息传递给b.com的login.php中去,只需要在b.com中设置一下跨域以及接收参数,然后存到cookei即可, 注意:网 ...
- JSONP跨域jQuery处理整理(附天气数据实例)
写在前面 跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨 ...
- jsonp 跨域原理详解
转载至:http://zha-zi.iteye.com/blog/1975116 JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制 ...
- jsonp跨域原理_【网站技术解读①】Javascript实现跨域请求
推荐一个读者做的不错的编程学习网站: 网站:潜安 域名:http://www.qianani.com 另外将会不定期推送近期网站用到的一些技术,讲一些核心原理,今天为第一篇 问题由来: 最近一直在优化 ...
- jsonp跨域访问服务
前段时间在做产品开发的时候,需要与公司网站那边进行交互,我们所开发的产品上线后是放在一个域名下,公司网站那块是在另一个域名下,这样在页面中调用 网站那边的接口时就存在跨域的问题,当时为了不修改网站那边 ...
最新文章
- Mysql学习笔记之常用数据类型
- 亚马逊封店潮之后,跨境电商卖家该如何调整来拓展新的市场?
- 自定义函数变量的设置(*/**),lambda匿名函数(map/filter/zip/enumerate)
- svn之check out没有下载so文件原因和解决办法
- 从Linux服务器端下载文件Win客户端
- 用Python算24点
- php中is_uploaded_file()函数的用法
- Go语言实战--学习笔记--runner
- dubbo源码解析-cluster
- java计算机毕业设计教务管理系统源码+mysql数据库+系统+lw文档+部署
- 利用线性回归进行销售预测
- smplayer中使用srt字幕乱码问题
- 最新xmind2022版思维导图如何使用详解教程
- python电话模块_Python常用模块
- C语言输出转置矩阵解题步骤,C语言实现矩阵转置
- Android 截取指定号码的短信 并且不让系统获取短信通知用户
- 在Adobe Acrobat Pro调整PDF页面大小(使得页面一样大)
- 如何查询SCI和EI索引号
- 为李想打call,谋局汽车,美团王兴的外卖终极战竟在这里
- 封神台SQL注入-宽字节