跨域详解之-----Jsonp跨域

一、通过jsonp跨域

在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。

比如，有个a.html页面，它里面的代码需要利用ajax获取一个不同域上的json数据，假设这个json数据地址是https://api.douban.com/v2/book/search?q=javascript&count=1(豆瓣)

那么a.html中的代码就可以这样：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JSONP实现跨域2</title>
</head>
<body><div id="mydiv"><button id="btn">点击</button></div>
</body>
<script type="text/javascript">function handleResponse(response){             //response参数为接收到的数据               console.log(response);}
</script>
<script type="text/javascript">window.onload = function() {                       var oBtn = document.getElementById('btn');oBtn.onclick = function() {     var script = document.createElement("script");                     //动态加载script     script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";           //跨域请求 callback参数对应方法

        document.body.insertBefore(script, document.body.firstChild); };           //将script标签加入到body里     }; 

   </script> 

</html>

注：

我们看到获取数据的地址后面还有一个callback参数，按惯例是用这个参数名，但是你用其他的也一样。当然如果获取数据的jsonp地址页面不是你自己能控制的，就得按照提供数据的那一方的规定格式来操作了。

输出结果为：

二、jQuery封装JSONP

对于经常用jQuery的开发者来说，能注意到jQuery封装的$.ajax中有一个dataType属性，如果将该属性设置成dataType:"jsonp"，就能实现JSONP跨域了。需要了解的一点是，虽然jQuery将JSONP封装在$.ajax中，但是其本质与$.ajax不一样。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery实现JSONP</title>
</head>
<body><div id="mydiv"><button id="btn">点击</button></div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript">$(function(){$("#btn").click(function(){$.ajax({async : true,url : "https://api.douban.com/v2/book/search",type : "GET",dataType : "jsonp", // 返回的数据类型，设置为JSONP方式jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callbackjsonpCallback: 'handleResponse', //设置回调函数名data : {                       //拼接urlq : "javascript", count : 1}, success: function(response, status, xhr){console.log('状态为：' + status + ',状态是：' + xhr.statusText);console.log(response);}});});});
</script>
</html>

转载于:https://www.cnblogs.com/8080zh/p/9289364.html

跨域详解之-----Jsonp跨域相关推荐

详解SpringBoot应用跨域访问解决方案
详解SpringBoot应用跨域访问解决方案参考文章: (1)详解SpringBoot应用跨域访问解决方案 (2)https://www.cnblogs.com/zimug/p/11832737.h ...
【转】JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
跨域详解！前后端分离解决跨域问题
文章目录一.为什么会出现跨域问题二.什么是跨域三.非同源限制四.跨域问题的解决方式 Jsonp前后端配合前端修改后端修改 CORS 详解响应头 5. SpringBoot解决 [方式一]全 ...
nginx配置详解，nginx跨域问题
文章目录前言更改hosts文件新增velocityerp.top.conf配置文件 nginx配置header参数(解决跨域),接口方配置 nginx反向代理(解决跨域),发送方配置 nginx ...
FPGA基础知识极简教程（7）详解亚稳态与跨时钟域传输
博文目录写在前面正文 FPGA或ASIC中的传播延迟建立和保持时间是什么? 建立和保持时间与传播延迟和时钟频率有何关系? 如果违反建立和保持时间会发生什么? FPGA中的亚稳定是什么? 亚稳态何 ...
跨域（1） jsonp 跨域
jsonp 的例子 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
区块链研习 | 详解三大主要跨链技术，如何推动价值网络的实现
2017年以来,区块链项目井喷状出现.截至2017年底,GitHub上的项目数超过8万,另据coinmarketcap数据显示,目前已有token种类达到1506个,总市值超过4000亿美元. 但是在 ...
Lazada和Shopee选品分析之马来西亚电商市场详解-海鲸跨境
马来西亚基础信息: 马来西亚是东南亚第三大经济体,国民富足:并且年轻人众多,对中国的产品非常喜爱. 国民经济:2019你那GDP 3543亿美元,增长4.7% 人均收入:10460美元,仅次于新加坡 ...
集线器、交换机以及路由器异同 + 冲突域和广播域详解
转载自:https://blog.csdn.net/gui951753/article/details/79402528 冲突域和广播域在介绍这三个设备的异同之前,我们首先需要了解冲突域和广播域的概 ...

跨域详解之-----Jsonp跨域

二、jQuery封装JSONP

跨域详解之-----Jsonp跨域相关推荐

最新文章

热门文章