jquery的ajax和getJson跨域擷取json資料

很多開發人員在使用jquery在前端和伺服器端進行資料互動，所以很容易會認為在前端利用jquery就可以讀取任何網站的資料了。近日在進行開 發時，因為要和第三方公司的一個項目進行資料的共用，因為考慮多不佔用伺服器的資源，遂決定直接在html進行資料的讀取，不走伺服器端進行中轉了。然後 正好就遇到了瀏覽器端跨域訪問的問題。

跨域的安全限制都是指瀏覽器端來說的，伺服器端不存在跨域安全限制的問題。

目前瀏覽器端跨域訪問常用的兩種方法有兩種：

1、通過jQuery的ajax進行跨域，這其實是採用的jsonp的方式來實現的。

jsonp是英文json with padding的縮寫。它允許在伺服器端產生script tags至返回至用戶端，也就是動態產生javascript標籤，通過javascript callback的形式實現資料讀取。

 

html頁面端範例程式碼：

01	//首先要引入jquery的js包

02	jQuery(document).ready(function(){

03

$.ajax({

04	type : "get", //jquey是不支援post方式跨域的

05	async:false,

06	url : "http://api.taobao.com/apitools/ajax_props.do", //跨域請求的URL

07	dataType : "jsonp",

08	//傳遞給請求處理常式，用以獲得jsonp回呼函數名的參數名(預設為:callback)

09	jsonp: "jsoncallback",

10	//自訂的jsonp回呼函數名稱，預設為jQuery自動產生的隨機函數名

11	jsonpCallback:"success_jsonpCallback",

12	//成功擷取跨網域服務器上的json資料後,會動態執行這個callback函數

13	success : function(json){

14	alert(json);

15

}

16

});

17

});

伺服器端範例程式碼，以java為例：

伺服器端代碼，是重點，開始以為，只要用戶端通過jsonp就可以直接跨域訪問，其實不然，需要伺服器端的支援才行。

01	public void jsonpTest() throws IOException{

02	HttpServletRequest request = ServletActionContext.getRequest();

03	HttpServletResponse response = ServletActionContext.getResponse();

04	//根據html指定的jsonp回呼函數的參數名，擷取回呼函數的名稱

05	//callbackName的值其實就是：success_jsonpCallback

06	String callbackName = (String)request.getAttribute("jsoncallback");

07	//簡單類比一個json字串，實際可使用google的gson進行轉換，次數通過字串拼接

08	//{"name":"張三","age":28}

09	//\是對"號進行轉義

10	String jsonStr = "{\"name\":\"張三\",\"age\":28}";

11	//最終返回的資料為：success_jsonpCallback({"name":"張三","age":28})

12	String renderStr = callbackName+"("+jsonStr+")";

13	response.setContentType("text/plain;charset=UTF-8");

14	response.getWriter().write(renderStr);

15

}

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)	可選。規定當請求成功時啟動並執行函數。 額外的參數： 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);    });

執行原理：

發送請求時需要傳一個callback的回呼函數名到伺服器端，伺服器端拿到這個回呼函數名，再將返回資料用參數的形式反回到用戶端，這樣用戶端就能夠調到。

所以發送請求URL的地址後面一定要上jsoncallback=?這樣的參數，jquery會將?號自動替換成自動產生的回呼函數的名稱。

所以最終的實際請求為：http://api.taobao.com/apitools/ajax_props.do&jsoncallback=jsonp1322444422697

所以和ajax的方式想比較，也就是callback函數一個是自動產生的函數名，一個是手工指定的函數名。

 

本文首發於度外網路官方部落格，轉載請註明出處：http://www.duwaiweb.com/blog/20120918_e51195f8-2261-48cf-a883-3013a576fa51.html