今天去面试,被问起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对象,那么很显然。页面的执行结果就是:这是回调函数,返回数据为返回值
另:附图一张