JSONP原理与实践-优快云博客

本文链接：https://blog.youkuaiyun.com/xuandaijian/article/details/53363650

跨域：只要协议、域名、端口有任何一个不同，都被当作是不同的域。比如www.a.com和www.b.com,在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。另外一种实现方式是跨域资源共享 CORS；这里只做php与jsonp的简单使用，CORS可以通过设置header头使用。

JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JsonP</title>
</head>
<body>
    <h1>www.site.php</h1>

</body>
<script type="text/javascript">
    function callback(data) {
        console.log('jsonp');
        alert(data.message);
    }
    //添加<script>标签的方法
    function addScriptTag(src){
        var script = document.createElement('script');
            script.setAttribute("type","text/javascript");
            script.src = src;
            document.body.appendChild(script);
    }

    window.onload = function(){
        addScriptTag("http://www.php7.com/code/jsonp/jsonp.php?jsonp=callback");
    }
</script>
</html>

<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsonp']);
//json数据
// $json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
// echo $jsoncallback . "(" . $json_data . ")";

$arr = array('message'=>'www.php7.com');
echo $jsoncallback.'('.json_encode($arr).')';

JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。

JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

JsonP跨域请求