jquery及原生javascript对jsonp解决跨域问题实例详解

jquery方式

前端：

$.ajax({
url: 'http://m.xxx.tv/goLottery',
data: { data: data },
type: 'GET',
dataType: 'jsonp',
beforeSend: function() {
},
success: function(data) {
　　　　　　　　　//data格式不变，正常处理
}
})

后台（php）:

public function actionGoLottery(){
$result = '后台数据';
//正常处理
//echo $result;

//跨域请求处理
$jsonpCallback = $_GET['callback'];
echo $jsonpCallback.'({errno: 0, data: '. json_encode($result) .'})';
}

html变化：



　　利用script的src不受域名限制的特点，jquery在head内动态插入一个script标签，src指向我们要请求的接口，并带上了一个callback参数，callback值为jquery产生的一个随机字符串(也可以自定义)，在jsonp请求结束后，jquery立马删除了这个script标签。

服务器收到请求，拿到callback的函数名，然后把后台数据作为参数包在函数里面返回给前端，jquery拿到数据返回到success接口给我们处理

javascript方式处理jsonp

前端：

jsonpHandler = function(data){
handel(data);
}

setTimeout(function(){
var jsonp_path = url + "?callback=jsonpHandler";
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = jsonp_path;
　　//插入后开始请求url
document.getElementsByTagName('body')[0].appendChild(script);
},0)

后台处理一样，见上方jquery后台处理部分。

setTimeout（function(){},0）的作用是最后执行这段代码，确保插入动态script后，请求接口回来的回调函数（jsonpHandler ）可以找到，不会出现undefined的错误

具体原理，可以百度或google其他文章，这里只做点实例分析，希望辅助理解jsonp