亚洲欧美日韩综合系列在线_91精品人妻一区二区_欧美大肥婆一级特大AA片_九色91视频免费观看_亚洲综合国产精品_av中文字幕在线不卡_久久精品色综合网_看黄色视频的软件_无卡无码高清中文字幕码2024_亚洲欧美日韩天堂网

一、什么是跨域訪問

舉個(gè)栗子：在A網(wǎng)站中，我們希望使用Ajax來獲得B網(wǎng)站中的特定內(nèi)容。如果A網(wǎng)站與B網(wǎng)站不在同一個(gè)域中，那么就出現(xiàn)了跨域訪問問題。你可以理解為兩個(gè)域名之間不能跨過域名來發(fā)送請(qǐng)求或者請(qǐng)求數(shù)據(jù)，否則就是不安全的?？缬蛟L問違反了同源策略，同源策略的詳細(xì)信息可以點(diǎn)擊如下鏈接：Same-origin_policy； 

總而言之，同源策略規(guī)定，瀏覽器的ajax只能訪問跟它的HTML頁(yè)面同源（相同域名或IP）的資源。

二、什么是JSONP

JSONP(JSON with Padding)是JSON的一種“使用模式”，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題。

由于同源策略，一般來說位于 server1.example.com 的網(wǎng)頁(yè)無法與不是 server1.example.com的服務(wù)器溝通，而 HTML 的<script> 元素是一個(gè)例外。利用<script>元素的這個(gè)開放策略，網(wǎng)頁(yè)可以得到從其他來源動(dòng)態(tài)產(chǎn)生的 JSON 資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料并不是 JSON，而是任意的JavaScript，用 JavaScript 直譯器執(zhí)行而不是用 JSON 解析器解析。更具體的原理需要更多篇幅的講解，小伙伴可以自行去百度。

三、JSONP的使用

前端的使用示例

JQuery Ajax對(duì)JSONP進(jìn)行了很好的封裝，我們使用起來很方便。前端示例：

    $.ajax({

            type:"GET",

            url:"http://www.deardull.com:9090/getMySeat", //訪問的鏈接

            dataType:"jsonp",  //數(shù)據(jù)格式設(shè)置為jsonp

            jsonp:"callback",  //Jquery生成驗(yàn)證參數(shù)的名稱

            success:function(data){  //成功的回調(diào)函數(shù)

                alert(data);

            },

            error: function (e) {

                alert("error");

            }

        });

1

2

3

4

5

6

7

8

9

10

11

12

13

需要注意的地方是：

dataType，該參數(shù)必須要設(shè)置成jsonp

jsonp，該參數(shù)的值需要與服務(wù)器端約定，詳細(xì)情況下面介紹。（約定俗成的默認(rèn)值為callback）

后端的配合示例

JQuery Ajax Jsonp原理

后端要配合使用jsonp，那么首先得了解Jquery Ajax jsonp的一個(gè)特點(diǎn)： 

Jquery在發(fā)送一個(gè)Ajax jsonp請(qǐng)求時(shí)，會(huì)在訪問鏈接的后面自動(dòng)加上一個(gè)驗(yàn)證參數(shù)，這個(gè)參數(shù)是Jquery隨機(jī)生成的，例如鏈接 

http://www.deardull.com:9090/getMySeat?callback=jQuery31106628680598769732_1512186387045&_=1512186387046 

中，參數(shù)callback=jQuery31106628680598769732_1512186387045&_=1512186387046就是jquery自動(dòng)添加的。 

添加這個(gè)參數(shù)的目的是唯一標(biāo)識(shí)這次請(qǐng)求。當(dāng)服務(wù)器端接收到該請(qǐng)求時(shí)，需要將該參數(shù)的值與實(shí)際要返回的json值進(jìn)行構(gòu)造（如何構(gòu)造下面講解），并且返回，而前端會(huì)驗(yàn)證這個(gè)參數(shù)，如果是它之前發(fā)出的參數(shù)，那么就會(huì)接收并解析數(shù)據(jù)，如果不是這個(gè)參數(shù)，那么就拒絕接受。 

需要特別注意的是這個(gè)驗(yàn)證參數(shù)的名字（我在這個(gè)坑上浪費(fèi)了2小時(shí)），這個(gè)名字來源于前端的jsonp參數(shù)的值。如果把前端jsonp參數(shù)的值改為“aaa”，那么相應(yīng)的參數(shù)就應(yīng)該是 

aaa=jQuery31106628680598769732_1512186387045&_=1512186387046

后端接收與處理

知道了Jquery Ajax Jsonp的原理，也知道了需要接受的參數(shù)，我們就可以來編寫服務(wù)器端程序了。 

為了配合json，服務(wù)器端需要做的事情可以概括為兩步：

第一步、接收驗(yàn)證參數(shù)

根據(jù)與前端Ajax約定的jsonp參數(shù)名來接收驗(yàn)證參數(shù)，示例如下（使用SpringMVC，其他語言及框架原理類似）

    @ResponseBody

    @RequestMapping("/getJsonp")

    public String getMySeatSuccess(@RequestParam("callback") String callback){

1

2

3

第二步、構(gòu)造參數(shù)并返回

將接收的的驗(yàn)證參數(shù)callback與實(shí)際要返回的json數(shù)據(jù)按“callback(json)”的方式構(gòu)造：

     @ResponseBody

    @RequestMapping("/getMySeat")

    public String getMySeatSuccess(@RequestParam("callback") String callback){

        Gson gson=new Gson();   //google的一個(gè)json工具庫(kù)

        Map<String,String> map=new HashMap<>();

        map.put("seat","1_2_06_12");

        return callback+"("+gson.toJson(map)+")";   //構(gòu)造返回值

    }

1

2

3

4

5

6

7

8

四、總結(jié)

最終，前后端的相應(yīng)代碼應(yīng)該是這樣的： 

前端

    $.ajax({

            type:"GET",

            url:"http://www.deardull.com:9090/getMySeat", //訪問的鏈接

            dataType:"jsonp",  //數(shù)據(jù)格式設(shè)置為jsonp

            jsonp:"callback",  //Jquery生成驗(yàn)證參數(shù)的名稱

            success:function(data){  //成功的回調(diào)函數(shù)

                alert(data);

            },

            error: function (e) {

                alert("error");

            }

        });

1

2

3

4

5

6

7

8

9

10

11

12

后端

    @ResponseBody

    @RequestMapping("/getMySeat")

    public String getMySeatSuccess(@RequestParam("callback") String callback){

        Gson gson=new Gson();

        Map<String,String> map=new HashMap<>();

        map.put("seat","1_2_06_12");

        logger.info(callback);

        return callback+"("+gson.toJson(map)+")";

    }

1

2

3

4

5

6

7

8

9

需要注意的是：

前端注意與后端溝通約定jsonp的值，通常默認(rèn)都是用callback。

后端根據(jù)jsonp參數(shù)名獲取到參數(shù)后要與本來要返回的json數(shù)據(jù)按“callback(json)”的方式構(gòu)造。

如果要測(cè)試的話記得在跨域環(huán)境（兩臺(tái)機(jī)器）下進(jìn)行。

--------------------- 

作者：Star_Ship 

來源：CSDN 

原文：https://blog.csdn.net/zhoucheng05_13/article/details/78694766 

版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請(qǐng)附上博文鏈接！