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

Hello communications(cn)

on

  • 2,215 views

 

Statistics

Views

Total Views
2,215
Views on SlideShare
1,348
Embed Views
867

Actions

Likes
0
Downloads
4
Comments
0

8 Embeds 867

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

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • http://newclub.sohu.com/test/leon/h5_message/
  • http://newclub.sohu.com/test/leon/crossdomain.php

Hello communications(cn) Hello communications(cn) Presentation Transcript

  • Html5
    <html5>
    <figure>Communications</figure>
    <a href='mailto:leonguo@sohu-inc.com'>leonguo</a>
    <time>2010.10</time>
    </html5>
  • HTML5 Communication
    HTML5 定义了两个增强型的文档通信模型
    Cross Document Messaging
    XMLHttpRequest Level2
  • 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..
  • Cross Document Messaging
    cross-origin communication 定义了在 iframes/tabs/window 之间安全的跨源通信方案(using origin security)
    定义统一的消息发送 API: PostMessage
    提供了 JavaScript 上下文之间的异步消息传递机制
  • Origin Concept
    同源:同协议,同域名和同端口
    同源策略是客户端脚本(尤其是Javascript)的重要的安全度量标准。
    它认为自任何站点装载的信赖内容是不安全的,只被允许访问来自同一站点的资源,而不是那些来自其它站点可能怀有恶意的资源。
  • PostMessage Architecture
  • Browser Support for PostMessage
    http://www.findmebyip.com/litmus#target-selector
  • A Original Demo
  • 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)
  • 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
  • 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.';
  • Browser Support for XHR2
    Chrome 2.0+
    Firefox 3.5+
    Safari 4.0+
    IE 8.0+ // XDomainRequest
  • A Original Demo
  • Q&A
  • THANKS