初见Jsonp

最新推荐文章于 2024-10-24 09:55:22 发布

刘无心

最新推荐文章于 2024-10-24 09:55:22 发布

阅读量178

点赞数

CC 4.0 BY-SA版权

分类专栏：前端JS 文章标签： jsonp

本文链接：https://blog.youkuaiyun.com/lyhyly/article/details/79029257

前端JS 专栏收录该内容

2 篇文章

订阅专栏

今天去面试，被问起jsonp。被赫狗实力带了一波节奏，走远了，扯到了什么靠image标签，什么js插件来实现。回来想想死的心都有。索性今天回来查了查关于jsonp原理以及其具体用法。

什么是jsonp呢？（至于什么是json请点击这里）姑且先斗胆下个定义，jsonp并不是官方规范，而是一种体制下的变通，一种民间规范。而且和json也本就不是一回事。jsonp是基于<srcipt>标签的资源请求可以跨域的特性，实现绕过ajax无法跨域的的限制，实现跨域获取json数据的目的。

具体实现方式如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script>
			callback : function(data){
				alert('这是回调函数,返回数据为'+data.msg);
			}
		</script>
		<!--  
			假设此处返回的是一个文件内容是这样的js文件
			callback({msg:"返回值"});
		-->
		<script src="跨域请求地址" type="text/javascript"></script>
		<title></title>
	</head>
	<body>
	</body>
</html>

让我们分析一下执行过程：

页面加载后

		<script>
			callback : function(data){
				alert('这是回调函数,返回数据为'+data.msg);
			}
		</script>

这个json对象被定义，也就是说，此时存在了一个函数名为callback的函数。接下来：

<script src="跨域请求地址" type="text/javascript"></script>

这个资源被请求，然后直接执行，那么执行的是什么呢？调用了一个叫做callback的函数，那么这个函数是什么呢？

callback : function(data){
	alert('这是回调函数,返回数据为'+data.msg);
}

是不是这个函数，那么他的参数，对应一下服务器返回的资源。这个方法被调用时，他的形参data被赋予的值就是{msg:"返回值"}这个json对象，那么很显然。页面的执行结果就是：这是回调函数，返回数据为返回值

另：附图一张