json与jsonp的区别

2017-11-17  本文已影响0人  马大哈tt

其实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。

参考文章:https://www.cnblogs.com/iovec/p/5312464.html

上一篇 下一篇

猜你喜欢

热点阅读