使用jsonp处理ajax跨域方法

什么是跨域这里就不再解释了，想必跨域问题在日常工作中遇到的也不少，jQuery的ajax给出了很好的解决方案，跨域请使用JSONP，那么有人会问了，什么是JSONP呢？

我们来看一段网上duang的介绍~

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。

ok，实际上JSONP只是一种解决方案，并非新的数据格式，其数据格式和JSON基本一样。

ajax使用JSONP的方法，代码如下：

$.ajax({
    type:"GET",
    url:'http://www.sucaijiayuan.com/jsonp.php',    
    data:{key:value},
    dataType:'jsonp',
    jsonp:'callback',
    jsonpCallback:"?"
    success:function(data){
        console.log(data);
    }
});

其中部分参数大家可能会有些陌生，咱们依次来解释一下。

jsonp:'callback'     规定传给后端的参数名，可以省略，默认值是 callback

jsonpCallback:"yourcallbackname"  规定后端输出数据外层包裹的名称，可以省略，默认值是jquery自动生成的一段以jquery开头的字符串

比如：后端返回普通json格式为：{site:"素材家园",url:"http://www.sucaijiayuan.com"}，那么jsonp应该返回的数据必须是：jsonpCallback({site:"素材家园",url:"http://www.sucaijiayuan.com"})，这里的jsonpCallback就是ajax参数里面设置的jsonpCallback的值。如果后端返回的数据格式非这种格式时，虽然请求里面会有显示返回数据，但是ajax不执行success方法，这一点需要重点注意。

jsonp不支持post请求，就算设置type为post，jquery也会自动转化成get方法。

一段正常的jsonp请求应该是这种形式：http://www.sucaijiayuan.com/json.php?callback=yourcallbackname

这里的callback为ajax里面设置的jsonp的值，yourcallbackname为ajax里面设置的jsonpCallback的值

后端代码稍后补上~~~