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

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

 

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的一些易忽略的细节)