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 ?>

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

访问结果: