jquery的ajax和getJson跨域擷取json資料的實現方法

來源:互聯網
上載者:User

 本篇文章主要是對jquery的ajax和getJson跨域擷取json資料的實現方法進行了介紹,需要的朋友可以過來參考下,希望對大家有所協助

很多開發人員在使用jquery在前端和伺服器端進行資料互動,所以很容易會認為在前端利用jquery就可以讀取任何網站的資料了。近日在進行開 發時,因為要和第三方公司的一個項目進行資料的共用,因為考慮多不佔用伺服器的資源,遂決定直接在html進行資料的讀取,不走伺服器端進行中轉了。然後 正好就遇到了瀏覽器端跨域訪問的問題。 跨域的安全限制都是指瀏覽器端來說的,伺服器端不存在跨域安全限制的問題。 目前瀏覽器端跨域訪問常用的兩種方法有兩種: 1、通過jQuery的ajax進行跨域,這其實是採用的jsonp的方式來實現的。 jsonp是英文json with padding的縮寫。它允許在伺服器端產生script tags至返回至用戶端,也就是動態產生javascript標籤,通過javascript callback的形式實現資料讀取。 html頁面端範例程式碼: 代碼如下: //首先要引入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);          }      });  });   伺服器端範例程式碼,以java為例: 伺服器端代碼,是重點,開始以為,只要用戶端通過jsonp就可以直接跨域訪問,其實不然,需要伺服器端的支援才行。  代碼如下: public void jsonpTest() throws IOException{       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) 可選。規定當請求成功時啟動並執行函數。 額外的參數: 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函數一個是自動產生的函數名,一個是手工指定的函數名。 
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.