首頁  >  文章  >  Java  >  一起看看Java Ajax jsonp跨域請求

一起看看Java Ajax jsonp跨域請求

coldplay.xixi
coldplay.xixi轉載
2020-08-25 17:15:191952瀏覽

一起看看Java Ajax jsonp跨域請求

【相關學習推薦:#java基礎教學##】

1、什麼是JSONP

一般來說位於server1.example.com 的網頁無法與不是server1.example.com的伺服器溝通,而HTML 的3f1c4e4b6b16bbbd69b2ee476dc4f83a 元素是例外。利用 3f1c4e4b6b16bbbd69b2ee476dc4f83a 元素的這個開放策略,網頁可以得到從其他來源動態產生的 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))裡。

相關文章推薦:

ajax影片教學

以上是一起看看Java Ajax jsonp跨域請求的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:jb51.net。如有侵權,請聯絡admin@php.cn刪除