Hello communications(cn)
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Hello communications(cn)

  • 2,303 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,303
On Slideshare
1,425
From Embeds
878
Number of Embeds
8

Actions

Shares
Downloads
4
Comments
0
Likes
0

Embeds 878

http://grepk.com 851
http://qyappgrepk.sinaapp.com 7
http://cache.baidu.com 6
http://grepk.1kapp.com 6
http://grepk.blogcn.com 5
http://grepk.com} {1910807380|||pingback 1
http://translate.googleusercontent.com 1
http://cache.baiducontent.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • http://newclub.sohu.com/test/leon/h5_message/
  • http://newclub.sohu.com/test/leon/crossdomain.php

Transcript

  • 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