关于JSONP的一些易忽略的细节
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于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的一些易忽略的细节的主要内容，如果未能解决你的问题，请参考以下文章