08 ajax

2,587 views

Published on

Published in: Technology
  • Be the first to comment

08 ajax

  1. 1. AJAX Data Transfer Client-Server Apps - The Easy Way
  2. 2. Agenda JSON Modify DOM by Server Data Web Sockets
  3. 3. Communication Different systems use different data formats Each platform has its own logic Need to decide on a language or protocol
  4. 4. Requirements What do we need from such a protocol ?
  5. 5. Requirements Wide server support Wide client support Easy to debug Pass firewalls
  6. 6. Meet JSON
  7. 7. JSON Stands for JavaScript {! “name” Object Notation Text based Widely Supported Simple : “Bob”,! “age” : 19,! “image” : “zombie.png”
 }
  8. 8. JSON Stands for JavaScript Object Notation Text based name : “Bob”,! age : 19,! Comple te Rule image : “zombie.png”
 set: http://w ww.jso} n.org/ Widely Supported Simple {!
  9. 9. JSON Values KEY Simple Values {! name : “Bob”,! age : 19,! image : “zombie.png”
 Arrays Nested Hashes VALUE }
  10. 10. Simple Values “text” number true false null
  11. 11. Arrays A list of comma separated values enclosed in brackets [1, 2, 3] [“a”, “b”, “c”] [1, 2, [“a”, “b”], “hello”, true]
  12. 12. Objects A nested data object can also act as a value Example:
 
 { foo : { a : 1, b : 2 } }
  13. 13. JSON - Getting Better No need to write JSON by hand Here’s a partial list of languages which produce JSON objects for you: ASP, ActionScript, BlitzMax, C, C++, C#, Clojure, ColdFusion, Delphi, Eiffel, Erlang, Go, Haskell, Java, JavaScript, Lasso, Lisp, LotusScript, Lua, Objective C, Objective CAML, Perl, PHP, Python, Qt, Ruby, Tcl, Visual Basic, And More...
  14. 14. JSON Alternatives XML Dedicated Format
  15. 15. Using JSON
  16. 16. JSON Use Case Flights To Paris Client Results Server App { Flights: [ { departure: “02:00”, price: 600 }, { departure: “06:00”, price: 800 }, { departure: “00:00”, price: 999 } ]} Server DB
  17. 17. JSON Use Case Client request - “Paris” Server gets request Server performs DB query Server creates the response JSON object Server sends the response to client
  18. 18. Demo: Time Server Server returning time of day using Ruby & Sinatra App which shows the data
  19. 19. jQuery Functions $.get - sends a get request to the server. 
 Takes a url, optional data, success handler and data type. $.post - sends a post request to the server. 
 Takes a url, optional data, success handler and data type.
  20. 20. get/post Examples $.get(‘test.php’); $.post(‘test.php’, { name : ‘john’, time: ‘2pm’ }); $.get(‘test.php’, function(data) { alert(data);
 });
  21. 21. $.ajax Gain full control over the request Can handle errors get/post are actually just shortcuts for this one Takes url and settings object
  22. 22. $.ajax Settings error: error handler callback success: success handler callback context: the ‘this’ pointer of callbacks data: data object to send url: the url to use Full docs: http://api.jquery.com/jQuery.ajax/
  23. 23. $.ajax Example $.ajax({!    type: "POST",!    url: "some.php",!    data: "name=John&location=Boston",!    success: function(msg){!      alert( "Data Saved: " + msg );!    }!  });!
  24. 24. Same Origin Policy Cross origin writes: Allowed Cross origin embeds: 
 Allowed Cross origin reads:
 Denied
  25. 25. But I Want To Implement an API Use JSONP Use CORS
  26. 26. JSONP Explained Use cross origin embeds:
 
 <script src="http://www.myapi.com/places"></script> Script returns function, not data:
 
 callback(['home', 'work', 'mobile']);
  27. 27. What’s wrong with JSONP ? Need to specify a callback as global function Need to add <script> tag dynamically Can’t post
  28. 28. CORS To The Rescue
  29. 29. CORS Goal Differentiate good cross origin request from a malicious one
  30. 30. CORS How I come from www.friend.com Please send me /contacts/all.json
  31. 31. CORS How Browser sends Origin: request header Server checks Origin to check it’s allowed Server sends Access-Control-Allow-Origin to let browser know the request was OK
  32. 32. CORS Keep In Mind Be sure to verify Origin on the server ASP.NET Howto:
 
 http://www.asp.net/web-api/overview/security/ enabling-cross-origin-requests-in-web-api
  33. 33. Q&A
  34. 34. Practice Use your favorite Server Side Technology Implement a mobile wall: App displays a long list of sentences (the wall) Each user can add a sentence to the wall Everyone shares the same wall
  35. 35. Handlebar Mustache JS Templating lib that rocks
  36. 36. Concepts Create parts of the DOM dynamically by using JavaScript, based on data that is stored as JS objects Template + Data = HTML
  37. 37. Use Cases Data is collected from the server Data is retrieved form local storage Data is aggregated from multiple sources Translations http://loveandasandwich.deviantart.com/art/MustacheMonsterssss-201209873
  38. 38. Selected Libraries mustache.js handlebars ejs pure.js underscore.js And many more...
  39. 39. The How A template looks like normal html code Special placeholders are inserted in the template <div class="entry">   <h1>{{name}}</h1>   <span>{{details}}</span> </div>
  40. 40. The How Each template is rendered with a context. The context is a JavaScript object that provides values for the placeholders {   name: "Jimmy Jones",   details: "A friend of Ghandi" }
  41. 41. Combined <div class="entry">   <h1>{{name}}</h1>   <span>{{details}}</span> </div> + {   name: "Jimmy Jones",   details: "A friend of Ghandi" } <div class="entry">   <h1>Jimmy Jones</h1>   <span> A friend of Ghandi </span> </div>
  42. 42. Demo Using a template embedded inside the html file as a script Code: ajax/ Handlebars/Demo1/
  43. 43. Using Handlebars Rendering Objects Rendering Arrays Conditional Rendering (if) Helpers
  44. 44. Rendering Objects Can use a block expression in the template This will use a different context for the rendering Example: With <div class="entry">   <h1>{{title}}</h1>   {{#with author}} !   <span>By: {{first}} {{last}}</span> !   {{/with}} </div> var ctx = {   title: "Alice's Adventures in Wonderland",   author: {     first: 'Lewis',     last: 'Carrol'   } };
  45. 45. Rendering Arrays The each block helper renders each element in an array in its own entry Inside the block, this refers to the current element <ul class="people_list">   {{#each people}} !   <li>{{this}}</li> !   {{/each}} </ul> {   people: [     "Yehuda Katz",     "Alan Johnson",     "Charles Jolley"   ] }
  46. 46. Conditional Rendering Renders a portion of the template based on a condition If the argument is falsy, the block won’t be rendered <div class="entry">!   {{#if author}}!     <h1>{{firstName}} {{lastName}}</h1>!   {{/if}}! </div>!
  47. 47. Helpers Run JS Code and put its result inside the mustache The code is predefined as a helper Demo: ajax/ Handlebars/Demo2
  48. 48. Demo: Handlebars data from server
  49. 49. Exercise Write a simple todo manager using Handlebars Use a form to add a todo item Use localStorage to save all items Use a handlebar template to create the todo list from the local storage
  50. 50. Server To Client HTTP is only one way client to server protocol How can the server tell all clients that something new has happened ?
  51. 51. Server To Client Client frequent refreshes Web Comet Coined as a play on Ajax
  52. 52. Web Sockets Demo: http://rumpetroll.com/
  53. 53. Web Sockets New Feature of HTML5 Needs a dedicated server supporting web sockets Server-Side implementations:
 Socket.IO, Jetty (Java), Ruby, Python, Perl Client Side: Native support on iPhone. Full Solution: Socket.IO
  54. 54. Web Socket Arch Socket Server (Node.js) MQ / DB WEB SOCKETS Application Server HTTP Client Browser
  55. 55. Web Sockets Paradigm Use a dedicated node.js or other server for communicating with clients Use a MQ server to connect node.js to your application server juggernaut does this for you
  56. 56. Web Sockets Client var connection = new WebSocket('ws://foo.org/wall'); connection.onopen = function () {! connection.send('Ping'); ! };! ! connection.onerror = function (error) {! console.log('WebSocket Error ' + error);! };! ! connection.onmessage = function (e) {! console.log('Server: ' + e.data);! };!
  57. 57. Web Sockets Today Currently, Web sockets are not widely supported socket.io is a node.js implementation overriding this problem by providing good fallbacks socket.io also provides a lot of extra functionality over existing web sockets Let’s modify our code to work with socket.io
  58. 58. Web Sockets Client var socket = io.connect('http://localhost:8080'); socket.on(‘connect’, function () {! connection.send('Ping'); ! });! ! socket.on(‘disconnect’, function () {! console.log(‘socket down’);! };! ! socket.on(‘message’, function (data) {! console.log('Server: ' + data);! };!
  59. 59. Demo: Echo Socket
  60. 60. Q&A
  61. 61. Thank You Ynon Perek ynonperek@yahoo.com ynonperek.com

×