冰球突破豪华版输的家破人亡

書名： 15天學會jQuery編程與實戰（視頻教學版）（Web前端技術叢書）
作者名：劉鑫
本章字數： 629字
更新時間： 2020-11-28 16:21:47

3.10 JSONP在jQuery中的應用

jQuery對非跨域的請求進行了優化，使用起來就像同一個域名下的Ajax請求一樣簡單。jQuery在另一個域名中指定回調函數的名稱，可以用下面的形式加載JSON數據：

        $(document).ready(function(){
            $.getJSON(url + "? callbak=? ", function(data){
                alert("Symbol:" + data.symbol + ", Price:" + data.price);
            });
        });

代碼中的問號部分就是回調函數的名稱。這個問號不用開發者人為地替換，jQuery會非常智能地替換為目標函數。

【示例3-12】jq_JSONP.html

        01    <html>
        02         <head>
        03             <title>jQuery的JSONP調用</title>
        04               <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        05               <script type="text/javascript" src="../jquery-3.1.1.js"></script>
        06               <script type="text/javascript">
        07                 var showAge = function(data){       //定義回調函數
        08                          alert("Name:" + data.name + ", Age:" + data.age);
                                                              //展示信息數據
        09                    };
        10                 $(document).ready(function(){       //頁面加載回調函數
        11                      var url = 'jquery/info.js';//一個外部域名或IP的資源地址
        12                      //通過getJSON函數實現jQuery對JSONP的支持
        13                          $.getJSON(url + "? callbak=? ", showAge);
        14                    });
        15               </script>
        16         </head>
        17         <body style="text-align:center">
        18         </body>
        19    </html>

本示例的效果如圖3.13所示。

圖3.13 jQuery的JSONP調用

getJSON是獲取JSON格式數據的一種快捷函數。通過這個示例，我們發現它還提供對JSONP調用的優雅支持，僅需要一個普通的callback參數就可以很隱蔽地實現動態回調函數的執行。

在實際開發中，往往不使用靜態的JavaScript文件獲取數據，數據往往是動態的。也就是說，這些數據是用PHP、JSP、ASP.NET等動態語言生成的。為了達到可以跨域得到這些數據的目的，服務器端在返回數據時，不得不額外添加一條函數回調的代碼。

【示例3-13】PHP范例php_JSONP.html。

        01    <html>
        02         <head>
        03             <title>jQuery的JSONP調用PHP數據</title>
        04               <meta http-equiv="Content-Type" content="text/html;
    charset=UTF-8"/>
        05               <script type="text/javascript"
    src="../jquery-3.1.1.js"></script>
        06               <script type="text/javascript">
        07                 var showAge = function(data){            //定義回調函數
        08                          alert("Name:" + data.name + ", Age:" + data.age);
                                                                  //展示信息數據
        09                    };
        10                 $(document).ready(function(){            //加載執行
        11                      var url = 'jsonp.php';      //一個外部域名或IP的資源地址
        12                      $.getJSON(url + "? callback=? ", showAge); //JSONP調用
        13                    });
        14               </script>
        15         </head>
        16         <body style="text-align:center">
        17         </body>
        18    </html>

其中，PHP代碼如下：

        <? php
        //定義動態數據，這些數據往往不固定，而是來自數據庫
        $jsondata = "{name:'xiao ming', age:20}";
        echo $_GET['callback'].'('.$jsondata.')';   //返回數據并回調
        ?>

本示例的效果如圖3.14所示。

圖3.14 jQuery的JSONP調用PHP數據

可以看出，客戶端的代碼不用修改太多。只是服務器端的代碼需要多一個拼湊的過程，因為這些數據需要用回調的形式給跨域訪問的JavaScript函數。

官术网_书友最值得收藏!

15天學會jQuery編程與實戰（視頻教學版） （Web前端技術叢書）

3.10 JSONP在jQuery中的應用

15天學會jQuery編程與實戰（視頻教學版）（Web前端技術叢書）