jsonP

yuntaowuhai

于 2014-03-25 18:02:22 发布

阅读量441

点赞数

本文链接：https://blog.csdn.net/yuntaowuhai/article/details/22082523

版权

json是一种数据格式，jsonp是非正式传输协议。

jsonp里传输的就是json的数据格式，只是在发送请求时多加一个参数，其值为回调函数。

后台程序在获得该回调函数后，把准备好的json数据拼接到回调函数里面

前台代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
</head>
<body>

    <script type="text/javascript">
    // 得到航班信息查询结果后的回调函数
    var flightHandler = function(data){
        alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
    };
    // 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
    var url = "http://192.168.1.173/remote.php?code=CA1998&callback=flightHandler";
    // 创建script标签，设置其属性
    var script = document.createElement('script');
    
    script.setAttribute('src', url);
    alert(script);
    // 把script标签加入head，此时调用开始
    document.getElementsByTagName('head')[0].appendChild(script); 
    </script>

</body>
</html>

后端的php代码如下：

<?php
if(isset($_GET['callback'])){
	$callback = $_GET['callback'];
	$code = $_GET['code'];
	
	$str = $callback.'({'.'\'code\':\''.$code.'\',\'price\':1789,})';
	echo $str;

}

注解：在客户端浏览器中通过js产生一个script元素：

var url = "http://192.168.1.173/remote.php?code=CA1998&callback=flightHandler";
var script = document.createElement('script');
script.setAttribute('src', url);
 // 把script标签加入head，此时调用开始
document.getElementsByTagName('head')[0].appendChild(script); 





这个<scirpt src='XXXXX'></script>中的src引用的是一个服务器端脚本（php echo的一个字符串），该字符串必须符合客户端javascript语法

服务器端脚本先获取get过来的callback参数XXX，然后以这个callback值作为客户端函数名XXX（｛json数据｝）；
这样就会在客户端浏览器中调用客户端中的javascript函数了，并且这个javascript函数可以获取服务器端传递过来的数据（｛json数据｝），解决了javascript跨域

yuntaowuhai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsonP

json是一种数据格式，jsonp是非正式传输协议。jsonp里传输的就是json的数据格式，只是在发送请求时多加一个参数，其值为回调函数。后台程序在获得该回调函数后，把准备好的json数据拼接到回调函数里面前台代码如下 // 得到航班信息查询结果后的回调函数 var flightHandler = function(data){
复制链接

扫一扫