AJAX跨域请求和CORS跨域资源共享
同源策略限制：同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果没有同源策略，攻击者可以通过JavaScript获取你的邮件以及其他敏感信息，比如说阅读私密邮件，发送虚假邮件，查看聊天记录等等。所谓同源是指，协议，域名，端口相同。三者只有有一个不相同，就认为不同源！ 例如：域：http://store.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跨域函数：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()：
关键点：在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({
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可以自定义回调函数名和参数名！ 注意：
CORS跨域资源共享（真正跨域）跨域资源共享（CORS ）是一种网络浏览器的技术规范，它为Web服务器定义了一种方式，允许网页从不同的域访问其资源。 CORS就是为了让AJAX可以实现可控的跨域访问而生的 CORS与JSONP相比:
本质是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 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |