码迷,mamicode.com
首页 > Web开发 > 详细

关于JSONP的一些易忽略的细节

时间:2016-02-13 01:34:37      阅读:288      评论:0      收藏:0      [点我收藏+]

标签:

本人前端渣渣,本文记录的是开始自学时,我自己容易混淆和忽略的细节。。。

 

1-JSONP,javascript object notation with padding,翻译成中文就是“参数式JSON”、“填充式JSON”。有没有霍然开朗?好多书里翻译成“有填充的JSON”,意思正好相反,害人不浅。

 

2-JSONP本质就是一个前后端商量好的协议,至今没有被W3C官方认可,但确是当今最流行的跨域手段。W3C官方认可的是CORS。

 

3-JSONP的原理只有两点:一、动态建立script标签实现异步。二、利用src属性实现跨域。ajax尚且可以实现同步(虽然几乎没有适用场景),但JSONP只能实现异步,因为依据动态建立script标签这一点,使得JSONP想同步都不行。比如下面这段代码:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5 </head>
 6 <body>
 7     <script type="text/javascript">
 8         var scn = document.createElement(‘script‘);
 9         scn.src = ‘a.js‘;
10         document.getElementsByTagName(‘head‘)[0].appendChild(scn);
11         alert(‘b‘);
12     </script>
13 </body>
14 </html>
alert(‘a‘);//a.js

结果先弹出b,在弹出a。加不加async属性都一样。

结论就是:动态添加进去的script标签,无论指定什么,都是异步的,指定同步异步的功能(比如defer/async属性)只对写死到HTML里的标签有效。

依据src属性的在设计之初压根也没有跨域与否的概念,JSONP也可以实现同步。简而言之,JSONP可以用来实现异步跨域、异步同域两种情况。

 

4-在jQuery里,JSONP被封装在了AJAX中。这一度给刚接触AJAX和JSONP的我带来一个困惑的认识:JSONP是AJAX的子集。当然,这样的认识是错误的。JSONP只是用来弥补AJAX中无法异步跨域的不足,并不是子集。

关于JSONP的一些易忽略的细节

标签:

原文地址:http://www.cnblogs.com/butcherv/p/5187401.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!