HTML5学习笔记(六)-Communication API
if (typeof window.postMessage === "undefined") { //该浏览器不支持postMessage}
?2、发送消息
通过调用目标页面window对象中的postMessage()函数可发送消息，代码如下：
window.postMessage("Hello, world", "portal.example.com");?第一个参数包括要发送的数据，第二个参数是消息传送的目的地。要发送消息给iframe，可以再相应iframe的contentWindow中调用postMessage，代码如下：
document.getElementsByTagName("iframe")[0].contentWindow.postMessage("Hello, world", "chat.example.net");?3、监听消息事件
接收消息时仅需在页面中增加一个事件处理函数。当某个消息到达时，通过检查消息的来源来决定是否对这条消息进行处理。
window.addEventListener("message", messageHandler, true);function messageHandler(e) { switch(e.origin) { case "friend.example.com": //处理消息 processMessage(e.data); break; default: //消息来源无法识别 //消息被忽略 }}?消息事件是一个拥有data（数据）和origin（源）属性的DOM事件。data属性是发送方传递的实际消息，而origin属性是发送来源。
源由规则（scheme）、主机（host）、端口（port）组成。
例如：由于规则不同（如https与http），所以https://www.example.com页面与http://www.example.com页面的源是不同的。
源的概念中不考虑路径。如：http://www.example.com/index.html与http://www.example.com/page2.html只是路径不同，他们是相同的源。
源在API和协议中以字符串的形式出现。
var originWhiteList = ["portal.example.com", "games.example.com", "www.example.com"];function checkWhiteList(origin) { for (var i=0; i<originWhiteList.length; i++) { if (origin === originWhiteList[i]) { return true; } } return false;}function messageHandler(e) { if (checkWhiteList(e.origin)) { processMessage(e.data); } else { //忽略来自未知源的消息 }}?postMessage API可以适用于同源和非同源通信，鉴于它的一致性，在同源文档间通信时也推荐适用postMessage。
?
三、XML HttpRequest Level 2
XML HttpRequest API使得Ajax技术的实现成为了可能。作为它的改进版，主要有一下两方面的改进：
跨源XMLHttpRequest;? ? ? ? 过去，XMLHttpRequest仅限于同源通信。XMLHttpRequest Level 2通过CORS（Cross Origin Resource Sharing，跨源资源共享）实现了跨源XMLHttpRequests。?
2、构建跨源请求
首先创建新的XMLHttpRequest对象：
然后指定不同源的地址来构造跨源XMLHttpRequest：
var crossOriginRequest = new XMLHttpRequest();crossOriginRequest.open("GET", "http://www.example.net/stockfeed", true);?在请求过程中无比确保能够监听到错误。
?
3、使用进度事件
XMLHttpRequest Level 2不再使用数值型状态表示法，而是提供了命名进度事件。为事件处理程序属性设置相应的回调函数后，就可以对这些事件进行监听了。
进度事件使用了多个文本域，分别记录代发送数据的总量、已发送数据的总量，以及用于数据总量是否已知的布尔值。
crossOriginRequest.onprogress = function(e) { var total = e.toatl; var loaded = e.loaded; if (e.lengthComputable) { //利用进度信息做些事情 }}crossOriginRequest.upload.onprogress = function(e) { var total = e.toatl; var loaded = e.loaded; if (e.lengthComputable) { //利用进度信息做些事情 }}?
4、二进制数据
支持新的二进制API（如Typed Array）的浏览器可以用XMLHttpRequest来发送二进制数据。Level 2规范支持调用send()方法发送Blob和ArrayBuffer对象
var a = new Uint8Array([8,6,7,5,3,0,9]);var xhr = new XMLHttpRequest();xhr.open("POST", "/data/", true);console.log(a);xhr.send(a.buffer);?XMLHttpRequest Level 2也会公开二进制响应数据。将responseType属性值设置为text、document、arraybuffer或blob来控制 有response属性返回的对象类型。如果想要查看HTTP响应体包含的原始字节，需要将responseTyper属性值设为arraybuffer或blob。
?
四、进阶功能
1、结构化的数据
早期版本的postMessage仅支持字符串。后来版本支持Javascript对象、canvas imageData和文件等其他数据类型。不同浏览器支持的情况也不同。
?
2、Framebusting
Framebusting技术可以保证某些内容不被加载到iframe中。应用程序首先检测其所在窗口是否为最外层的窗口，若不是则跳脱包含它的框架：
if (window !== window.top) { window.top.location = location;}不过，你可能会有选择的允许某些合作方的页面在其框架中引用你的内容。一般解决方案是使用postMessage在互信页面间握手通信，代码如下：
var framebustTimer;var timeout = 3000;if (window !== window.top) { framebustTimer = setTimeout( function() { window.top.location = location; }, timeout);}window.addEventListener("message", function(e) { switch(e.origin) { case trustedFramer : clearTimeout(framebustTimer); break; }}, true);?
五、扩展阅读
关于XMLHttpRequest Level 2的使用实例可以参看这篇文章，例子很丰富。
http://dev.opera.com/articles/view/xhr2/