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函数。

上一章目录下一章