快捷導(dǎo)航

jquery的ajax和getJson跨域獲取json數(shù)據(jù)的實(shí)現(xiàn)方法

更新時(shí)間：2014年02月04日 09:26:46 作者：

本篇文章主要是對(duì)jquery的ajax和getJson跨域獲取json數(shù)據(jù)的實(shí)現(xiàn)方法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助

很多開(kāi)發(fā)人員在使用jquery在前端和服務(wù)器端進(jìn)行數(shù)據(jù)交互，所以很容易會(huì)認(rèn)為在前端利用jquery就可以讀取任何站點(diǎn)的數(shù)據(jù)了。近日在進(jìn)行開(kāi) 發(fā)時(shí)，因?yàn)橐偷谌焦镜囊粋€(gè)項(xiàng)目進(jìn)行數(shù)據(jù)的共享，因?yàn)榭紤]多不占用服務(wù)器的資源，遂決定直接在html進(jìn)行數(shù)據(jù)的讀取，不走服務(wù)器端進(jìn)行中轉(zhuǎn)了。然后正好就遇到了瀏覽器端跨域訪問(wèn)的問(wèn)題。

跨域的安全限制都是指瀏覽器端來(lái)說(shuō)的，服務(wù)器端不存在跨域安全限制的問(wèn)題。

目前瀏覽器端跨域訪問(wèn)常用的兩種方法有兩種：

1、通過(guò)jQuery的ajax進(jìn)行跨域，這其實(shí)是采用的jsonp的方式來(lái)實(shí)現(xiàn)的。

jsonp是英文json with padding的縮寫(xiě)。它允許在服務(wù)器端生成script tags至返回至客戶端，也就是動(dòng)態(tài)生成javascript標(biāo)簽，通過(guò)javascript callback的形式實(shí)現(xiàn)數(shù)據(jù)讀取。

html頁(yè)面端示例代碼：

復(fù)制代碼代碼如下:

//首先要引入jquery的js包
jQuery(document).ready(function(){
$.ajax({

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

async:false,

url : "http://api.taobao.com/apitools/ajax_props.do", //跨域請(qǐng)求的URL

dataType : "jsonp",

//傳遞給請(qǐng)求處理程序，用以獲得jsonp回調(diào)函數(shù)名的參數(shù)名(默認(rèn)為:callback)

jsonp: "jsoncallback",

//自定義的jsonp回調(diào)函數(shù)名稱(chēng)，默認(rèn)為jQuery自動(dòng)生成的隨機(jī)函數(shù)名

jsonpCallback:"success_jsonpCallback",

//成功獲取跨域服務(wù)器上的json數(shù)據(jù)后,會(huì)動(dòng)態(tài)執(zhí)行這個(gè)callback函數(shù)

success : function(json){

             alert(json);
         }
     });
});

服務(wù)器端示例代碼，以java為例：

服務(wù)器端代碼，是重點(diǎn)，開(kāi)始以為，只要客戶端通過(guò)jsonp就可以直接跨域訪問(wèn)，其實(shí)不然，需要服務(wù)器端的支持才行。

復(fù)制代碼代碼如下:

public void jsonpTest() throws IOException{

HttpServletRequest request = ServletActionContext.getRequest();

HttpServletResponse response = ServletActionContext.getResponse();

//根據(jù)html指定的jsonp回調(diào)函數(shù)的參數(shù)名，獲取回調(diào)函數(shù)的名稱(chēng)

//callbackName的值其實(shí)就是：success_jsonpCallback

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

//簡(jiǎn)單模擬一個(gè)json字符串，實(shí)際可使用google的gson進(jìn)行轉(zhuǎn)換，次數(shù)通過(guò)字符串拼接

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

//\是對(duì)"號(hào)進(jìn)行轉(zhuǎn)義

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

//最終返回的數(shù)據(jù)為：success_jsonpCallback({"name":"張三","age":28})

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

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

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

jsonp的原理：

首先在客戶端注冊(cè)一個(gè)callback (如:'jsoncallback'), 然后把callback的名字(如:success_jsonpCallback)傳給服務(wù)器端對(duì)應(yīng)的處理函數(shù)。

服務(wù)器先生成需要返回給客戶端的 json 數(shù)據(jù)。然后以 javascript 語(yǔ)法的方式，生成一個(gè)function , function 名字就是傳遞上來(lái)的參數(shù)(jsoncallback)的值(success_jsonpCallback) 。

最后將 json 數(shù)據(jù)直接以入?yún)⒌姆绞?，放置?function 中，這樣就生成了一段 js 語(yǔ)法的文檔，返回給客戶端。
客戶端瀏覽器，解析script標(biāo)簽，并將服務(wù)器端返回的數(shù)據(jù)，作為參數(shù)，
傳入到了客戶端預(yù)先定義好的 callback 函數(shù)(如上例中jquery $.ajax()方法封裝的的success: function (json))里。

實(shí)際上跨域是通過(guò)動(dòng)態(tài)增加script來(lái)加載數(shù)據(jù)，無(wú)法直接獲得數(shù)據(jù)，所以需要使用回調(diào)函數(shù)。

2.使用jquery的getJson進(jìn)行跨域讀取數(shù)據(jù)

實(shí)際上getJson方式的根本原理和ajax使用jsonp的方式是一樣的。

jquery中常用getJson來(lái)調(diào)用獲取遠(yuǎn)程的數(shù)據(jù)，并通過(guò)json格式返回。函數(shù)的原型如下：

jQuery.getJSON(url,data,success(data,status,xhr))

參數(shù)	描述
url	必需。規(guī)定將請(qǐng)求發(fā)送的哪個(gè) URL。
data	可選。規(guī)定連同請(qǐng)求發(fā)送到服務(wù)器的數(shù)據(jù)。
success(data,status,xhr)	可選。規(guī)定當(dāng)請(qǐng)求成功時(shí)運(yùn)行的函數(shù)。額外的參數(shù)： response - 包含來(lái)自請(qǐng)求的結(jié)果數(shù)據(jù) status - 包含請(qǐng)求的狀態(tài) xhr - 包含 XMLHttpRequest 對(duì)象

參數(shù)

描述

url

必需。規(guī)定將請(qǐng)求發(fā)送的哪個(gè) URL。

data

可選。規(guī)定連同請(qǐng)求發(fā)送到服務(wù)器的數(shù)據(jù)。

success(data,status,xhr)

可選。規(guī)定當(dāng)請(qǐng)求成功時(shí)運(yùn)行的函數(shù)。

額外的參數(shù)：

response - 包含來(lái)自請(qǐng)求的結(jié)果數(shù)據(jù)
status - 包含請(qǐng)求的狀態(tài)
xhr - 包含 XMLHttpRequest 對(duì)象

該函數(shù)是簡(jiǎn)寫(xiě)的ajax函數(shù)，實(shí)際上等價(jià)于：

復(fù)制代碼代碼如下:

$.ajax({
  url: url,
  data: data,
  success: callback,
  dataType: json
}); 

言歸正傳，下面我們來(lái)看如何使用getJson跨域獲取數(shù)據(jù)。

html頁(yè)面示例代碼：

復(fù)制代碼代碼如下:

$.getJSON("http://api.taobao.com/apitools/ajax_props.do&jsoncallback=?",
    function (data) {
        alert(data);
    }
);

執(zhí)行原理：

發(fā)送請(qǐng)求時(shí)需要傳一個(gè)callback的回調(diào)函數(shù)名到服務(wù)器端，服務(wù)器端拿到這個(gè)回調(diào)函數(shù)名，再將返回?cái)?shù)據(jù)用參數(shù)的形式反回到客戶端，這樣客戶端就能夠調(diào)到。

所以發(fā)送請(qǐng)求URL的地址后面一定要上jsoncallback=?這樣的參數(shù)，jquery會(huì)將?號(hào)自動(dòng)替換成自動(dòng)生成的回調(diào)函數(shù)的名稱(chēng)。

所以最終的實(shí)際請(qǐng)求為：http://api.taobao.com/apitools/ajax_props.do&jsoncallback=jsonp1322444422697

所以和ajax的方式想比較，也就是callback函數(shù)一個(gè)是自動(dòng)生成的函數(shù)名，一個(gè)是手工指定的函數(shù)名。

您可能感興趣的文章: