Jsonp简单原理

前端之家收集整理的这篇文章主要介绍了Jsonp简单原理前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

先上一段使用原生js编写的jsonp

  1. <script>
  2. var script = document.createElement('script');
  3. script.type = 'text/javascript';
  4.  
  5. // 传参并指定回调执行函数为onBack
  6. script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
  7. document.head.appendChild(script);
  8.  
  9. // 回调执行函数
  10. function onBack(res) {
  11. alert(JSON.stringify(res));
  12. }
  13. </script>
像上面代码中请求的地址一般会返回如 onBack(...一段json...) 的数据。

如果执行包含以上代码的html页面,js会在head标签里创建一段script代码,如下所示

  1. <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代码

  1. alert("I'm javascript in log file")

然后在同级目录下我有一段html页面代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <Meta charset="UTF-8">
  6. <title>Document</title>
  7. <script type="text/javascript" src="script.log"></script>
  8. </head>
  9.  
  10. <body>
  11. </body>
  12.  
  13. </html>

在浏览器中打开这个html会有如下弹出框

到这里也就不难理解script标签的作用了。也就是说script请求src的链接(这里是log结尾的文件),并将请求的结果以js的方式执行。而jsonp就是利用script标签不受同源策略的特性,实行跨域请求,执行请求到的js代码

猜你在找的Json相关文章