easyXDM

3,390 views

Published on

Published in: Technology
  • Be the first to comment

easyXDM

  1. 1. easyXDM Maybe it is the best and easist cross-domain scripting in the world Wilson 2010-12-19
  2. 2. Scenarios
  3. 3. Same Origin Policy <ul><li>var getReply = function (id) { </li></ul><ul><li>$.get(“http://disqus.com”, { </li></ul><ul><li>'post_id': id </li></ul><ul><li>}, function (data) { </li></ul><ul><li>//…. </li></ul><ul><li>}, 'json'); </li></ul><ul><li>} </li></ul>
  4. 4. Same Origin Policy <ul><li>var getReply = function (id) { </li></ul><ul><li>$.get(“http://disqus.com”, { </li></ul><ul><li>'post_id': id </li></ul><ul><li>}, function (data) { </li></ul><ul><li>//…. </li></ul><ul><li>}, 'json'); </li></ul><ul><li>} </li></ul>
  5. 5. Same Origin Policy <ul><li>Prevent the loss of data confidentiality or integrity </li></ul>
  6. 6. Yea,but what if … <ul><li>I own both sites and I just want to make them talk? </li></ul><ul><li>The site I want information from says it’s okay? </li></ul><ul><li>I don’t give a shit?! </li></ul>
  7. 7. The solution <ul><li>Window.postMessage </li></ul><ul><li>Works in… </li></ul><ul><li>FF3+ </li></ul><ul><li>IE8+ </li></ul><ul><li>Chrome 1+ </li></ul><ul><li>Safari 4+ </li></ul><ul><li>Opera </li></ul>
  8. 8. The solution <ul><li>JSONP </li></ul>
  9. 9. The solution <ul><li>Server-Side Proxy </li></ul>
  10. 10. The solution <ul><li>HTML5 Cross-Document Messaging </li></ul><ul><li>W3C XMLHttpRequest Level 2 </li></ul><ul><li>IE8 XDomainRequest </li></ul><ul><li>iFrame hacks </li></ul><ul><li>… </li></ul>
  11. 11. <ul><li>都是浮云! </li></ul>
  12. 12. <ul><li>Men,we need a bit of flexibility </li></ul>
  13. 13. <ul><li>easyXDM </li></ul>https://github.com/oyvindkinsey/easyXDM
  14. 14. easyXDM <ul><li>use postMessage first and then a series of </li></ul><ul><li>different techniques based on which browser you use, but with normalized syntax </li></ul>
  15. 15. easyXDM
  16. 16. Setting up your first Socket <ul><li>The provider </li></ul>
  17. 17. Setting up your first Socket <ul><li>The consumer </li></ul>
  18. 18. Cross-domain AJAX <ul><li>The provider </li></ul>
  19. 19. Cross-domain AJAX <ul><li>The consumer </li></ul>
  20. 20. <ul><li>So easy,right? </li></ul>
  21. 21.
  22. 22. Thanks! <ul><li>Wilson Lin </li></ul><ul><li>@willing8310 </li></ul><ul><li>[email_address] </li></ul><ul><li>http://36kr.com </li></ul>Please feel free to contact me if any questions.

×