JSONP跨域

最新推荐文章于 2024-08-20 11:16:35 发布

nieyanlong

最新推荐文章于 2024-08-20 11:16:35 发布

阅读量351

点赞数

分类专栏： JS 文章标签： jsonp javascript html callback 测试 json

本文链接：https://blog.csdn.net/nieyanlong/article/details/7204867

版权

JS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

JSONP (JSON with Padding)是一个简单高效的跨域方式，HTML中的script标签可以加载并执行其他域的javascript，于是我们可以通过script标记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据，那么在域B的页面pageB中我以JavaScript的形式声明pageA 需要的数据，然后在 pageA中用script标签把pageB加载进来，那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函数，pageB加载完之后会执行pageA中定义的函数，所需要的数据会以参数的形式传递给该函数。JSONP易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，JSONP是非常合适的选择。接下来通过一个小例子,讲解下JSONP的跨域方式。

域A为：http://a.com， pageA为：a.html，具体代码如下：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    <html>  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <title>测试JSONP跨域</title>  
    <script src="http://a.com/js/jq.js"></script>  
    </head>  
    <body>  
    <div>  
        <div align="center">  
            <h3>测试JSONP是否成功？</h3>  
            <p id="mydata">here</p>  
        </div>  
    </div>  
    </body>  
    </html>  
    <script type="text/javascript">  
        $.getJSON("http://b.com/b.php?callBack=?", {username: 'nieyanlong', password:'123456'}, function(result){  
            alert(result.content);  
            $("#mydata").html(result.content);  
        });  
    </script>

域B为：http://b.com， pageB为：b.php，具体代码如下：

    <?php  
    $returnData = array('content' => 'success', 'content' => "{$_GET['username']}测试JSONP跨域成功");  
    echo $_GET['callBack'] . '(' . json_encode($returnData) . ')';  
    ?>