JSONP原理及实现跨域方式

今天作页面时，后台给了个接口：https://a.a.com/a/a.json,我页面的上线地址是：http://b.b.com。
显而易见，由于浏览器同源策略的限制，经过ajax没法没法取得json的数据。

百度百科

同源策略，它是由Netscape提出的一个著名的安全策略。如今全部支JavaScript的浏览器都会使用这个策略。

所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这脚本是属于哪一个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。

同源策略限制了咱们没法经过原生的XMLHttpRequest()对象获取到json数据。为了突破这个限制，咱们的前辈们想出了一个解决方案：jsonp。

jsonp并不是新的数据格式，而是解决JSON跨域获取的解决方案。经过JSONP获取到得数据已经不是JSON了，而是JS类型的数据（大部分是对象）。

上网找过不少讲jsonp的文章，大部分都是讲的模模糊糊的。jsonp的原理其实不复杂：

一、浏览器的同源策略把跨域请求都禁止了；
   二、HTML的<script>标签是例外，能够突破同源策略从其余来源获取数据；
   三、由上可得，咱们能够经过<script>标签引入jsonp文件，而后经过一系列JS操做获取数据。

上面三点即是JSONP实现跨域的原理。

原理咱们知道了，该怎么实现这些操做呢？
接下来轮到jQuery登场！JQ已经帮咱们封装好了
demo:

$.ajax({
            dataType:'jsonp',
            jsonp:'jsonp_callback',
            url:'http://www.baidu.com/xxx.jsonp',
            success:function(){
                //dosomthing
            }
        });

原生JS demo：

function( url ) jsonHandle{
        var script = document.createElement("script");
        script.setAttribute("src",url);
        document.getElementsByTagName("body")[0].appendChild(script);
    }
    //JS插入以后就能够处理数据了