摘要: 简单的说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果
什么是跨域
简单的说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果
什么是JSONP?
JSONP的应用
JSONP跨域的原理
举个例子,假如需要从服务器(http://www.a.com/user?id=123)获取的数据如下:
{"id": 123, "name" : 张三, "age": 17}
那么,使用JSONP方式请求(http://www.a.com/user?id=123?callback=foo)的数据将会是如下:
foo({"id": 123, "name" : 张三, "age": 17});
try{foo({"id": 123, "name" : 张三, "age": 17});}catch(e){}
这时候我们只要定义一个foo()函数,并动态地创建一个script标签,使其的src属性为http://www.a.com/user?id=123?callback=foo
function executeJsonp(url){
var eleScript= document.createElement("script");
eleScript.type = "text/javascript";
eleScript.src = url;
document.getElementsByTagName("head")[0].appendChild(eleScript);
}
function foo(data){
for(var p in data){
console.log(data[p]);
}
}
var url = "http://www.a.com/user?id=123?callback=foo";
executeJsonp(url)
在jQuery中如何通过JSONP来跨域获取数据
第一种方法是在ajax函数中设置dataType为'jsonp':
$.ajax({
type:"get",
data:"random="+Math.random(),
url:url,
dataType:"jsonp",
jsonp:"callback",
success:function(data){ //处理data数据
$.each(data, function(key, val) {
$("#myDiv").html($("#myDiv").html()+val.cvalue+"</br>");
});
}
});
第二种方法是利用getJSON来实现,只要在地址中加上callback=?参数即可:
jQuery.getJSON("http://search.twitter.com/search.json?callback=?",{
q: "Arsenal"
},function(tweets) {
console.info("Twitter returned: ",tweets);
});
//此时也可以在函数外定义foo方法
function foo(data){}//处理data数据
$.getScript('http://www.a.com/user?id=123&callback=foo');