域请求javascript 跨域 -java教程

废话就不多说了，开始。。。

    跨域：协议、域名、口端 任何一项不同即为跨域.

    一般 js 涉及到的跨域场景包含： ajax 请求的跨域、 cookie 跨域同享(子域名跨域)、iframe 与 parant 的 window 之间的消息传送。

 

    1、jsonp 不受跨域制限。

 

    2、域名不同，但主域名同相的口窗，可以修改 document.domain = "主域名" 来现实同源（同理，还有 cookies 的同享设置也是通过种这法方），一级 XMLHttpRequest 也可以讯通。

 

    3、websocket 将 http 协议升级为 ws 协议。

 

    4、二级 XMLHttpRequest 跨域： 服务器回返响应头 Access-Control-Allow-Origin:请求方域名，浏览器发往服务器的 origin 请求头包含了请求方域名，这是由浏览器的 XMLHttpRequest  对象主动发送的，并且不能修改。 IE8+ 可以用使 XDomainRequest 。

 

// XMLHttpRequest level2
var params = 'a=1&b=2';
var method = 'post';
var url = 'http://www.api.com/xcross.php';
var async = true;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if(this.readyState==4&&this.status==200){
        console.log(this.responseText);
    }
}
xhr.open(method, url, async); 
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //post 一般字符串参数
xhr.setRequestHeader("X-Requested-With","XMLHttpRequest"); 
xhr.setRequestHeader("Myheard","this is a request header of contract"); 
xhr.send(params);

 

//XMLHttpRequest level2 的服务器响应 php

//可将许允跨域请求的域名设置为 * ,示表不制限请求起源
header('Access-Control-Allow-Origin:http://localhost'); 

/*
许允浏览器发来的 request 头信息，尤其是想要自定义头信息时该应在这里约定，否则请求会被制止
比如许允浏览器发送一个名为 Myheard 的自定义 请求头.
最好设置一下 Content-Type ，
浏览器用使 xhr 的 post 式方停止求 ajax 请求时，
可能会认默发送 content-type:application/xml (chrome浏览器),这可能不被服务器接受(取决于服务器认默配置参数),
而且 post 一般字符串参数时不该应 用使 application/xml,该应在 js 设置 Content-Type:application/x-www-form-urlencoded
X-Requested-With 请求头可用于断判浏览器端请求式方
*/
header('Access-Control-Allow-Headers:Origin, Content-Type, X-Requested-With, Accept, Myheard');

//输出数据
echo json_encode(array('x'=>123,'y'=>456));

 

    5、 iframe 口窗与父口窗在跨域情况下，可以互相获得 window 对象(iframeNode.contentWindow、 window.parent)，但不能拜访 window 对象的属性，topWindow 不能获得 iframe 中 的 iframe window 对象(因为法无获得 iframe 中的 iframeNode)，反之却可以 (window.parent.parent)。

 

    6、window.name 属性在 location.href 被修改后仍然留保，parent 中修改 iframe 的 src 为同域名后可以拜访 iframe 的 window.name 。

 

    7、iframe 口窗在跨域情况下虽然不能拜访 window 的属性值，却可以修改 window.location.href，修改 location.href 的锚点不会起发请求，甚至在拜访跨域的子口窗也被制止的情况下，location.href 的修改也能胜利，比如一个跨域的 iframe 内修改父页面中的另一个跨域的 iframe 的地址： 

//由于 iframe 跨域，拜访父页面的 frames 是实其被制止的，但是设置 location.href 可以胜利
parent.frames['otheIframe'].location.href = "http://www.cnblogs.com/ecalf/"; 

    每日一道理
青春，有嬉笑声与哭泣声夹杂的年华，青春的少年是蓝天中翱翔的幼鹰，虽然没有完全长大，有些稚气，有些懵懂，脱不开父母的双手却极力想去找寻属于自己的一片天空，为的是一时的激情，为的是一种独自翱翔的感觉！

 

 

 8、IE 6、7下，跨域的 iframe window 可以同享 window.navigator，可以通过自定义 window.navigator 上的属性来到达跨域，种这跨域式方可以直接传 js 对象型数据。

 

    9、window.postMessage:用适于IE8+,FF,Chrome,opera 等较新的浏览器。

    获得 window 对象(包含 iframeNode.contentWindow、window.open 创立的口窗，当然也可以蛋痛地向本口窗 postMessage )后用使 HTML5 的window.postMessage 法方， iframeNode.contentWindow.postMessage("msg"," * 或 contentWindow中的域名") ,在 iframe 中用使 window.onmessage 件事现实跨域消传送，注意，iframe 在载加毕完后，父口窗 的 onload 件事才触发，不要在 onload 件事之前( iframe 载加毕完前)就 postMessage。

 

<iframe id="xx1" src="http://localhost/test/2.html"></iframe>
<script>
console.log('hello world');
window.onload = function(){
    var win = document.getElementById('xx1').contentWindow;
    win.postMessage('post message:hello world','http://localhost');        
};
</script>

//http://localhost/test/2.html  接收 postMessage 的消息
function receiveMessage(e){
    console.log(e);
    alert(e.data+',from:'+e.origin);
}
window.addEventListener("message", receiveMessage, false);

 

 

    10、window.name 和 location.hash 存储的信息较比少，不用适单次的大量数传输，window.name 没有消息投递的示提式方，靠时定轮询测检，IE 6/7 没有 onhashchange 件事(该件事绑定在 window 或 body 上，IE8+ 和其他较新的浏览器支撑该件事)，也靠时定测检。

 

    11、借助 flash 和 在 server 发送的跨 域请求，这已超越 javascript 范畴，3、4、9 法方不用适于董古级浏览器，对于 window 属性的取读制限多发生在 较比新的浏览 器（比如 opera），一般这些浏览器都支撑 postMessage，可以通过测检手腕优先用使 postMessage

 

 

 

    关于cookie 的javascript 拜访制止及 跨域时的“第三方 cookie” 参考上面接连：

    http://hi.baidu.com/ecalf830/item/00d142d8b66a38e2795daa48

文章结束给大家分享下程序员的一些笑话语录： 很多所谓的牛人也不过如此，离开了你，微软还是微软，Google还是Google，苹果还是苹果，暴雪还是暴雪，而这些牛人离开了公司，自己什么都不是。