• jquery中使用jsonp


    1 .关于jsonp的原理等,请看下面的文章,说的很明白.

    http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html#top

    以及

    http://www.cnblogs.com/yuzhongwusan/archive/2012/12/11/2812849.html

    2 .本文主要探讨在jquery中如何快速的使用jsonp

    服务器端脚本: json_r01.php

     1 <?php
     2 
     3 $callback = $_REQUEST['callback'];
     4 
     5 $arr = array();
     6 $arr['newYear'] = $_REQUEST['year'] + 6;
     7 $arr['msg'] = $_REQUEST['name'] . '测试信息';
     8 
     9 //json编码
    10 $json = json_encode($arr);
    11 
    12 //返回一个调用函数的字符串: 例如 test({'name': 'lucy'})
    13 
    14 echo $callback . '(' . $json . ')';

    01-通过 第3行代码 可以获取 我们约定的 服务器返回的 调用客户端js函数的函数名(具体可以看上面的链接)

    02-第14行输出的 是一个 类似  test({'name' : 'lucy'}) 的字符串.

    因为jsonp 是通过 script标签的src属性的跨域性实现的 .   相当于通过script标签的src属性请求一个js文件.

    这个js文件 的内容 就是  test({'name' : 'lucy'}).

    如果此时我们本地定义了一个函数 test() .

    那么但我们通过script的src属性请求一个远程的js文件时, 这个js文件的内容是 test({'name':'lucy'}) , 那么就会调用这个本地的test()函数

    3. $.post()方法实现

     1 <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
     2 <script type="text/javascript">
     3     var param = new Object();
     4     param.year = 2010;
     5     param.name = '李刚';
     6 
     7     $.post('json_r01.php?callback=?', param, function(data, textStatus, xhr) {
     8         console.log(data);
     9         console.log(data.newYear);
    10         console.log(data.msg);
    11     },'jsonp');
    12 
    13 </script>

    结果: 图片01

    注意:

    01 .使用$.post() ,需要

         1) 在url地址后面加上 ?callback=?

             这里callback的值是? 是因为 jquery会随机给callback赋值 ; 通常情况下 不需要给callback指定一个值.

            从图片01 中可以看出  callback已经有一个随机的值是jQuery19106356678668554155_1470797830605

            服务器端 响应的函数 的 函数名也是

         jQuery19106356678668554155_1470797830605({"newYear":2016,"msg":"u674eu521au6d4bu8bd5u4fe1u606f"})

      

      2) 要求返回的数据格式写上 'jsonp' 

    02 .使用jquery后 简化了我们的工作

         1)不需创建一个访问远程文件的script标签

         2)不需要在本地创建一个以callback 的值为 名字的 本地js函数 .

            我们直接在 $.post()方法的 回调函数中 就可以使用 返回来的 字符串 test({'name' : 'lucy'}) 中的json数据

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

    如果我们设置了 callback的值是 test01

     1 <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
     2 <script type="text/javascript">
     3     var param = new Object();
     4     param.year = 2010;
     5     param.name = '李刚';
     6 
     7     $.post('json_r01.php?callback=test01', param, function(data, textStatus, xhr) {
     8         console.log(data);
     9         console.log(data.newYear);
    10         console.log(data.msg);
    11     },'jsonp');
    12 
    13 </script>

    结果:图片02

    即使我们设置了 callback = test01 . jquery仍然是 用随机的代替了.

    所以至少在 $.post()方法中, 给 url中的添加查询字符串 ?callback=? 就可以了.

    4. $.getJson()的实现

    客户端代码:

     1 <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
     2 <script type="text/javascript">
     3     var param = new Object();
     4     param.year = 2010;
     5     param.name = '李刚';
     6 
     7     $.getJSON('json_r01.php?callback=?', param, function(data, textStatus, xhr) {
     8         console.log(data);
     9         console.log(data.newYear);
    10         console.log(data.msg);
    11     });
    12 
    13 </script>

    结果: 图片03

    注意:使用 $.getJSON()方法

    01 . 只需要在 url地址后面加上一个请求字符串 ?callback=? 就可以了.

    02 .从图片03中可以看出 返回的函数名也是随机生成的 .

    03 .$.getJSON()是通过get的方式传值, 可以看到name 和 year 也是以请求字符串的形式 附在 url地址尾部.

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

    如果我们给 callback设置一个具体的值 . 如 callback=test01

     1 <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
     2 <script type="text/javascript">
     3     var param = new Object();
     4     param.year = 2010;
     5     param.name = '李刚';
     6 
     7     $.getJSON('json_r01.php?callback=test01', param, function(data, textStatus, xhr) {
     8         console.log(data);
     9         console.log(data.newYear);
    10         console.log(data.msg);
    11     });
    12 
    13 </script>

    结果:图片04

    注意:

    01:此时classback = test01 . 被传递到服务器端,  服务器端 返回的函数名也是 test01()

    02: 但是 $.getJSON()的回调函数无法识别. 在回调函数中无法说使用 data.msg输出信息.

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

    总结:

    在$.getJSON()中只需要在 url中加上一个请求字符串 ?callback = ? 就可以了. 且 callback的值只能是?

    5. $.ajax()方法实现

    前台代码:

     1 <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
     2 <script type="text/javascript">
     3     var param = new Object();
     4     param.year = 2010;
     5     param.name = '李刚';
     6 
     7 
     8     $.ajax({
     9         url: 'json_r01.php',
    10         type: 'POST',
    11         dataType: 'jsonp',
    12         data: param,
    13         jsonp: 'callback',
    14         success: function(data){
    15             console.log(data);
    16             console.log(data.newYear);
    17             console.log(data.msg);
    18         }
    19     })
    20 
    21 
    22 
    23 </script>

    结果:图片05

    注意:

    01 --url中不需要设置请求字符串

    02--dataType: 'jsonp',

    03--jsonp: 'callback'

    04--不需要设置callback的值, jquery自动有了一个随机的值.

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

    自己设置callback的值

     1 <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
     2 <script type="text/javascript">
     3     var param = new Object();
     4     param.year = 2010;
     5     param.name = '李刚';
     6 
     7 
     8     $.ajax({
     9         url: 'json_r01.php',
    10         type: 'POST',
    11         dataType: 'jsonp',
    12         data: param,
    13         jsonp: 'callback',
    14         jsonpCallback:'test01',
    15         success: function(data){
    16             console.log(data);
    17             console.log(data.newYear);
    18             console.log(data.msg);
    19         }
    20     })
    21 
    22 
    23 
    24 </script>

    结果:图片06

    注意:

    01-这里只是多设置了一个jsonpCallback:'test01',

        此时图片06中的 返回的函数名是 test01()

    6. 最新的测试用例模拟:

    请求端:

     ---------

    接收端:

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

    可见请求端 和 接收端 是跨域的.

    6-1: 一般的ajax请求: 因为跨域,无法访问.

    因为ajax无法跨域请求.

    ----------

    noJsonp.php :请求端:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>    </title>
     6     <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
     7     <script type="text/javascript">
     8         var param = new Object();
     9         param.year = 2010;
    10         param.name = '李刚';
    11 
    12 
    13         $.ajax({
    14             url: 'http://www.a.com/nojson_return.php',
    15             type: 'POST',
    16             dataType: 'json',
    17             data: param,
    18             success: function(data){
    19                 console.log(data);
    20                 console.log(data.newYear);
    21                 console.log(data.msg);
    22             }
    23         })
    24 
    25 
    26 
    27     </script>
    28 </head>
    29 <body>
    30 
    31 </body>
    32 </html>

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

    接收端: nojson_return.php

     1 <?php
     2 
     3 
     4 $arr = array();
     5 $arr['newYear'] = $_REQUEST['year'] + 6;
     6 $arr['msg'] = $_REQUEST['name'] . '测试信息';
     7 
     8 //json编码
     9 $json = json_encode($arr);
    10 
    11 
    12 echo $json;
    13 
    14 ?>

    -----------

    访问的结果:

    跨域没有数据.

    可见,ajax 无法跨域访问数据.

    但是. http访问 是可以的.

    例如:

    ---

    6-2:通过jsonp , ajax获取数据.

    ----

    请求端: jsonp.php

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>    </title>
     6     <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
     7     <script type="text/javascript">
     8         var param = new Object();
     9         param.year = 2010;
    10         param.name = '李刚';
    11 
    12 
    13         $.ajax({
    14             url: 'http://www.a.com/jsonp_return.php',
    15             type: 'POST',
    16             dataType: 'jsonp',
    17             data: param,
    18             jsonp: 'callback',
    19             success: function(data){
    20                 console.log(data);
    21                 console.log(data.newYear);
    22                 console.log(data.msg);
    23             }
    24         })
    25 
    26 
    27 
    28     </script>
    29 </head>
    30 <body>
    31 
    32 </body>
    33 </html>

    -----------

    接收端: jsonp_return.php

     1 <?php
     2 
     3 $callback = $_REQUEST['callback'];
     4 
     5 $arr = array();
     6 $arr['newYear'] = $_REQUEST['year'] + 6;
     7 $arr['msg'] = $_REQUEST['name'] . '测试信息';
     8 
     9 //json编码
    10 $json = json_encode($arr);
    11 
    12 //返回一个调用函数的字符串: 例如 test({'name': 'lucy'})
    13 
    14 echo $callback . '(' . $json . ')';
    15 
    16 ?>

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

    访问结果:

  • 相关阅读:
    scratch3.0故事背景切换效果实例解读
    scratch3.0应用实例解读,宠物店的故事,买宠物了
    选配电脑,到底是选Intel还是选配AMD,没有比较就没有伤害
    开发环境搭建
    JAVA 枚举类型
    Oracle 关闭session脚本,用于处理表数据被锁定问题
    Java
    B/S导出Excel文件名IE浏览器下乱码问题
    转载:利用URLScan工具过滤URL中的特殊字符(仅针对IIS6)-- 解决IIS短文件名漏洞
    转载:Js中的window.parent ,window.top,window.self 详解
  • 原文地址:https://www.cnblogs.com/cbza/p/5756474.html
Copyright © 2020-2023  润新知