利用JSONP解决AJAX跨域问题的原理

受同源策略的影响，页面中的javascript无法访问其他页面的数据。

URL	说明	允许通信
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	允许
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不同文件夹	允许
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不同端口	不允许
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不同协议	不允许
http://www.a.com/a.js http://127.0.0.100/b.js	域名和域名对应ip	不允许
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不同	不允许
http://www.a.com/a.js http://a.com/b.js	同一域名，不同二级域名（同上）	不允许
http://www.a.com/a.js http://www.b.com/b.js	不同域名	不允许

1 使用jsonp

json是一种轻量级的数据交换格式，jsonp(json with padding)这是json的一种“使用模式”，通过使用这种模式可以实现数据的跨域获取

举个例子，假如需要从服务器（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：  

1 原生通过json获取数据

 <script type="text/javascript">
	    var flightHandler = function(data){
	        alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
	    };
	    
	    var url = "http://abc.com:8080/AjaxCrossDomain/data/data.jsp?code=CA1998&callback=flightHandler";
	   
	    var script = document.createElement('script');
	    script.setAttribute('src', url);
	    
	    document.getElementsByTagName('head')[0].appendChild(script); 
 </script>

2

在jQuery中如何通过JSONP来跨域获取数据

第一种方法是在ajax函数中设置dataType为'jsonp'：  

   
 
 
$.ajax({
        dataType: 'jsonp',
        url: 'http://www.a.com/user?id=123',
        success: function(data){
                //处理data数据
        }
});

第二种方法是利用getJSON来实现，只要在地址中加上callback=?参数即可：  

   
 
 
$.getJSON('http://www.a.com/user?id=123&callback=?', function(data){
        //处理data数据
});

也可以简单地使用getScript方法：

   
 
 
//此时也可以在函数外定义foo方法
function foo(data){
        //处理data数据
}
$.getJSON('http://www.a.com/user?id=123&callback=foo');