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 ?>
---------------
访问结果: