跨域是指从一个域名的网页去请求另一个域名的资源。比如从百度页面去请求google 的资源。
跨域的严格一点的定义是:只要 协议,域名,端口有任何一个的不同,就被当作是跨域。
jsonp跨域原理详细可见该文章: http://kb.cnblogs.com/page/139725/
此问题详解可见该文章:http://blog.csdn.net/wqmain/article/details/8905287
1. 使用jquery 解决跨域
下面说下使用 $.ajax 跨域返回json数据后出现的问题
$(document).ready(function () {
$('button').click(function () {
$.ajax({
type: 'get',
url: "http://localhost:8080/customer/ajax.action",
async: false,
data: {'id': 16},
dataType: "jsonp",
jsonp: 'callback',
jsonpCallback: "fun",
// 未解析前的json字符串,包括方法名
dataFilter:function(json){
console.log(json);
return json;
},
success: function (json) {
console.log(json);
},
error: function () {
console.log("错误")
}
})
})
});
本质上是jquery 生成script脚本:
<script src="http://localhost:8080/customer/ajax.action?id=16&callback=fun" ></script>
向服务器发起请求,但是当服务器返回json 格式的数据时,例如
{
'name':'ethan',
'age':12
}
浏览器显示错误:Uncaught SyntaxError: Unexpected token :, 纠结了很久,查资料之后发现,和原生的jsonp 原理一样, 返回的json数据 需要包含在方法中,即通过方法调用传回才可以
本例中服务器返回的数据格式应为:
fun( {
'name':'ethan',
'age':12
} )
2. 使用 jquery-jsonp 插件跨域
服务器返回字符串格式同上
下载链接: https://github.com/jaubourg/jquery-jsonp/downloads
<script src="jquery.jsonp-2.4.0.min.js"></script>
<script>
$(document).ready(function () {
$('button').click(function () {
$.jsonp({
url: "http://localhost:8080/customer/jsonp.action",
async: false,
data: {'id': 16},
callbackParameter:'callback',
// 已经是解析成功后的json数据
dataFilter:function(json){
console.log(json.cust_name);
json.cust_name='修改后的name';
return json;
},
success: function (json) {
console.log(json);
},
error: function () {
console.log("错误")
}
})
})
});
</script>