Java Ajax jsonp 跨域請求

1. 什麼是JSONP

        通常來講位於 server1.example.com 的網頁沒法與不是 server1.example.com的服務器溝通，而 HTML 的<script> 元素是一個例外。利用 <script> 元素的這個開放策略，網頁能夠獲得從其餘來源動態產生的 JSON 資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料並非 JSON，而是任意的JavaScript，用 JavaScript 直譯器執行而不是用 JSON 解析器解析。

        JSONP是一種協議，爲了解決客戶端請求服務器跨域的問題，可是並不是是正式的傳輸協議。該協議的一個要點就是容許用戶傳遞一個callback參數給服務端，而後服務端返回數據時會將這個callback參數做爲函數名來包裹住JSON數據，這樣客戶端就能夠隨意定製本身的函數來自動處理返回數據了.

2. Ajax 請求其餘域接口

        舉個例子：

我這個項目要請求另一個第一個後臺接口請求數據，在頁面渲染的時候，經過ajax加載數據以下：

$.ajax({
            url: 'http://www.xxx.cn/lalala?method=10082&page=1&pageSize=10',
            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這個字段。

$.ajax({
            url: 'http://www.xxx.cn/lalala?method=10082&page=1&pageSize=10',
            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會生成隨機的函數名，如上圖所示。

好比我以下配置：

$.ajax({
            url: 'http://www.xxx.cn/lalala?method=10082&page=1&pageSize=10',
            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 =request.getParameter（"callbacka"）;//獲取的就是success_jsonpCallback 字符串

注意：系統會區分函數名大小寫。

 

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

String callback = request.getParameter("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 $.ajax()方法封裝的的success: function (json))裏。