JSONP跨域

来源：互联网发布：windows界面设计规范编辑：程序博客网时间：2024/06/06 10:58

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