正文
JS跨域方法及原理
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
 JS跨域分析判断 |
JS跨域：在不同域之间，JS进行数据传输或通信。比如ajax向不同的域请求数据、JS获取iframe中的页面中的值（iframe内外不同域）
只要协议、端口、域名有一个不同则被当做不同的域
下表给出了相对于http://www.dmeiyang.com同源检测结果：
| Jsonp跨域方法及原理 |
在JS中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。
引入不同JS文件实现
在http://localhost:2014站点中有一个页面，现在需要请求http://localhost:2013/CrossDomain/GetJsonpData的数据。很明显这两不在一个域上，为了实现这个功能，我们可以这样写代码：
<script type="text/javascript">
function dosomething(jsondata) {
console.log(jsondata);
}
</script>
<script src="http://localhost:2013/CrossDomain/GetJsonpData?jsoncallback=dosomething"></script>
这里我们看到在请求地址后面有一个jsoncallback参数，惯例是使用callback这个参数名，但是如果http://localhost:2013这个站点不是你自己能控制的，就只能按照提供数据那一方的规定格式来操作了
下面是http://localhost:2013/CrossDomain/GetJsonpData定义的规则和返回数据
public string GetJsonpData(string jsoncallback)
{
//返回数据格式：jsoncallback({"Name":"dmeiyang","Age":20}) System.Text.StringBuilder sb = new System.Text.StringBuilder(); sb.Append(jsoncallback);
sb.AppendFormat("({0})", new { Name = "dmeiyang", Age = }.ToJsonByJsonNet()); return sb.ToString();
}
通过JQuery实现
后台代码不变，前台部分代码如下：
<div id="container">
<div>我要访问http://localhost:2013站点的数据</div>
<div>
<a class="at-jsonp" href="javascript:void(0);">点击一下，给我数据~</a>
</div>
<div>
<span>其他站点数据：</span>
<span class="data-jsonp" style="color: red"></span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#container .at-jsonp').on('click', function () {
$.ajax({
async: false,
url: "http://localhost:2013/CrossDomain/GetJsonpData",
type: "GET",
dataType: 'jsonp',
//jsonp的值自定义,如果使用jsoncallback,那么服务器端,要返回一个jsoncallback的值对应的对象.
jsonp: 'jsoncallback',
//要传递的参数,没有传参时，也一定要写上
data: { jsoncallback: "jsoncallback" },
timeout: ,
//返回Json类型
contentType: "application/json;utf-8",
//服务器段返回的对象包含name,data属性.
success: function (result) {
$('#container .data-jsonp').text('名称：' + result.Name + '-->年龄：' + result.Age);
},
error: function (jqXHR, textStatus, errorThrown) {
console.log(textStatus);
}
});
})
})
</script>
| 通过修改document.domain来跨子域 |
浏览器遵循同源策略。第一个限制是：不能通过ajax请求不同域下的数据（除非使用Jsonp）；第二个限制是：不同域框架（iframe内外）之间不能进行js交互
例如：http://localhost:2014页面（A页）中放置一个iframe，让其加载http://localhost:2013/CrossDomain/iframetest页面（B页）。因为两者不同域，所以A页面是无法通过JS获取B页面里的内容的（当然你可以获取一个几乎无用的window对象）
为了实现上述情况两个页面之间可以互相调取数据，需要设置document.domain=“自身或者更高一级的父域”（两个页面都需要设置）
