深入浅出jsonp(跨域访问机制)

发布时间：2020-12-16 18:55:18 所属栏目：百科来源：网络整理

导读：# Jsonp初始 1.浏览器有安全同源策略（同协议，同域名，同端口），但是ajax请求的资源必须同源，故xhr对象实现不了跨域请求； 2.jsonp是利用html中script标签的src属性并不被同源策略所限制，可以获取任何服务器上的js脚本运行；以下代码是jsonp的一个原形

# Jsonp初始

1.浏览器有安全同源策略（同协议，同域名，同端口），但是ajax请求的资源必须同源，故xhr对象实现不了跨域请求；

2.jsonp是利用html中<script>标签的src属性并不被同源策略所限制，可以获取任何服务器上的js脚本运行；

以下代码是jsonp的一个原形：

本地index.html：

<!DOCTYPE html>
<html>
<head>
	<title>jsonp</title>
	<script type="text/javascript">
		function hundler(date){
			console.log(date.msg);
		}
	</script>
</head>
<body>
	<!-- user jsonp to achieve cross origin -->
	<!-- the file test.js in server wozien.com-->
	<script type="text/javascript" src="http://wozien.com/js/test.js"></script>
	<!-- 
		在服务器中返回要运行的js代码
	 -->
</body>
</html>

服务器上test.js

var obj = {
	msg: 'jsonp to cross origin'
};

hundler(obj);

运行index.html，在本地的console输出jsonp to cross origin，证明跨域请求*.js文件成功； <安利：wozien.com是我远程服务器，里面的js文件可以作为测试跨域请求的童鞋测试>。

# Jsonp服务的实现

1.jsonp的实质是加载不同服务器上的js代码放到本地浏览器运行，但是我们要加载的不是*.js文件怎么办？

可以在src传递一个本地的回掉函数名即可，告知服务器是本地哪个函数去执行response的东西，所以服务器返回的js代码可以写成：接受到的回掉函数名+'( '+请求的数据+' ) '

本地index.html代码：

<!DOCTYPE html>
<html>
<head>
	<title>jsonp</title>
	<script type="text/javascript">
		// request src
		function addScriptTag(src){
			var script = document.createElement('script');
			script.setAttribute('type','text/javascript');
			script.src = src;
			document.body.appendChild(script);
		}

		// function callback
		function hundler(date){
			console.log(date);
		}

		window.onload = function(){
			addScriptTag('http://wozien.com/php/jsonp.php?callback=hundler');
		}
	</script>
</head>
<body>
</body>
</html>

服务器上jsonp.php代码：

<?php
	$callback = $_GET['callback'];
	echo $callback.'('hello jsonp')';
?>

运行后在控制台输出hello jsonp。所以以上就是整个jsonp服务的大概流程，想要请求更加复杂的数据，可以得服务器中把数据封装在json中来交换即可。

抛出问题： jsonp能请求媒体资源吗，像images类似的。求大神回复下。