很多開發人員在使用jquery在前端和伺服器端進行資料交互，所以很容易會認為在前端利用jquery就可以讀取任何站點的資料了。最近在進行開 發時，因為要和第三方公司的一個專案進行資料的共享，因為考慮多不佔用伺服器的資源，遂決定直接在html進行資料的讀取，不走伺服器端進行中轉了。然後 正好就遇到了瀏覽器端跨網域存取的問題。
jsonp是英文json with padding的縮寫。它允許在伺服器端產生script tags至返回客戶端，也就是動態產生javascript標籤，透過javascript callback的形式實現資料讀取。
程式碼如下:
要引入jquery的js包
jQuery(document).ready(function(){
$.ajax({
type : "get", //jquey是不支援post方式跨域的
async:false,
url : "http://api.taobao.com/apitools/ajax_props.do", //跨域請求的URL
dataType : "jsonp",
//傳遞給請求處理程序，以取得jsonp回呼函數名稱的參數名稱(預設為:callback)
jsonp: "jsoncallback",
//自訂的jsonp回呼函數名稱，預設為jQuery自動產生的隨機函數名稱
jsonpCallback:"success_jsonpCallback",
//成功取得跨網域伺服器上的json資料後,會動態執行這個callback函數
success : function(json){
alert(json);
public void
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
//依據html指定的jsonp回呼函數的參數名，以取得回呼函數的名稱
//callbackName的值其實就是：success_jsonpCallback
String callbackName = (String)request.getAttribute("jsoncallback");
//簡單模擬一個json字串，實際可使用google的gson進行轉換，次數透過字串拼接
//{"name":"張三","age":28}
//是對"號進行轉義
String jsonStr = "{"name":"張三","age":28}";
//最終回傳的資料為：success_jsonpCallback({"name":"張三","age":28})
String renderStr = callbackName "(" jsonStr ")";
response.setContentType("text/plain;charset=UTF-8");
response.getWriter().write(renderStr);
}
jsonp的原理：
先在客戶端註冊一個callback (如:'jsoncallback'), 然後把callback的名字(如:success_jsonpCallback)傳給伺服器端對應的處理函數。
伺服器先生成需要傳回給客戶端的 json 資料。然後以 javascript 語法的方式，產生一個function , function 名字就是傳遞上來的參數(jsoncallback)的值(success_jsonpCallback) 。
最後將 json 資料直接以入參的方式，放置到 function 中，這樣就產生了一段 js 語法的文檔，返回給客戶端。
客戶端瀏覽器，解析script標籤，並將伺服器端傳回的數據，作為參數，
傳入到了客戶端預先定義好的callback 函數(如上例中jquery $.ajax()方法封裝的的success: function (json))裡。
實際上跨域是透過動態增加script來載入數據，無法直接取得數據，所以需要使用回調函數。
2.使用jquery的getJson進行跨域讀取資料
實際上getJson方式的根本原理和ajax使用jsonp的方式是一樣的。
jquery中常用getJson來呼叫取得遠端的數據，並透過json格式傳回。函數的原型如下：
jQuery.getJSON(url,data,success(data,status,xhr))
| 參數 |
描述 |
| url |
必需。規定將請求發送的哪個 URL。 |
| data |
可選。規定連同請求發送到伺服器的資料。 |
| success(data,status,xhr) |
| 参数 |
描述 |
| url |
必需。规定将请求发送的哪个 URL。 |
| data |
可选。规定连同请求发送到服务器的数据。 |
| success(data,status,xhr) |
可选。规定当请求成功时运行的函数。
额外的参数：
-
response - 包含来自请求的结果数据
-
status - 包含请求的状态
-
xhr - 包含 XMLHttpRequest 对象
|
可選。規定當請求成功時運行的函數。
額外的參數：
-
response - 包含來自請求的結果數據
-
status - 包含請求的狀態
-
xhr - 包含 XMLHttpRequest 物件
|
函數是簡寫的ajax函數，實際上等價於：複製程式碼
程式碼如下:
$.ajax({
url: url,
data: data,
success: callback,
dataType: json
}); 🎜>言歸正傳，以下我們來看如何使用getJson跨域取得資料。
html頁面範例程式碼：
$.getJSON(>$. "http://api.taobao.com/apitools/ajax_props.do&jsoncallback=?",
function (data) {
alert(data);
alert(data);
>
執行原理：
發送請求時需要傳一個callback的回呼函數名到伺服器端，伺服器端拿到這個回呼函數名，再將回傳資料用參數的形式反回客戶端，這樣客戶端就能夠調到。
所以發送請求URL的位址後面一定要上jsoncallback=?這樣的參數，jquery會將?號自動替換成自動產生的回呼函數的名稱。
所以最終的實際請求為：
http://api.taobao.com/apitools/ajax_props.do&jsoncallback=jsonp1322444422697
所以和ajax的方式想比較，也就是callback函數一個是自動產生的函數名，一個是手工指定的函數名。
