来吧,聊一下JSONP跨域

2017-02-19  本文已影响0人  Yuxin_Liu

【学习了,但是宝宝并没用过系列】

因为那个很好用的Ajax,或者说是XMLHttpRequest是不允许跨域的,所以就有了接下来的一系列东西。

JSONP,of cource it should be layed out first….
So what is JSONP? json with padding , 是JSON的一种使用方式:把JSON包在函数里面来使用:callback({“name”:”Finedy”});

<script type="text/javascript"> 
      function dosomething(jsondata){ //处理获得的json数据 }
</script>
<script src="http://example.com/data.php?callback=dosomething"></script>

firstly ,we have to know that 数据拿到自己这儿,而服务器在外面,

优点
兼容性好,

局限性
只支持HTTP的get,post和其他方式都不行。

怎么用
创建script在head里,

script = document.createElement('script');
script.src = 'http://example.com/cgi-bin/jsonp?q=What+is+the+meaning+of+life%3F'; 
script.id = 'JSONP'; 
script.type = 'text/javascript'; 
script.charset = 'utf-8'; 
// Add the script to the head, upon which it will load and execute. 
var head = document.getElementsByTagName('head')[0]; head.appendChild(script);

(但其实这里head.appendChild是有风险的,因为如果在IE6的head里面有base节点,那么后续的remove工作会报"Invalid argument”的error),所以最稳妥的方式是用insert来在第一个子节点之前插入:replace

head.appendChild( script );
with
head.insertBefore( script, head.firstChild );

当然如果你很懒,不想使用原生JS,jquery会为你省掉很多力气:

var script; 
while (script = document.getElementById('JSONP')) {
     script.parentNode.removeChild(script); 
}

只删掉script是不够的,必须要把里面所有属性也删掉。(因为DOM和JS有不同的垃圾回收算法。)

<script type="text/javascript">    
       $.getJSON('http://example.com/data.php?callback=?,function(jsondata)'){ 
      //处理获得的json数据 });
</script>

jquery会自动生成一个全局函数来替换callback=?
中的问号,之后获取到数据后又会自动销毁,实际上就是起一个临时代理函数的作用。
$.getJSON方法会自动判断是否跨域,不跨域的话,就调用普通的ajax方法;跨域的话,则会以异步加载js文件的形式来调用jsonp的回调函数。

因为jquery首先会判断是否跨域了,如果没有,那么直接ajax;如果有,那就进行跨域处理。

var script; 
while (script = document.getElementById('JSONP')) {     
      script.parentNode.removeChild(script); 
      // Browsers won't garbage collect this object. 
      // So castrate it to avoid a major memory leak.
       for (var prop in script) { 
            delete script[prop]; 
      }
}

然后每次删掉所有属性其实是没有必要的,只要每次改变它的src就可以了。

上一篇下一篇

猜你喜欢

热点阅读