JSONP跨域读取数据

json是一种数据传输格式,而jsonp是一种数据获取的方式,没有什么相关性。jsonp是一种轻量级的数据传输方式,

为什么要使用jsonp呢?

为什么我们从不同的域(网站)访问数据需要一个特殊的技术(JSONP )呢?这是因为同源策略。

同源策略,它是由Netscape提出的一个著名的安全策略,现在所有支持JavaScript 的浏览器都会使用这个策略。

什么是同源策略?

同源策略是web安全策略中的一种,非常重要。 
同源策略明确规定:不同域的客户端在没有明确授权的情况下,不能读写对方的资源。 
简单说来就是web浏览器允许第一个页面的脚本访问访问第二个页面的数据,但是也只有在两个页面有相同的源的时候,如果不同源则需要授权。源:URI(统一资源标识符)、主机名、端口号组合而成的。这个策略可以阻止一个页面上恶意脚本通过页面DOM对象获得访问另一个页面的敏感信息的权限。


使用:这里小编建立了一个简单的demo,继续往下看看吧,帮助你学到知识呦:
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsonp跨域访问</title>
    <script src="../month6/layui/jquery-3.2.0.min.js"></script>
</head>
<body>
<input type="button" value="获取" id="sigin">
<span id="get_value">000</span>
</body>
</html>
<script>
    $('#sigin').on('click',function(){
        //get发出请求
//        $.getJSON("http://192.168.145.133/index.php?jsoncallback=?",function(data){
//            $('#get_value').html(data);
//        });

        //ajax发出请求
        $.ajax({
            url:"http://192.168.145.133/index.php",
            dataType:'jsonp',
            data:'1',
            jsonp:'jsoncallback',
            success:function(data){
        console.log(data);
                $('#get_value').html(data);
            }
        })
    })


</script>

ps:主要流程就是当点击“获取”之后,向另一个系统的页面发出请求,?jsoncallback是请求之后产生的回调。

demo中有get发出的请求 ajax请求,下面我们去请求的index.php页面

index.php:

<?php

header('Content-type: application/json');//获取回调函数名

$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);//json数据($_REQUEST['回调函数的名称'])

$json_data = '["customername1","customername2"]';//输出jsonp格式的数具

echo $jsoncallback . "(" . $json_data . ")";//这里是你回调的jsonp数据(语法就是这样呦)

?>

那也许我们会疑问,为什么要用$_REQUEST接回调的名字呢?
$_GET变量接受所有以get方式发送的请求,及浏览器地址栏中的?之后的内容
$_POST变量接受所有以post方式发送的请求,例如,一个form以method=post提交,提交后php会处理post过来的全部变量
而$_REQUEST支持两种方式发送过来的请求,即
postget它都可以接受,显示不显示要看传递方法,get会显示在url中(有字符数限制),post不会在url中显示,可以传递任意多的数据(只要服务器支持);
ps:   http://www.runoob.com/json/json-jsonp.html  (这里有joinp的详细使用)!
有什么不对的地方,还请各位php大神指教呦!

猜你喜欢

转载自blog.csdn.net/qq_41718455/article/details/80515078