1、同源策略
瀏覽器有一個很重要的概念——同源策略(Same-Origin Policy)。所謂同源是指,域名,協議,端口相同。不同源的客戶端腳本(javascript、ActionScript)在沒明確授權的情況下,不能讀寫對方的資源。
2、JSONP
JSONP(JSON with Padding)是JSON的一種”使用模式”,可用於解決主流瀏覽器的跨域數據訪問的問題。由於同源策略,一般來說位於 server1.example.com 的網頁無法與不是 server1.example.com的服務器溝通,而 HTML 的script 元素是一個例外。利用
3、具體實現
那下面我們來看看jquery 是怎麼處理跨域請求的,不多說,直接貼代碼,先看個詳細版的:
<script type="text/javascript">
function getResult(data){
alert("through jsonp,receive data from other domain : "+data.result);
}
function jsonp_fun(){
$.ajax({
url:'http://localhost:8888/other/other.jsp',
type:'post',
data:{'params':'fromjsonp'},
dataType: "jsonp",
jsonp: "callback",//傳遞給請求處理程序或頁面的,用以獲得jsonp回調函數名的參數名(一般默認爲:callback)
jsonpCallback:"getResult",//自定義的jsonp回調函數名稱,默認爲jQuery自動生成的隨機函數名,也可以不寫這個參數,jQuery會自動爲你處理數據
success: function(data){
},
error: function(){
alert('fail');
}
});
}
</script>
<body>
<input type="button" value="jsonp" onclick="jsonp_fun()"/>
</body>
這裏的jsonCallback,回調函數設置爲getResult,那麼返回後會先調用getResult函數中的代碼,再調用success函數中的代碼,一般情況下,不用定義getResult函數,同樣jsonCallback不需要設置,那麼就只執行success中的代碼,也就跟平時的ajax一樣用。
下面我們來看看正式的工作實現:
function jsonp_fun(){
$.ajax({
url:'http://localhost:8888/other/other.jsp',
type:'post',
data:{'params':'fromjsonp'},
dataType: "jsonp",
jsonp: "callback",//傳遞給請求處理程序或頁面的,用以獲得jsonp回調函數名的參數名(一般默認爲:callback)
success: function(data){
alert("through jsonp,receive data from other domain : "+data.result);
},
error: function(){
alert('fail');
}
});
}
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String params = request.getParameter("params");
String callback = request.getParameter("callback");
// 經過該接口一系列操作,然後得到data,將data返回給調用者
String data = "{\"result\":\""+params+"\"}";
out.println(callback + "("+data+")");
%>
這裏沒有指定jsonpCallback,實際上jquery底層拼裝了一個函數名。
補充:
1、ajax和jsonp這兩種技術在調用方式上“看起來”很像,目的也一樣,都是請求一個url,然後把服務器返回的數據進行處理,因此jquery和ext等框架都把jsonp作爲ajax的一種形式進行了封裝;
2、但ajax和jsonp其實本質上是不同的東西。ajax的核心是通過XmlHttpRequest獲取非本頁內容,而jsonp的核心則是動態添加