Java Ajax jsonp 跨域請求

OBKoro1 發布于2019-08-20 10:13 / 2603人閱讀

摘要：是一種協議，為了解決客戶端請求服務器跨域的問題，但是并非是正式的傳輸協議。結果明明請求回來數據，結果還是報錯。是一種使用數據的方式，返回的不是對象，是包含對象的腳本。

1、什么是JSONP

一般來說位于 server1.example.com 的網頁無法與不是 server1.example.com的服務器溝通，而 HTML 的

這里就說明不允許跨域請求，那么怎么辦？?換成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))里。

GPU云服務器云服務器 jsonp跨域請求 ajax jsonp跨域傳值 ajax請求跨域問題 js ajax跨域請求數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80040.html

AJAX跨域完全講解

摘要：跨域完全講解今天在慕課網上學習了跨域完全講解我在收集面試題的時候其實就已經有過跨域的問題的了，當時候知道了為什么會存在跨域，以及跨域解決的方案有哪些，今天隨著課程的學習，又加深了跨域的理解，以此記錄下來。 AJAX跨域完全講解今天在慕課網上學習了AJAX跨域完全講解：https://www.imooc.com/learn/947 我在收集AJAX面試題的時候其實就已經有過AJAX跨域...

alexnevsky 2019-08-22 15:00 評論0 收藏0
AJAX跨域完全講解

摘要：跨域完全講解今天在慕課網上學習了跨域完全講解我在收集面試題的時候其實就已經有過跨域的問題的了，當時候知道了為什么會存在跨域，以及跨域解決的方案有哪些，今天隨著課程的學習，又加深了跨域的理解，以此記錄下來。 AJAX跨域完全講解今天在慕課網上學習了AJAX跨域完全講解：https://www.imooc.com/learn/947 我在收集AJAX面試題的時候其實就已經有過AJAX跨域...

i_garfileo 2019-08-15 14:27 評論0 收藏0
JSONP的一點筆記<修改中>

摘要：請求服務器數據并規定回調函數為上面代碼通過動態添加元素，向服務器發出請求。另外假設向服務發送的請求是這樣的在這種情況下，是表示請求的請求參數，而是應用程序的回調函數的名稱。清單調用回調服務注意，我們使用作為回調函數名，而非真實的函數名。同源策略同源策略(Same origin policy)，它是由Netscape提出的一個著名的安全策略。現在所有支持JavaScript的瀏覽器都...

姘存按 2019-08-20 17:22 評論0 收藏0
慕課網_《Ajax跨域完全講解》學習總結

摘要：時間年月日星期三說明本文部分內容均來自慕課網。當預檢請求通過的時候，才發送真正的請求。時間：2018年04月18日星期三說明：本文部分內容均來自慕課網。@慕課網：https://www.imooc.com教學源碼：https://github.com/zccodere/s...學習源碼：https://github.com/zccodere/s... 第一章：課程介紹 1-1 課程介...

fredshare 2019-08-15 15:34 評論0 收藏0