JSON

Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别

字号+ 作者:H5之家 来源:H5之家 2016-01-18 17:28 我要评论( )

JavaScript,Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别,UDN开发者论坛,专注企业互联网开发的IT技术社区

2.png (6.69 KB, 下载次数: 0)

下载附件  

昨天 14:58 上传


  原因是因为json数据并不是合法的js语句,把上面的json数据放在一个回调函数中是最简单的方法:

  • <body>
  • <script src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
  • <script type="text/JavaScript">
  • function jsonpcallback(json) {
  •   console.log(json);
  • }
  • var s = document.createElement('script');
  • s.src = 'http://localhost:8080/a.json';
  • document.body.appendChild(s);
  • </script>
  • </body>
  • jsonpcallback({
  • "name": "hanzichi",
  • "age": 10
  • });

    复制代码



    登录/注册后可看大图

    2.png (21.28 KB, 下载次数: 0)

    下载附件  

    昨天 14:58 上传


      当然,这时的a.json文件并不一定要这样命名,改成a.js也不会有一点问题。

      而如果是与服务端交互也是一样的道理,比如和php:

  • <body>
  • <script src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
  • <script type="text/JavaScript">
  • function jsonpcallback(json) {
  •   console.log(json);
  • }
  • var s = document.createElement('script');
  • s.src=":8080/test.php?callback=jsonpcallback";
  • document.body.appendChild(s);
  • </script>
  • </body>
  • <?php
  • $jsondata = '{
  • "name": "hanzichi",
  • "age": 10
  • }';
  • echo $_GET['callback'].'('.$jsondata.')';
  • ?>

    复制代码


      需要注意的是,jsonp提供的url(即动态生成的script标签的src),无论看上去是什么形式,最终生成返回的都是一段js代码。

      JQuery对jsonp的封装

      为了便于开发,jq对jsonp也进行了封装,封装在了ajax方法中。

  • <script src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
  • <script type="text/JavaScript">
  • $.ajax({
  • url: 'http://localhost:8080/a.json',
  • dataType: 'jsonp',
  • jsonpCallback: 'CallBack',
  • success: function (data) {
  •   console.log(data);
  • }
  • });
  • </script>
  • CallBack({
  • "name": "hanzichi",
  • "age": 10
  • });

    复制代码


      以上代码是针对请求文件中写死了callback函数名的情况。因为请求的是json文件,json不是服务器端的动态语言不能进行解析,如果是php或者其他的服务器端语言,则不用写死函数名,比如下面这样:

  • <script src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
  • <script type="text/JavaScript">
  • $.ajax({
  • url: 'http://localhost:8080/test.php',
  • dataType: 'jsonp',
  • success: function (data) {
  •   console.log(data);
  • }
  • });
  • </script>
  • <?php
  • $jsondata = '{
  • "name": "hanzichi",
  • "age": 10
  • }';
  • echo $_GET['callback'].'('.$jsondata.')';
  • ?>

    复制代码


      当然类似的封装好的方法还有几种:

  • // 1
  • $.getJSON(":8080/test.php?callback=?", function(data) {
  • console.log(data);
  • });
  • // 2
  • $.get('http://localhost:8080/test.php', function(data) {
  • console.log(data);
  • }, 'jsonp');

    复制代码


      需要注意的是getJSON方法的请求地址url需要带上callback=?,因为jq对该方法进行封装的时候并没有默认回调函数变量名为callback,于是php中$_GET['callback']就找不到变量值了。

      而一般的jq方法url 中不用指定 callback 参数。对于 jQuery 中的 jsonp 来说,callback 参数是自动添加的。默认情况下,jQuery 生成的 jsonp 请求中 callback 参数是形如 callback=jQuery200023559735575690866_1434954892929 这种根据看似随机的名字,对应的就是 success 那个处理函数,所以一般不用特意处理。二如果要写死callback名的话,可以参照上文。


    登录/注册后可看大图

    2.png (8.46 KB, 下载次数: 0)

    下载附件  

     

  • 1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • JavaScript转换与解析JSON方法实例详解第1/2页

      JavaScript转换与解析JSON方法实例详解第1/2页

      2016-02-10 21:25

    • 未来编程的9大猜想:JavaScript不必亲自编写

      未来编程的9大猜想:JavaScript不必亲自编写

      2016-01-30 13:01

    • Objective-C与JavaScript交互的那些事

      Objective-C与JavaScript交互的那些事

      2016-01-30 13:00

    • 实用的javascript小技巧

      实用的javascript小技巧

      2016-01-25 19:05

    网友点评
    k