跨域请求—JSONP实现跨域

Jsonp是实现跨域GET请求的最常用的方法，简单有效地实现了不用域之间的数据交换。最常用来解决普通Ajax请求不能跨域访问的情况。

什么是JSONP

Src跨域能力

在HTML页面使用img，script，iframe等有src属性的标签时，从来没有考虑过资源url的跨域问题。

例如：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

不用下载jquery文件，就可以直接使用jquery代码。

<img src="http://img5.duitang.com/uploads/item/201410/29/20141029141406_vNGSx.thumb.700_0.jpeg" width="128" height="128" />

图片也能够直接加载。

Jsonp

利用script的src跨域能力，将需要跨域请求的数据通过src的url请求到的JS类型文件传递过来，请求的数据仍以我们最常用的JSON数据。

对于数据的处理通过在客户端定义一个callback函数进行数据的处理，并将这个callback函数名作为url参数传递给服务端，服务端将在返回的JS文件中实现调用callback函数，并以JSON数据对象作为callback函数实例的参数，这样在客户端获取到JS文件之后会执行callback函数。

这种获取数据的方式就是JSONP。

JSONP的实现

通过动态生成script，并将callback函数名作为src请求的参数传递给服务端。

var callBack= function(data){
        alert(data);
    };
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "url?callback=callBack";
document.getElementsByTagName('head')[0].appendChild(script);

动态script添加成功之后，服务端收到url请求，接收到参数callback=callBack，就会将要返回的JSON数据作为callBak函数的参数，执行调用callBak。

callBack({/*json data*/})

客户端收到返回的JS文件，执行其中代码，执行callBack({/json data/})实例，由于callBack函数在之前已经定义，因此callBack({/json data/})实例将会执行相应数据处理。就完成了Jsonp的跨域数据请求。

jQuery 实现Jsonp跨域

$.ajax({
         type: "GET",
         url: "url",
         dataType: "jsonp",
         jsonp: "callback",
         success: function(data){
         /*处理数据*/
         },
         error: function(){
         }
});

也可以通过jsonpCallback传递函数名，默认情况下jQuery会自动生成一个随机函数名，并将返回的数据通过success函数来处理。

JSONP实现跨域请求的方式核心是根据script的src跨域能力，而AJAX是通过XmlHttpRequest。两者已有本质上区别，不过JSONP确是实现跨域的有效方法。