JSONP跨域

来源：互联网发布：linux在根目录下新建编辑：程序博客网时间：2024/05/23 12:05

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