关于ajax跨域的一些笔记

1. 新生浏览器大部分都改良了ajax中的 XMLHttpRequest()对象，利用

 

var xel = new XMLHttpRequest();

xel.onload = function(){ // 这样利用onload事件就能完成发送到接收成功的过程

}

2. 由于同源请求的限制，现代ajax进行了改良，可以跨域进行数据的请求，只是在后端配合一下就好

 

<?php

header('Access-Control-Allow-Origin:http://www.a.com'); //这是允许访问该资源的域

echo "hello";

?>

在后端头部进行设置后，就可以访问目标网址，进行数据的读取.

 

html5中也可以进行数据跨域访问请求，其实原理类似于中转一样。利用postMessage()对象发送过来的信息进行通信，

首先在一个页面中进行消息发送

window.onload = function() {

 

var oBtn = document.getElementById('btn');

var oMyIframe = document.getElementById('myframe');

 

/*

postMessage : 可以通过这个方法给另外一个窗口发送信息

 

接收消息的窗口的window对象.postMessage();

*/

 

oBtn.onclick = function() {

 

//当本页面和包含页面不在同一个域名下的时候，这样操作就会有跨域操作安全限制问题。

 

//oMyIframe.contentWindow.document.body.style.background = 'red';

 

/*

第一个参数：发送的数据

第二个参数：接收数据的域名｛带上协议｝

*/

 

oMyIframe.contentWindow.postMessage('1', 'http://www.b.com');

//alert(oMyIframe.contentWindow.postMessage)

 

}

 

}

</script>

 

另外一个窗口可以进行如下设置

window.onload = function() {

 

/*

message : 当窗口接收到通过postMessage发送过来的数据的时候触发

*/

 

window.addEventListener('message', function(ev) { // 利用message 接收数据

//alert('b.com下的页面接收到了内容了');

 

//message事件的事件对象下保存了发送过来的内容

//ev.data : 发送过来的数据

//ev.origin

 

//alert('我接收到了a.com页面发送过来的数据，内容是：' + ev.data);

 

//alert(ev.origin); 显示发送消息的源地址

 

 

if (ev.data == '1') {

document.body.style.background = 'red';

}

 

}, false);

 

}

</script>