JSONP跨域

发布时间：2020-12-16 19:56:49 所属栏目：百科来源：网络整理

导读：JSONP (JSON with Padding)是一个简单高效的跨域方式，HTML中的script标签可以加载并执行其他域的javascript，于是我们可以通过script标记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据，那么在域B的页面pageB中我以JavaScript的形式声明

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) . ')';  
    ?>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!