JSONP跨域请求

最新推荐文章于 2023-06-09 19:24:23 发布
最新推荐文章于 2023-06-09 19:24:23 发布
阅读量4.8k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： Java应用 文章标签： JSONP 跨域 天气API 百度地图API 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/dosthing/article/details/85058635
本文介绍JSONP跨域请求原理及其实现方法，通过一个天气预报信息获取的实例，展示了如何利用JSONP突破同源策略限制，实现跨域数据获取。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言

与跨域相反的是同源，浏览器出于安全性考虑都会选用同源策略，主要是限制cookie、DOM、JS对象的获取，此外AJAX请求也不能发送。显然同源策略限制了前端的向外拓展的能力，实际应用中可以使用跨域请求来实现对外拓展。跨域顾名思义就是请求域名不同，如果考虑到细节，同一域名不同端口、同一域名不同协议也算跨域。举个例子，当前项目的请求是自己的公司域名下的链接，但是又想引用百度或者其他开放的API，此时的情景就是跨域。而跨域请求的解决方案以JSONP最为方便快捷。

JSONP跨域原理

前端常用AJAX请求来实现不刷新页面方式向服务器请求数据，但它受浏览器同源策略的影响而无法实现跨域请求。然而script标签src属性的引用却是不受跨越限制的，基于此可以发送跨域请求，服务端不再是返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用。

原生js方式实现

<script>
	//动态创建script标签
	function jsonp(url){
	    var script = document.createElement('script');
	    script.src = url;
	    document.body.append(script);
	    document.body.removeChild(script);
	}
	function callbackfun(){
		//处理jsonp跨域请求返回的结果
	}
	var url='http://xxx.com/jsonp?callback=callbackfun'；
	jsonp(url);	
</script>

Jquery实现

$.ajax({
    url: 'http://xxx.com/jsonp?callback=callbackfun'; //跨域请求链接
    type: 'get',	//http请求方式
    dataType: 'jsonp',  // 设置请求方式为jsonp
    jsonpCallback: "callbackfun",    // 定义响应跨域请求的回调函数
    data: {}
});

JSONP跨域请求百度API 获取天气预报信息效果

如图，百度API提供了当前城市的天气信息，地理位置是根据浏览器自动获取的。不知道为什么，就想码个红包上去，可能是程序员生活太单调了吧，唉，竟然都码上了，掏出手机支付宝扫一扫呗，从此我们有了半毛钱的关系(*^__^*)

标题

JSONP跨域请求样例

JSONP跨请请求拓展了前端获取资源的能力，在常规软件设计中我们不免会调用一些开放平台的API来丰富我们页面的内容，JSONP跨域请求是个不错的选择，下面我们利用JSONP跨域请求来实现获取天气预报信息的界面，样例很简单，请求链接为百度地图开放的API。

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#mainbody {
		width: 100%;
		height: 100%;
		overflow: hidden;
		margin:0;
		font-family:"微软雅黑";
		background: url(./weatherbackground.jpg) no-repeat;  
		background-size: cover;
	}
	#mainbody{
		width: 100%;
		height: 100%;
		border-radius: 10px;		
	}
	#weather{
		width: auto;
		height: 800px;
	}
	#navi{	
		width: 100%;
		height: 50px;		
		background:rgba(242,242,242,0.1);
		border-radius: 15px;
		text-align: center;
		padding: 18px;
		margin-bottom: 20px;
		font-size: 24px;
		color: #EEB217;

	}
	#weathercontent{
		/*margin-top:15px;*/
		width: 450px;
		height: 550px;		
		float: left;
		border-radius: 15px;
		background:rgba(242,242,242,0.5);
		text-align: center;
		padding: 10px;
		font-size: 24px;
		color: #EEB217;
	}
	#weathertipid{
		margin-top:20px;
		width: auto;
		height: 550px;		
		margin-left: 530px;
		border-radius: 15px;
		background:rgba(242,242,242,0.5);		
		text-align: left;
		padding: 10px;
		font-size: 24px;
		color: #EEB217;
	}
	#weathertips{		

	}
	.tipindex{
		font-size: 18px;
		color: #EEB217;
	}
	.tipitem{
		font-size: 16px;
		color: #330000;
	}
	#footer{
		width: 100%;
		height: 220px;
		border-radius: 15px;
		background:rgba(242,242,242,0.01);		
		text-align: center;			
		position:fixed; 
		left:0px; 
		bottom:0px; 
	}
	</style>
	<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=hupWCRW9pUS1mjqYheUDlDgEqbAmlSMW&callback"></script>
	<title>JSONP请求天气信息</title>
</head>
<body>
	<div id="mainbody">
		<div id="weather">
			<div id="navi">您所在的城市天气情况</div>
			<div  style="width: auto; height: 800px;">
				<div id="weathercontent">
					<div id="weathercity" style="height: 50px;margin-bottom: 20px;color: #33A0E8;"></div>
					<div id="weatherdate"></div>
					<div id="weatherimg" style="width: auto; height:auto;">
						<div style="margin-left: 30px; width: 150px;margin-bottom: 20px; float: left;">
							<div style="font-size: 18px;margin: 15px; color: #330000;" >白天</div>
							<img id="dayimg" width="128px" height="128px" style="opacity:0.6;border-radius: 15px;"></img>
						</div>
						<div style="right: 30px;margin-bottom: 20px;padding-top: 1px;">
							<div style="font-size: 18px;margin: 15px; color: #330000;" >夜晚</div>
							<img id="nightimg" width="128px" height="128px" style="opacity:0.6;border-radius: 15px;"></img>
						</div>
					</div>
					<div id="weatherinfo">
						<span></span>
						<span></span>
						<span></span>
						<span></span>
					</div>
				</div>
				<div id="weathertipid">
					<div id="weathertips">
						<div style="height: 50px;margin-bottom: 20px; text-align: center; color: #33A0E8;">温馨提示</div>
						<div>
						<span class="tipindex">穿衣指数：</span>
						<p class="tipitem"></p>
					</div>
					<div>
						<span class="tipindex">洗车指数：</span>
						<p class="tipitem"></p>
					</div>
					<div>
						<span class="tipindex">感冒指数：</span>
						<p class="tipitem"></p>
					</div>
					<div>
						<span class="tipindex">运动指数：</span>
						<p class="tipitem"></p>
					</div>
					<div>
						<span class="tipindex">紫外线强度指数：</span>
						<p class="tipitem"></p>
					</div>
					</div>
				</div>
			</div>
		</div>
		<div id ="footer">
			<div>
				<img src="hongbao.png" width="150px" height="180px"  style="padding-left: 100px">更多精彩</img>
			</div>
			<div>
				<a href="https://blog.youkuaiyun.com/dosthing/" style="color: #EEB217; font-size: 20px; margin-right: 50px">优快云 博客</a>
				<a href="https://github.com/dosthing/" style="color: #EEB217; font-size: 20px; margin-left: 50px;">Github </a>
			</div>
		</div>	
	</div>
	<script type="text/javascript">
		//用百度地图API获得当前所在城市
		var map = new BMap.Map('map');
		var myCity = new BMap.LocalCity();
		var localcity;
		myCity.get(getcityname); //使用API取得当前城市名
		function getcityname(result){
			var url = 'https://api.map.baidu.com/telematics/v3/weather?&ak=hupWCRW9pUS1mjqYheUDlDgEqbAmlSMW&output=json&callback=callbackfun&location='; 		
			localcity = result.name.replace('市', '');
			url = url + encodeURI(localcity);
			jsonp(url);				
		}
		
		//jsonp请求接口，并处理相应内容
		function jsonp(url){
			var script = document.createElement('script');
			script.src = url;
			document.body.append(script);
			document.body.removeChild(script);
		}
		function callbackfun(response){
			//处理jsonp跨域请求返回的结果
			var doc = document;			
			//console.log(response);
			//console.log(response.results[0].currentCity);
			//console.log(response.results[0].weather_data[0].date);
			doc.getElementById('weathercity').innerHTML = response.results[0].currentCity + '市';
			doc.getElementById('weatherdate').innerHTML = response.results[0].weather_data[0].date;
			var span = doc.getElementById('weatherinfo').getElementsByTagName('span');
			var p = doc.getElementsByTagName('p');
			var result = response.results[0].index;
			var today = response.results[0].weather_data[1];
			var daypic = doc.getElementById('dayimg');
			daypic.src = today.dayPictureUrl;
			var nightpic = doc.getElementById('nightimg');
			nightpic.src = today.nightPictureUrl;
			//console.log(today);
			var i = 0;
			for (var index in result){
				for (var item in result[index]){
					if (item == 'des'){
						p[i].innerHTML = result[index][item];
						console.log(result[index][item]);
						i++;
					}
				}
			}
			span[0].innerHTML = today.weather;
			span[1].innerHTML = today.wind;
			span[2].innerHTML = today.temperature;
			span[3] = response.results[0].pm25;			
		}
	</script>
</body>
</html>

总结

JSONP的应用拓宽了前端请求的能力，合理利用JSONP，可以是我们的应用内容更加精彩，尽管JSONP优势众多，但是还是应该合理引用，因为过多引用外部的API很难保证API提供商的服务器畅通无阻，从而影响页面加载效果，欢迎访问我的GitHub学习交流。

html通过 ajax jsonp跨域请求接收和传送数据
11-23
**AJAX和JSONP跨域请求的实现过程** 1. **AJAX跨域**: 通常，AJAX请求受到同源策略限制。为实现跨域，我们可以使用CORS（Cross-Origin Resource Sharing）机制。服务器需要在响应头中添加`Access-Control-Allow-...
jsonp跨域请求实现示例
10-20
JSONP（JSON with Padding）是一种解决跨域请求的方法，主要用于解决不同域之间因浏览器同源策略限制而无法进行AJAX请求的问题。在AJAX请求中，浏览器的同源策略限制了与当前页面不同域的服务器进行数据交互，而...
Ajax - 跨域 dataType: ‘jsonp‘
Henry_ID的博客
09-07 1487
1.跨域体验 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> &
select2关于ajax请求 dataType为 jsonp
Json_Marz的博客
04-20 418
我最近做的项目用到select2插件，项目中请求ajax的dataType必须为jsonp。我百度select2 ajax都是dataType为json的例子，还有说用jsonp需要配置apikey，还没研究？？？ 我第一反应是去select2官网去找，很遗憾也没有说明，后来去[select2](http://select2.github.io/select2/)的github上找，终于找到一个关...
jsonp详解
12-11 605
json相信大家都用的多，jsonp我就一直没有机会用到，但也经常看到，只知道是“用来跨域的”，一直不知道具体是个什么东西。今天总算搞明白了。下面一步步来搞清楚jsonp是个什么玩意。 同源策略 首先基于安全的原因，浏览器是存在同源策略这个机制的，同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。看起来不知道什么意思，实践一下就知道了。 1.随便建两个网页 ...
ajax中datatype的json和jsonp
滴水石穿
10-21 5267
前言： 说到AJAX就会不可避免的面临两个问题，第一个是AJAX以何种格式来交换数据？第二个是跨域的需求如何解决？这两个问题目前都有不同的解决方案，比如数据可以用自定义字符串或者用XML来描述，跨域可以通过服务器端代理来解决。 但到目前为止最被推崇或者说首选的方案还是用JSON来传数据，靠JSONP来跨域。而这就是本文将要讲述的内容。 JSON和JSONP虽然只有一个字母的差...
轻松搞定jQuery+JSONP跨域请求的解决方案
10-18
需要注意的是，虽然JSONP提供了一种灵活的跨域请求解决方案，但它也有一些局限性和安全风险。例如，JSONP允许执行任意的JavaScript代码，如果服务器端的输出没有经过严格验证和清洗，可能会导致跨站脚本攻击（XSS）...
轻松搞定JSONP跨域请求
热门推荐
诗渊的博客
07-26 8万+
本文介绍了通过JSONP实现跨域请求，首先介绍了“同源策略”，然后介绍了同构JavaScript动态加载script标签的方法，实现JSONP跨域，最后介绍了jQuery中对JSONP的封装和使用
JSONP原理及简单实现
11-22
在web2.0时代，熟练的使用ajax是每个前端攻城师必备的技能。然而由于受到浏览器的限制，ajax不允许跨域通信。 JSONP就是目前主流的实现跨域通信的解决方案。 虽然在在jquery中，我们可以通过$.ajax的dataType设置为jsonp来调用jsonp，但是jsonp和ajax的实现原理一个关系都木有。jsonp主要是通过script可以链接远程url来实现跨域请求的。如： [removed][removed] callback定义了一个函数名，而远程服务端通过调用指定的函数并传入参数来实现传递参数。 搜索了网
跨域提示无法接受，最后发现是datatype:’jsonp’格式有问题
咸鱼夏天的博客
05-04 6163
跨域本以为都要加jsonp，但是这里api的格式已经是json格式所以把datatype
什么是jsonp格式
feixiangyinghuo的专栏
11-12 1615
本文导读：Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”，可以让网页从别的网域获取资料。 json相信大家都用的多，jsonp也经常看到，其功能主要是 “用来跨域的” 1. JSONP定义     JSONP是英文JSON with Padding的缩写，是一个非官方的协议。它允许在服务器端生成script tags返回至客户端，
jQuery ajax 跨域请求：当  dataType : "jsonp"跨域请求时，type只能为"GET"请求
滴水石穿
08-26 3933
运用ajax跨域请求来获得服务器端返回的数据。 当做到添加信息时，POST请求传递数据时，结果卡住了 。代码： var str_data=JSON.parse("{"+$("#addform .form-control").map(function(){ return ("\""+$(this).attr("name")+'\":\"'+$(this)....
JSONP解决跨域数据访问问题
只写有用的笔记
06-09 3711
JSONP (JSON with Padding)是JSON 的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。
jQuery中的JSONP
annier_11的博客
09-05 387
3.6 jQuery中的JSONP jQuery 的$.ajax() 方法当中集成了JSONP的实现，可以非常方便的实现跨域数据的访问。 dataType:’jsonp’ 设置dataType值为jsonp即开启跨域访问 jsonp 可以指定服务端接收的参数的“key”值，默认为callback jsonpCallback 可以指定相应的回调函数，默认自动生成...
Ajax基础：发送jsonp请求（jsonp、jsonCallback）
昔冰_G的博客
10-01 1万+
jsonp走的是get请求方式，也就是ajax的默认请求方式； ajax方法中也涵盖了jsonp请求，可以通过ajax方法来发送jsonp请求； <!--客户端代码--> <body> <button id="btn">发送jsonp请求</button> <script src="js/jquery-3.5.1.min.js"></script> <script> $('#bt
jQuery jsonp跨域请求
houbin0912的博客
09-09 317
jQuery jsonp跨域请求 跨域的安全限制都是对浏览器端来说的，服务器端是不存在跨域安全限制的。 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。 如果协议，端口和主机对于两个页面是相同的，则两个页面具有相同的源，否则就是不同源的。 如果要在js里发起跨域请求，则要进行一些特殊处理了。或者，你可以把请求发到自己的服务端，再通过后台代码发起请求，再将数据返回前端。 这里讲下使用jquery的jsonp如何发起跨域请求及其原理。 先看下准备环境：两个...
jsonp跨域请求资源报错
weixin_44585148的博客
09-13 518
错误： 原因： 请求资源服务器返回的是json对象，非jsonp格式数据。 dataType:'jsonp'设置请求跨域资源，返回 jsonp格式数据。跨域的本质就是服务器返回一个方法调用，jsonp格式应该类似callback ( { json:obj} ); 总之，如果服务器返回的不是一个方法调用，jsonp格式的跨域请求就会报错。 解决： 前端代码受到同源策略限制，但如 .php，.jsp等后端代码...
jsonp 跨域请求
最新发布
04-18
### JSONP 跨域请求实现方法及原理 JSONP（JSON with Padding）是一种通过 `<script>` 标签的 `src` 属性来绕过浏览器同源策略限制的方法，从而实现在不同域名之间传输数据的功能。其核心思想是利用 `<script>` 标签可以加载外部资源且不受同源策略约束这一特性。 #### 原理说明 当客户端发起一个跨域请求时，由于 XMLHttpRequest 受限于同源策略无法直接访问其他域上的资源，而 `<script>` 标签则可以通过设置 `src` 属性自由加载来自任何域名下的 JavaScript 文件。因此，在 JSONP 中，客户端会在页面中动态创建一个 `<script>` 标签，并将其指向目标服务器的一个 URL 地址，同时附加一个回调函数名称作为查询参数[^1]。服务器接收到此请求后，会返回一段以指定回调函数包裹的数据形式的 JavaScript 代码。这段代码会被立即执行，进而调用预先定义好的回调函数并将所需数据传递进去[^2]。 #### 实现过程详解 以下是具体的操作流程： 1. **客户端准备阶段** 客户端先定义好用于接收响应数据的全局回调函数。 ```javascript function handleResponse(data) { console.log('Received data:', data); } ``` 2. **构建并插入 script 元素** 动态生成一个新的 `<script>` 元素，设定其 `src` 属性为目标接口地址加上必要的查询字符串（通常包含 callback 参数），最后将该元素添加至 DOM 结构中的合适位置（如 body 的子节点列表末端）。 ```javascript var script = document.createElement('script'); script.src = 'https://example.com/api?callback=handleResponse'; document.body.appendChild(script); ``` 3. **服务端配合处理** 当服务器接获带有特定 callback 名称字段的 HTTP 请求之后，应该按照约定格式构造回应内容——即将实际业务逻辑所产生的结果序列化成合法 JSON 字符串后再嵌套进由前述 callback 所指示的那个函数体内形成最终输出文本流送回前端展示层面上去渲染呈现出来供后续操作使用[^4]。 ```javascript // Example server-side pseudo-code (Node.js/Express-like syntax) app.get('/api', (req, res) => { const data = { key: 'value' }; const jsonResponse = JSON.stringify(data); const callbackFunctionName = req.query.callback || 'jsonpCallback'; res.send(`${callbackFunctionName}(${jsonResponse})`); }); ``` 以上便是整个基于 JSONP 技术完成的一次典型跨域交互全过程描述总结概述完毕如下所示[^3]。 ```javascript // Client Side Code Summary function jsonpRequest(url, callbackName){ let scriptTag=document.createElement("script"); window[callbackName]=function(responseData){console.log(responseData);delete window[callbackName];}; scriptTag.src=`${url}&callback=${callbackName}`; document.head.append(scriptTag); } ``` ### 注意事项 尽管 JSONP 提供了一种简单有效的解决方案来进行跨域通信，但它也存在一些固有的缺陷需要注意： - **安全性隐患**: 因为它依赖注入任意第三方站点提供的脚本来运行环境当中所以可能存在恶意代码攻击风险； - **仅支持 GET 方法**: 不允许像常规 AJAX 那样灵活运用多种类型的 HTTP Method 如 POST PUT DELETE 等等[^2].
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值