其实json和jsonp本质上都是字符串,只是jsonp是外层包裹了一层函数。
json
下面是jquery的ajax请求,数据类型为json,它是以json格式在前后台进行数据的传输,它与局限性就是不能跨域请求,这是为了网络数据的安全所制定的规则。
$.ajax({
type: "post", // 数据提交类型
url: "danmu.php",// 请求地址 同源服务器/浏览器安全设置
data: {word:"abc",username:"ltt"}, // 发送数据
dataType: "json", // 返回数据的类型
async: true, // 是否异步,true为异步
// success为数据加载完成后的回调函数
success: function(data){
var show = document.getElementById('show');
for(i in data){
show.innerHTML += data[i]+"<br>";
}
console.log(data);
}
});
这是后台部分,首先判断前台是否请求数据,如果请求了,就将前台需要的数据返回给前台。
注意:返回给前台的数据一定要转成json格式的,通过json_encode将数组转换成json格式
<?php
if(!empty($_POST['word'])){
$arr = [];
$word = htmlspecialchars($_POST['word']);
$username = htmlspecialchars($_POST['username']);
$arr[] = $word;
$arr[] = $username;
$fp = fopen("danmu.txt","a+");
fwrite($fp,$word."\n");
fclose($fp);
echo json_encode(array($word));
}
?>
由于json不能跨域请求,于是就有了jsonp
jsonp
大家都知道script标签是可以跨域请求的,jsonp的原理就是通过script的src,将函数作为src请求地址的参数来传递数据,所以jsonp只有get一种传输方式。
下面是jsonp的数据交互,首先定义一个回调函数,定义dataType类型为jsonp,将函数作为参数传输给后台,它与json相比是多了一层函数。
<script type="text/javascript">
// 自定义的回调函数
function show(val){
document.getElementById("show").src=val[0].src;
}
$.ajax({
type:"get",
url:"myphp.php",
dataType:"jsonp", // 现在时jsonp请求,这个时候,jquery使用的是script标签发送请求
jsonp:"callmyphp", // 后台用来接受函数名的变量名
jsonpCallback:"show",// 自定义的回调函数名
async:true,
});
至于什么时候用json什么时候用jsonp?我就一个原则,能使用json的时候都是用json,只有必须要跨域请求时才使用jsonp。