JavaScript jsonp实现 跨域请求

Ajax只允许访问统一站点或域名下的url,但是有时我们需要跨域访问,获取我们需要的数据,jsonp因此诞生。

实例:JavaScript 跨域访问实例

看到jsonp我们就会联想到json,他们确实有点近亲的关系。jsonp也是一种数据的传输格式,与json不同的是,jsonp返回的是一个js的函数,并带有需要的参数,下面就简单介绍下jsonp实现跨域请求的原理。

 

JavaScript虽然不支持跨域访问,但是 html 标签的src 或者 href 却没有此限制,比如我们在 www.client.com 上面有一个 页面:

<img src="http://server.com/image/test.jpg">

其实这种方式很普遍,为了减轻网站服务器的压力,把很多图片、文件等静态的文件放到一个单独获多个的文件服务器上。

 

同样的道理,我们可以跨域引用js文件:

在A域名下有个页面:

<html>
	<head>
		<title>asp</title>
		<script type="text/javascript" src="http://localhost/jsonp/getData.js"></script>
		<script type="text/javascript">
			getData();
		</script>
	</head>

</html>

在B域下有个getData.js文件,并且有个getData()的函数:

function getData(){
	alert('我是被远程调用的')
}

接下来我们移转一下思维,比如

在A(作为客户端)域下创建一个页面,并且添加如下代码:

<html>
	<head>
		<title>client</title>
		
		<script type="text/javascript">
			function getData(data){
				console.log(data);
			};
		</script>
		<script type="text/javascript" src="http://www.B.com/jsonp/getData.php"></script>
	</head>
</html>

在B(服务端)域下创建一个getData.php页面,并加入下面的代码:

<?php
	
	echo 'getData({msg:"my name"})';	

?>

这时,当我们加载A(客户端)域下的页面时,就会加载B域的php页面,页面返回格式为:

getData(
    {msg:"my name"}
)

的字符串,但是这个字符串被包含在了A域的script下,相当于调用了A域页面中的 getData()方法,并传入了值,我们就会在控制台看到输出:{msg:”my name”}

剩下的就是对数据处理为我们想要的格式了。

现在我们应该就明白了跨域访问的原理了,当然可以做的更强大点,就是动态生成script的url获取我们想要的数据,然后调用客户端的回调函数,完成相应的操作

发表评论