为什么会出这样的错误呢?这是因为所有支持Javascript的浏览器都会使用同源策略这个安全策略。看看百度的解释:
同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当一个百度浏览器执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。
这就是引起为何取不到数据的原因了,那如何才能解决跨域的问题呢?没错,我们现在可以进入正题,来了解下什么是JSONP了。
JSON和JSONP
JSONP和JSON好像啊,他们之间有什么联系吗?
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。对于JSON大家应该是很了解了吧,不是很清楚的朋友可以去json.org上了解下,简单易懂。
JSONP是JSON with Padding的略称。它是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。--来源百度
JSONP就像是JSON+Padding一样(Padding这里我们理解为填充), 我们先看下面的小例子然后再详细介绍。
前途调用代码:
function submitForm (){
$.getJson("http://localhost:7001/WebRoot/checkcode?callback=?",function(data){
alert(data.name + " is a a" + data.sex);
})
}
后台代码:后台java类需要继承HttpServlet
public void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//获取回调函数名
String callback = request.getParameter("callback");
//json数据
String json = "{\"name\":\"chopper\",\"sex\":\"man\"}";
response.setContentType("application/json");
response.getWriter().print(callback + "("+json+")");
}
如果需要自定返回处理函数: 使用$.ajax
$.ajax({
url:"http://localhost:7001/WebRoot/checkcode?callback=?",
dataType:"jsonp",
jsonpCallback:"person",
success:function(data){
//alert("0000");
}
});
//回调函数person
function person(data) {
alert(data);
}
详见:http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/