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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Hello communications(cn)

2,057

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,057
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

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

    ×