jsonP

发布时间：2020-12-16 19:45:42 所属栏目：百科来源：网络整理

导读：json是一种数据格式， jsonp是非正式传输协议。 jsonp里传输的就是json的数据格式，只是在发送请求时多加一个参数，其值为回调函数。后台程序在获得该回调函数后，把准备好的json数据拼接到回调函数里面前台代码如下 !DOCTYPE html PUBLIC "-//W3C//DTD

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跨域

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!