當前位置:才華齋>計算機>java語言>

Java Ajax jsonp跨域請求詳解

java語言 閱讀(1.57W)

怎樣用java程式碼發起ajax 的jsonp並得到返回資料? 以下是本站小編搜尋整理的關於Java Ajax jsonp跨域請求詳解,感興趣的小夥伴們可以參考一下!想了解更多相關資訊請持續關注我們應屆畢業生考試網!

Java Ajax jsonp跨域請求詳解

  1、什麼是JSONP

一般來說位於 的網頁無法與不是 的伺服器溝通,而 HTML 的<script> 元素是一個例外。利用 <script> 元素的這個開放策略,網頁可以得到從其他來源動態產生的 JSON 資料,而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料並不是 JSON,而是任意的JavaScript,用 JavaScript 直譯器執行而不是用 JSON 解析器解析。

JSONP是一種協議,為了解決客戶端請求伺服器跨域的問題,但是並非是正式的傳輸協議。該協議的'一個要點就是允許使用者傳遞一個callback引數給服務端,然後服務端返回資料時會將這個callback引數作為函式名來包裹住JSON資料,這樣客戶端就可以隨意定製自己的函式來自動處理返回資料了.

  2、Ajax 請求其他域介面

我這個專案要請求另外一個第一個後臺介面請求資料,在頁面渲染的時候,通過ajax載入資料如下:

$({

url: '#39;,

type: 'GET',

dataType: 'json',

timeout: 5000,

contentType: 'application/json; charset=utf-8',

success: function (result) {

alter("aaaa");

}

});

這樣就出現跨域的錯誤,如下所示:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 500.

這裡就說明不允許跨域請求,那麼怎麼辦? 換成jsonp好了。就改了dataType這個欄位。

$({

url: '#39;,

type: 'GET',

dataType: 'jsonp',

timeout: 5000,

contentType: 'application/json; charset=utf-8',

success: function (result) {

alter("aaaa");

}

});

結果: Uncaught SyntaxError: Unexpected token!

what the fuck!明明請求回來資料,結果還是報錯。原因是ajax請求伺服器,而返回的資料格式不符合jsonp的返回格式,那麼jsonp格式是什麼樣的?

Callback({msg:'this is json data'})

這是什麼叼東西,奇葩誰定義的!如果你這麼想,看來你沒有仔細看第1點,JSON是一種輕量級的資料交換格式,像xml一樣。JSONP是一種使用JSON資料的方式,返回的不是JSON物件,是包含JSON物件的javaScript指令碼。但是上圖是一段json串,所以報錯啦。

  3、引數返回處理

有一點你會發現在你是用jsonp協議請求時,在引數中除了自己填寫的引數外還有名為callback的引數,如圖:

看看這個引數是什麼東西,因為我在ajax請求的時候沒有指定,jsonp這個引數,那麼系統預設引數名為“callback”。沒有指定jsonpCallback引數, 那麼jquery會生成隨機的函式名,如上圖所示。

比如我如下配置:

$({

url: '#39;,

type: 'GET',

dataType: 'jsonp',

jsonp:'callbacka',//傳遞給請求處理程式或頁面的,用以獲得jsonp回撥函式名的引數名(預設為:callback)

jsonpCallback:"success_jsonpCallback",//自定義的jsonp回撥函式名稱,預設為jQuery自動生成的隨機函式名

timeout: 5000,

contentType: 'application/json; charset=utf-8',

success: function (result) {

alter("aaaa");

}

});

那麼伺服器亦可以通過下面方法獲取回撥的函式名:

複製程式碼 程式碼如下:

string callbackFunName =arameter("callbacka");//獲取的就是success_jsonpCallback 字串

注意:系統會區分函式名大小寫。

那麼下面按照格式包裝一下看看咯:

String callback = arameter("callback"); //不指定函式名預設 callback

return callback+ "(" + jsonStr + ")"

包了一下,結果真的不報錯,看下返回資料如下圖:

  4、JSONP的執行過程

首先在客戶端註冊一個callback (如:'jsoncallback'), 然後把callback的名字(如:jsonp1236827957501)傳給伺服器。注意:服務端得到callback的數值後,要用jsonp1236827957501(......)把將要輸出的json內容包括起來,此時,伺服器生成 json 資料才能被客戶端正確接收。

然後,以 javascript 語法的方式,生成一個function, function 名字就是傳遞上來的引數 'jsoncallback'的值 jsonp1236827957501 .

最後,將 json 資料直接以入參的方式,放置到 function 中,這樣就生成了一段 js 語法的文件,返回給客戶端。客戶端瀏覽器,解析script標籤,並執行返回的 javascript 文件,此時javascript文件資料,作為引數, 傳入到了客戶端預先定義好的 callback 函式(如上例中jquery $()方法封裝的的success: function (json))裡。