It’s time to say “Hello!” (Hello !) It’s time to say “Hello!” (Hello !)
Hello communications(cn)
description
Transcript of Hello communications(cn)
![Page 1: Hello communications(cn)](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b6714a7959181f8b4605/html5/thumbnails/1.jpg)
<html5><figure>Communications</figure><a href='mailto:[email protected]'>leonguo</a><time>2010.10</time>
</html5>
HTML5
![Page 2: Hello communications(cn)](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b6714a7959181f8b4605/html5/thumbnails/2.jpg)
HTML5 Communication
• HTML5 定义了两个增强型的文档通信模型– Cross Document Messaging
– XMLHttpRequest Level2
![Page 3: Hello communications(cn)](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b6714a7959181f8b4605/html5/thumbnails/3.jpg)
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..
![Page 4: Hello communications(cn)](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b6714a7959181f8b4605/html5/thumbnails/4.jpg)
Cross Document Messaging
• cross-origin communication 定义了在 iframes/tabs/window 之间安全的跨源通信方案(using origin security)
• 定义统一的消息发送 API: PostMessage• 提供了 JavaScript 上下文之间的异步消息传递机制
![Page 5: Hello communications(cn)](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b6714a7959181f8b4605/html5/thumbnails/5.jpg)
Origin Concept
• 同源:同协议,同域名和同端口• 同源策略是客户端脚本(尤其是 Javascript )的重要的安
全度量标准。• 它认为自任何站点装载的信赖内容是不安全的,只被允许
访问来自同一站点的资源,而不是那些来自其它站点可能怀有恶意的资源。
![Page 6: Hello communications(cn)](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b6714a7959181f8b4605/html5/thumbnails/6.jpg)
PostMessage Architecture
![Page 7: Hello communications(cn)](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b6714a7959181f8b4605/html5/thumbnails/7.jpg)
Browser Support for PostMessage
http://www.findmebyip.com/litmus#target-selector
![Page 8: Hello communications(cn)](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b6714a7959181f8b4605/html5/thumbnails/8.jpg)
A Original Demo
![Page 9: Hello communications(cn)](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b6714a7959181f8b4605/html5/thumbnails/9.jpg)
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)
![Page 10: Hello communications(cn)](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b6714a7959181f8b4605/html5/thumbnails/10.jpg)
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
![Page 11: Hello communications(cn)](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b6714a7959181f8b4605/html5/thumbnails/11.jpg)
API
<?phpheader('Access-Control-Allow-Origin: *');echo 'hello world.';
Crossdomain.php
var xhr2 = window.XDomainRequest ? new XDomainRequest : new XMLHttpRequest; xhr2.onload = function(){console.log(xhr2.responseText);}xhr2.open(“GET”, ’server..');xhr2.send();
client
![Page 12: Hello communications(cn)](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b6714a7959181f8b4605/html5/thumbnails/12.jpg)
Browser Support for XHR2
• Chrome 2.0+
• Firefox 3.5+
• Safari 4.0+
• IE 8.0+ // XDomainRequest
![Page 13: Hello communications(cn)](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b6714a7959181f8b4605/html5/thumbnails/13.jpg)
A Original Demo
![Page 14: Hello communications(cn)](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b6714a7959181f8b4605/html5/thumbnails/14.jpg)
Q&A
![Page 15: Hello communications(cn)](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b6714a7959181f8b4605/html5/thumbnails/15.jpg)
THANKS