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