同源策略限制：
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果没有同源策略，攻击者可以通过JavaScript获取你的邮件以及其他敏感信息，比如说阅读私密邮件，发送虚假邮件，查看聊天记录等等。所谓同源是指，协议，域名，端口相同。三者只有有一个不相同，就认为不同源！
例如：域：http://store.company.com/dir/index.html
- 协议不同：https://store.company.com/dir/index.html
- 端口不同：http://store.company.com:81/dir/index.html
- 主机名不同：http://news.company.com/dir/index.html
跨域请求：
1. 对于主域相同而子域不同的例子，可以通过设置document.domain的办法来解决。
ajax不允许跨子域请求，但是iframe可以！可以通过提升域的方法来实现。
例如www.a.com/a.html和a.com/b.html为例，只需在a.html中添加一个b.html的iframe，并且设置两个页面的document.domain都为’a.com’（只能为主域名），两个页面之间即可互相访问了。
如果b.html要访问a.html，可在子窗口（iframe）中通过window.parent来访问父窗口的window对象。
例如www.a.com/a.html中的script：
document.domain='a.com';//提升域
varifr = document.createElement('iframe');
ifr.src = 'http://a.com/b.html';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
//获取iframe的document对象
//W3C的标准方法是iframe.contentDocument，
//IE6、7可以使用document.frames[ID].document
//为了更好兼容，可先获取iframe的window对象iframe.contentwindow
vardoc = ifr.contentDocument || ifr.contentwindow.document;
// 在这里操纵b.html
alert(doc.getElementById("test").innerHTML);
而a.com/b.html:
<!DOCTYPE >
<html>
<head>
<title></title>
<scripttype="text/javascript">
document.domain='a.com';//提升域
</script>
</head>
<body>
<h1id="test">Hello World</h1>
</body>
</html>
但是，这种方法只支持同一根域名下的页面！baidu.com和google.com的话，想想就好(●’◡’●)
复习：本来在同一个 origin 下，父页面可以通过 iframe.contentwindow 直接访问 iframe 的全局变量、DOM 树等，iframe 可以也通过 parent/top 对父页面做同样的事情。
不同 origin 下，还有一种标准的方法是通过HTML5的 .postMessage() 互相通信，不标准的方法是利用 location.hash 等奇技淫巧。
JSONP：
JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。
原理：含有src属性的标签都可以跨域，如img、script、iframe！
本质：只是执行了javascript脚本！
简单来说，就是在客户端声明回调函数之后，客户端通过script标签向服务器跨域请求数据，然后服务端返回相应的数据并动态执行回调函数（返回带数据参数的回调函数的字符串，在客户端刚好被动态执行了！）。
看实例：
<script type="text/javascript"> function jsonpCallback(result) { alert(result); } var JSONP=document.createElement("script"); JSONP.type="text/javascript"; JSONP.src="你的请求地址?callback=jsonpCallback";//在请求的地址后面带上回调函数，客户端声明的jsonpCallback document.getElementsByTagName("head")[0].appendChild(JSONP); </script>
或者：
<script type="text/javascript"> //注意：这个回调函数需要声明在前，js链接调用在后！ function jsonpCallback(result) { alert(result); } </script>
<script type="text/javascript" src="你的请求地址?callback=jsonpCallback"></script>
后台返回的大概结果：
jsonpCallback({a:1,b:2});//类似的字符串，在js脚本中可以被动态执行，此来就可以拿到数据啦
但是，相应的弊端也出现了！这种方法每当页面加载就执行，而不是按事件触发去动态执行的！因而出现了jsonp的封装，在需要的时候动态调用！
jsonp封装：
大概形式：jsonp(url,data,callback)
大概步骤思路：
- 动态添加script标签，并将其加入页面中
- 组装传入的数据参数data
- 给每个回调函数唯一命名，设置回调请求成功或失败之后的处理
- 最后无论请求成功还是失败，都要删除创建的javascript标签。
示例：（转自博文 自己封装的JSONP跨域函数：http://blog.csdn.net/liusaint1992/article/details/50959571）
function JSONP(url,config){
var data = config.data || [];
var paraArr=[],paraString='';//get请求的参数。
var urlArr;
var callbackName;//每个回调函数一个名字。按时间戳。
var script,head;//要生成script标签。head标签。
var supportLoad;//是否支持 onload。是针对IE的兼容处理。
var onEvent;//onload或onreadystatechange事件。
var timeout = config.timeout || 0;//超时功能。
for(var i in data){
if(data.hasOwnProperty(i)){
paraArr.push(encodeURIComponent(i) + "=" +encodeURIComponent(data[i]));
}
}
urlArr = url.split("?");//链接中原有的参数。
if(urlArr.length>1){
paraArr.push(urlArr[1]);
}
callbackName = 'callback'+new Date().getTime();
paraArr.push('callback='+callbackName);
paraString = paraArr.join("&");
url = urlArr[0] + "?"+ paraString;
script = document.createElement("script");
script.loaded = false;//为了实现IE下的onerror做的处理。JSONP的回调函数总是在script的onload事件（IE为onreadystatechange）之前就被调用了。因此我们在正向回调执行之时，为script标签添加一个属性，然后待到onload发生时，再检测有没有这个属性就可以判定是否请求成功，没有成功当然就调用我们的error。
//将回调函数添加到全局。
window[callbackName] = function(arg){
var callback = config.callback;
callback(arg);
script.loaded = true;
}
head = document.getElementsByTagName("head")[0];
head.insertBefore(script,head.firstChild) //chrome下第二个参数不能为null
script.src = url;
supportLoad = "onload" in script;
onEvent = supportLoad ? "onload" : "onreadystatechange";
script[onEvent] = function(){
if(script.readyState && script.readyState !="loaded"){
return;
}
if(script.readyState == 'loaded' && script.loaded == false){
script.onerror();
return;
}
//删除节点。
(script.parentNode && script.parentNode.removeChild(script))&& (head.removeNode && head.removeNode(this));
script = script[onEvent] = script.onerror = window[callbackName] = null;
}
script.onerror = function(){
if(window[callbackName] == null){
console.log("请求超时，请重试！");
}
config.error && config.error();//如果有专门的error方法的话，就调用。
(script.parentNode && script.parentNode.removeChild(script))&& (head.removeNode && head.removeNode(this));
script = script[onEvent] = script.onerror = window[callbackName] = null;
}
if(timeout!= 0){
setTimeout(function() {
if(script && script.loaded == false){
window[callbackName] = null;//超时，且未加载结束，注销函数
script.onerror();
}
},timeout);
}
}
jQuery中对JSONP的实现：
jQuery中提供了两个方法来实现：$.getJSON()和$.ajax(),常用的是底层的$.ajax()方法！
1.$.getJSON()：
$.getJSON(url?jsoncallback=?,fn(data){…})
关键点：在url后带上参数jsoncallback=?，后台返回随机命名的callback函数！会被Jquery自动替换成回调方法的名称!
<script type="text/javascript"> $.getJSON("http://localhost:3856/GetItemCates.ashx/GetItemCats?gateid=20&format=json&jsoncallback=?",function (data) { var myprops = data.itemcats_get_response.item_cats.item_cat; $.each(myprops,function (index,item) { $("ul").append("<li>" + item.name + "," + item.cid + "</li>") }); } ); </script>
2. $.ajax():
$.ajax({
url: url,
data: data,
dataType : “jsonp”,
jsonp: “jsoncallback”,
jsonpCallback:”success_jsonpCallback”,
success: callback
});
$.ajax({
type : "get",//jquey是不支持post方式跨域的
async:false,url :"http://api.taobao.com/apitools/ajax_props.do",//跨域请求的URL
dataType : "jsonp",//传递给请求处理程序，用以获得jsonp回调函数名的参数名(默认为:callback)
jsonp: "jsoncallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
jsonpCallback:"success_jsonpCallback",//成功获取跨域服务器上的json数据后,会动态执行这个callback函数
success : function(json){
alert(json);
}
});
以上的jsonp和jsonpCallback可以自定义回调函数名和参数名！
注意：
- 需要服务器端的支持才行。
- 只支持get请求
CORS跨域资源共享（真正跨域）
跨域资源共享（CORS ）是一种网络浏览器的技术规范，它为Web服务器定义了一种方式，允许网页从不同的域访问其资源。 CORS就是为了让AJAX可以实现可控的跨域访问而生的
CORS与JSONP相比:
- JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。
- 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。
- JSONP主要被老的浏览器支持，但它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS。
本质是HTML5 xhr level2原生ajax请求！
只需要在后台中加上响应头来允许域请求！在被请求的Response header中加入以下设置，就可以实现跨域访问了！
//指定允许其他域名访问
'Access-Control-Allow-Origin:*'//或指定域
//响应类型
'Access-Control-Allow-Methods:GET,POST'
//响应头设置
'Access-Control-Allow-Headers:x-requested-with,content-type'
后台的娃助我(●’◡’●)
总结：整理了同源策略限制，出现了跨域请求的需求，原生传统的跨域请求方式，原生js和jQuery中对跨域的处理（JSONP）,以及HTML5 中的CORS跨域资源共享。系统条理得梳理好传说中的跨域了！o(^▽^)o