Jsonp简单原理
先上一段使用原生js编写的jsonp
<script>
var script = document.createElement('script');
script.type = 'text/javascript';
// 传参并指定回调执行函数为onBack
script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);
// 回调执行函数
function onBack(res) {
alert(JSON.stringify(res));
}
</script>像上面代码中请求的地址一般会返回如 onBack(...一段json...) 的数据。
如果执行包含以上代码的html页面，js会在head标签里创建一段script代码，如下所示
<script type="text/javascript" src="http://www.domain2.com:8080/login?user=admin&callback=onBack"></script>
基本上这就是完整的jsonp的写法。这其中最关键地方就是理解head中追加的script做了什么事情（或者说<script type="text/javascript" src="..."></srcipt>做了说）。
为了方便理解，我举个例子。现在我有一个文件 script.log, 并且里面有一段js代码
alert("I'm javascript in log file")
然后在同级目录下我有一段html页面，代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="script.log"></script>
</head>
<body>
</body>
</html>在浏览器中打开这个html会有如下弹出框
到这里也就不难理解script标签的作用了。也就是说script请求src的链接(这里是log结尾的文件)，并将请求的结果以js的方式执行。而jsonp就是利用script标签不受同源策略的特性, 实行跨域请求，执行请求到的js代码
相关推荐
zmosquito 2020-05-10
somebodyoneday 2020-04-22
fengchao000 2020-04-22
fengchao000 2020-04-11
fengchao000 2020-03-05
xiaouncle 2020-02-13
fengchao000 2020-06-17
adonislu 2020-05-16
adonislu 2020-05-10
Richardxx 2020-03-07
somebodyoneday 2020-03-06
somebodyoneday 2020-02-16
baijinswpu 2020-01-29
fengchao000 2020-01-10
fengchao000 2019-12-25
newthon 2019-12-23
somebodyoneday 2013-07-11