1. Html5 <html5> <figure>Communications</figure> <a href='mailto:leonguo@sohu-inc.com'>leonguo</a> <time>2010.10</time> </html5>

2. HTML5 Communication HTML5 定义了两个增强型的文档通信模型 Cross Document Messaging XMLHttpRequest Level2

3. Widely-Used Models of CrossDomain jsonp(JSON with Padding) + <script> document.domain + iframe flash + crossdomain.xml server proxy window.name + iframe window.location.hash + polling etc..

4. Cross Document Messaging cross-origin communication 定义了在 iframes/tabs/window 之间安全的跨源通信方案(using origin security) 定义统一的消息发送 API: PostMessage 提供了 JavaScript 上下文之间的异步消息传递机制

5. Origin Concept 同源：同协议，同域名和同端口 同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。 它认为自任何站点装载的信赖内容是不安全的，只被允许访问来自同一站点的资源，而不是那些来自其它站点可能怀有恶意的资源。

6. PostMessage Architecture

7. Browser Support for PostMessage http://www.findmebyip.com/litmus#target-selector

8. A Original Demo

9. XMLHttpRequest Level 2 XmlHttpRequest Level 2 (XHR2)做了诸多改进： cross-origin requests progress events the handling of byte streams for both sending and receiving... XMLHttpRequest Level2 allows for cross-origin XMLHttpRequest using Cross Origin Resource Sharing(CORS)

10. Cross Origin Resource Sharing 简单来说，就是跨域的目标服务器要返回一系列的Headers，通过这些Headers来控制是否同意跨域。 4 Syntax HTTP Response Header 4.1 Access-Control-Allow-Origin 4.2 Access-Control-Max-Age 4.3 Access-Control-Allow-Credentials 4.4 Access-Control-Allow-Methods 4.5 Access-Control-Allow-Headers HTTP Request Header 4.6 Origin HTTP Request Header 4.7 Access-Control-Request-Method 4.8 Access-Control-Request-Headers

11. API client var xhr2 = window.XDomainRequest ? new XDomainRequest : new XMLHttpRequest; xhr2.onload = function(){console.log(xhr2.responseText);} xhr2.open(“GET”,’server..'); xhr2.send(); Crossdomain.php <?php header('Access-Control-Allow-Origin: *'); echo 'hello world.';

12. Browser Support for XHR2 Chrome 2.0+ Firefox 3.5+ Safari 4.0+ IE 8.0+ // XDomainRequest

13. A Original Demo

14. Q&A

15. THANKS