跨域方法总结（一），JSONP
前言博主博客：Stillwater的博客 ??本文介绍了什么是跨域，为什么要跨域，以及跨域的一种常用方法JSONP的原理。 一、什么是跨域？为什么要跨域？什么是跨域？??既然是跨域，那么肯定是从一个域到另一个域。那么首先要知道满足什么条件才是同一个域。如果两个页面拥有相同的协议，端口和域名，那么这两个页面就属于同一个源（origin），JavaScript允许这种同源页面的数据互相通信。例如你要访问百度首页。
注：一般端口默认为不显示，但是你可以尝试输入以下网址，发现无法访问。因为80端口默认为http协议端口。
??现在知道了什么是同一个域，那么就可以解释什么是跨域。只要协议、域名、端口有任何一个不同，都被当作是不同的域，之间的请求就是跨域操作。 为什么要跨域？??相信很多人都听过，同源策略。出于安全考虑，浏览器对JavaScript的很多功能进行了限制，其中一条就是，不同域之间不予许进行数据通信。虽然补全了安全漏洞，但是这个限制给前端开发带来了许多不便。例如：
??百度知道和百度文库大家都不陌生，都是百度开发的web服务。虽然这两个都是李彦宏的，但是现在告诉他，由于你这两个域名的三级域名不一样，不允许相互数据通信。你说不行就不行？于是就有像李彦宏这样的大牛搞出一些黑科技专门用来跨域通信。JSONP就是其中之一。
二、什么是JSONP？顾名思义：
??JSONP（JSON with Padding），JSON是一种轻量级的数据交换格式。而Padding在这里可以翻译为 三、JSONP原理
??这里区分两个概念，当我们用浏览器打开 {"Name": "小明","Id": 1823,"Rank": 7
}
??这个JSON数据可能是依据传过去URL的查询参数动态产生的。这个时候，把 script元素的src属性设成一个回传JSON的URL是可以想像的，这也代表从HTML页面通过script元素抓取JSON是可能的。然而，一份JSON文件并不是一个JavaScript程序。为了让浏览器可以在 script元素运行，从src里URL回传的必须是可运行的JavaScript。在JSONP的使用模式里，该URL回传的是由函数调用包起来的动态生成JSON，这就是JSONP的“填充（padding）”或是“前辍（prefix）”的由来。 <script type="text/javascript"
src="http://server2.example.com/RetrieveUser?UserId=1823&jsonp=parseResponse">
</script>
??服务器会在传给浏览器前将JSON数据填充到回调函数（parseResponse）中。浏览器得到的回应已不是单纯的数据叙述而是一个脚本。在本例中，浏览器得到的是： {
parseResponse(
{
"Name": "小明","Rank": 7
})
}
??也就是说，一般情况下浏览器向服务器发送请求得到的都是数据（文本，XML，JSON），但是当采用JSONP技术时候，浏览器向跨域服务器发送请求，得到的是回调函数包住的JSON。此处JSON作为参数传入回调函数，然后再返回给浏览器。 再举个例子：浏览器端： <body>
<!--声明jsonpcallback回调函数，参数为json数据-->
<script type="text/javascript">
function jsonpcallback(json) {
console.log(json);
}
<!--创建一个<script>标签，设置src为一个跨域的URL，并指定回调函数为jsonpcallback-->
var s = document.createElement('script');
s.src="http://localhost:8080/test.php?callback=jsonpcallback";
document.body.appendChild(s);
</script>
</body>
服务器端： <?php
$jsondata = '{
"name": "Stillwater","age": 12
}';
echo $_GET['callback'].'('.$jsondata.')';
?>
服务器返回浏览器： jsonpcallback(
{
"name": "Stillwater","age": 12
}
)
??在这个例子中，浏览器向服务器发出跨域请求 http://localhost:8080/test.ph... 。请求一个json数据,{"name": "Stillwater","age": 12} 。并且告诉了服务器回调函数的名字。服务器接收到请求后，就将json数据作为参数填充到回调函数中，返回给浏览器。最终返回一个填充了json数据的回调函数。 四、总结
参考链接：
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |