從前端和後端兩個角度分析jsonp跨域訪問

php5中的驗證合法性的擴展，在PHP5.2中，可以透過內建的擴展過濾器去進行合法性的校驗。

一、什麼是跨網域存取

舉個栗子：在A網站中，我們希望使用Ajax來獲得B網站中的特定內容。如果A網站與B網站不在同一個網域中，那麼就出現了跨網域存取問題。你可以理解為兩個網域之間不能跨過網域來發送請求或請求數據，否則就是不安全的。跨網域存取違反了同源策略，同源策略的詳細資訊可以點擊如下連結：Same-origin_policy； 

總而言之，同源策略規定，瀏覽器的ajax只能存取跟它的HTML頁面同來源（相同網域名稱或IP）的資源。

二、什麼是JSONP

JSONP(JSON with Padding)是JSON的一種“使用模式”，可用於解決主流瀏覽器的跨域資料存取的問題。

由於同源策略，一般來說位於server1.example.com 的網頁無法與不是server1.example.com的伺服器溝通，而HTML 的<script>元素是一個例外。利用<script>元素的這個開放策略，網頁可以得到從其他來源動態產生的 JSON 資料，而這個使用模式就是所謂的 JSONP。用 JSONP 抓到的資料不是 JSON，而是任意的JavaScript，用 JavaScript 直譯器執行而不是用 JSON 解析器解析。更具體的原理需要更多篇幅的講解，小夥伴可以自行去百度。

三、JSONP的使用

前端的使用範例

JQuery Ajax對JSONP進行了很好的封裝，我們使用起來很方便。前端範例：

    $.ajax({
            type:"GET",
            url:"http://www.deardull.com:9090/getMySeat", //访问的链接
            dataType:"jsonp",  //数据格式设置为jsonp
            jsonp:"callback",  //Jquery生成验证参数的名称
            success:function(data){  //成功的回调函数
                alert(data);
            },
            error: function (e) {
                alert("error");
            }
        });

需要注意的地方是：

• dataType，該參數必須設定為jsonp

• jsonp ，此參數的值需要與伺服器端約定，詳細情況下面介紹。 （約定俗成的預設值為callback）

後端的配合範例

JQuery Ajax Jsonp原理

後端要配合使用jsonp，那麼首先得了解Jquery Ajax jsonp的一個特點：  
Jquery在發送一個Ajax jsonp請求時，會在訪問連結的後面自動加上驗證參數，這個參數是Jquery隨機產生的，例如連結
#http ://www.deardull.com:9090/getMySeat?callback=jQuery31106628680598769732_1512186387045&_=1512186387046
#call#call16 387045&_=1512186387046就是jquery自動加入的。
新增這個參數的目的是唯一標識這次請求。當伺服器端接收到該請求時，需要將該參數的值與實際要返回的json值進行構造（如何構造下面講解），並且返回，而前端會驗證這個參數，如果是它之前發出的參數，那麼就會接收並解析數據，如果不是這個參數，那就拒絕接受。
要特別注意的是這個驗證參數的名字（我在這個坑上浪費了2小時），這個名字來自前端的jsonp參數的值。如果把前端jsonp參數的值改為“aaa”，那麼對應的參數就應該是
aaa=jQuery31106628680598769732_1512186387045&_=1512186387046

##445&_=1512186387046

#>#Jqueryf

##JqueJqueryf

JqueJqueryf

JqueJqueryr

JqueJqueryf

JqueJqueryf

JqueJqueryl

JqueJqueryl

JqueJquerynf##>JqueJqueryf

JqueJquerynf

#JqueJquery#pson#pson#pson#pson#pson#pson#pson#pson#pson#pson#pson#pson#pson#pson#pson#了處理。的原理，也知道了需要接受的參數，我們就可以來寫伺服器端程式了。 為了配合json，伺服器端需要做的事情可以歸納為兩個步驟：

第一步、接收驗證參數

根據與前端Ajax約定的jsonp參數名稱來接收驗證參數，範例如下（使用SpringMVC，其他語言及框架原理類似）

•     @ResponseBody
      @RequestMapping("/getJsonp")
      public String getMySeatSuccess(@RequestParam("callback") String callback){

  第二步、建構參數並返回

將接收的的驗證參數callback與實際要傳回的json數據以「callback(json)」的方式建構：

•      @ResponseBody
      @RequestMapping("/getMySeat")    public String getMySeatSuccess(@RequestParam("callback") String callback){
          Gson gson=new Gson();   //google的一个json工具库
          Map<String,String> map=new HashMap<>();        map.put("seat","1_2_06_12");        return callback+"("+gson.toJson(map)+")";   //构造返回值
      }

  四、總結

#最終，前後端的對應程式碼應該是這樣的：

• 前端

################ #

    $.ajax({
            type:"GET",
            url:"http://www.deardull.com:9090/getMySeat", //访问的链接
            dataType:"jsonp",  //数据格式设置为jsonp
            jsonp:"callback",  //Jquery生成验证参数的名称
            success:function(data){  //成功的回调函数
                alert(data);
            },
            error: function (e) {
                alert("error");
            }
        });

######後端######

    @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)+")";
    }

###需要注意的是：############前端注意與後端溝通約定jsonp的值，通常默認都是用callback。 ############後端根據jsonp參數名稱取得到參數後要與本來要傳回的json資料以「callback(json)」的方式建構。 ############如果要測試的話記得在跨域環境（兩台機器）下進行。 ############完整的範例就是上面兩段程式碼，這裡就不提供Github連線了。上面的範例親測有效，如果有遇到問題的，歡迎留言提問。 #########################

一、什麼是跨網域存取

舉個栗子：在A網站中，我們希望使用Ajax來獲得B網站中的特定內容。如果A網站與B網站不在同一個網域中，那麼就出現了跨網域存取問題。你可以理解為兩個網域之間不能跨過網域來發送請求或請求數據，否則就是不安全的。跨網域存取違反了同源策略，同源策略的詳細資訊可以點擊如下連結：Same-origin_policy；
總而言之，同源策略規定，瀏覽器的ajax只能存取跟它的HTML頁面同源（相同域名或IP）的資源。

二、什麼是JSONP

JSONP(JSON with Padding)是JSON的一種“使用模式”，可用於解決主流瀏覽器的跨域資料存取的問題。

由於同源策略，一般來說位於server1.example.com 的網頁無法與不是server1.example.com的伺服器溝通，而HTML 的<script>元素是一個例外。利用<script>元素的這個開放策略，網頁可以得到從其他來源動態產生的 JSON 資料，而這個使用模式就是所謂的 JSONP。用 JSONP 抓到的資料不是 JSON，而是任意的JavaScript，用 JavaScript 直譯器執行而不是用 JSON 解析器解析。更具體的原理需要更多篇幅的講解，小夥伴可以自行去百度。

三、JSONP的使用

前端的使用範例

JQuery Ajax對JSONP進行了很好的封裝，我們使用起來很方便。前端範例：

    $.ajax({
            type:"GET",
            url:"http://www.deardull.com:9090/getMySeat", //访问的链接
            dataType:"jsonp",  //数据格式设置为jsonp
            jsonp:"callback",  //Jquery生成验证参数的名称
            success:function(data){  //成功的回调函数
                alert(data);
            },
            error: function (e) {
                alert("error");
            }
        });

需要注意的地方是：

• dataType，該參數必須設定為jsonp

• jsonp ，此參數的值需要與伺服器端約定，詳細情況下面介紹。 （約定俗成的預設值為callback）

後端的配合範例

JQuery Ajax Jsonp原理

後端要配合使用jsonp，那麼首先得了解Jquery Ajax jsonp的一個特點：  
Jquery在發送一個Ajax jsonp請求時，會在訪問連結的後面自動加上驗證參數，這個參數是Jquery隨機產生的，例如連結
#http ://www.deardull.com:9090/getMySeat?callback=jQuery31106628680598769732_1512186387045&_=1512186387046
#call#call16 387045&_=1512186387046就是jquery自動加入的。
新增這個參數的目的是唯一標識這次請求。當伺服器端接收到該請求時，需要將該參數的值與實際要返回的json值進行構造（如何構造下面講解），並且返回，而前端會驗證這個參數，如果是它之前發出的參數，那麼就會接收並解析數據，如果不是這個參數，那就拒絕接受。
要特別注意的是這個驗證參數的名字（我在這個坑上浪費了2小時），這個名字來自前端的jsonp參數的值。如果把前端jsonp參數的值改為“aaa”，那麼對應的參數就應該是
aaa=jQuery31106628680598769732_1512186387045&_=1512186387046

##445&_=1512186387046

#>#Jqueryf

##JqueJqueryf

JqueJqueryf

JqueJqueryr

JqueJqueryf

JqueJqueryf

JqueJqueryl

JqueJqueryl

JqueJquerynf##>JqueJqueryf

JqueJquerynf

#JqueJquery#pson#pson#pson#pson#pson#pson#pson#pson#pson#pson#pson#pson#pson#pson#pson#了處理。的原理，也知道了需要接受的參數，我們就可以來寫伺服器端程式了。 為了配合json，伺服器端需要做的事情可以歸納為兩個步驟：

第一步、接收驗證參數

根據與前端Ajax約定的jsonp參數名稱來接收驗證參數，範例如下（使用SpringMVC，其他語言及框架原理類似）

•     @ResponseBody
      @RequestMapping("/getJsonp")
      public String getMySeatSuccess(@RequestParam("callback") String callback){

  第二步、建構參數並返回

將接收的的驗證參數callback與實際要傳回的json數據以「callback(json)」的方式建構：

•      @ResponseBody
      @RequestMapping("/getMySeat")    public String getMySeatSuccess(@RequestParam("callback") String callback){
          Gson gson=new Gson();   //google的一个json工具库
          Map<String,String> map=new HashMap<>();        map.put("seat","1_2_06_12");        return callback+"("+gson.toJson(map)+")";   //构造返回值
      }

  四、總結

#最終，前後端的對應程式碼應該是這樣的：

前端

################ #

    $.ajax({
            type:"GET",
            url:"http://www.deardull.com:9090/getMySeat", //访问的链接
            dataType:"jsonp",  //数据格式设置为jsonp
            jsonp:"callback",  //Jquery生成验证参数的名称
            success:function(data){  //成功的回调函数
                alert(data);
            },
            error: function (e) {
                alert("error");
            }
        });

######後端######

    @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)+")";
    }

###需要注意的是：############前端注意與後端溝通約定jsonp的值，通常默認都是用callback。 ############後端根據jsonp參數名稱取得到參數後要與本來要傳回的json資料以「callback(json)」的方式建構。 ############相關推薦：########PHP關於AJAX1點疑惑############class.rFastTemplate.php一_PHP教學################

以上是從前端和後端兩個角度分析jsonp跨域訪問的詳細內容。更多資訊請關注PHP中文網其他相關文章！