Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Ajax & JSON

ynonperek
October 12, 2011

Ajax & JSON

ynonperek

October 12, 2011
Tweet

More Decks by ynonperek

Other Decks in Programming

Transcript

  1. Communication Different systems use different data formats Each platform has

    its own logic Need to decide on a language or protocol Saturday, February 4, 2012
  2. Requirements Wide server support Wide client support Easy to debug

    Pass firewalls Saturday, February 4, 2012
  3. JSON Stands for JavaScript Object Notation Text based Widely Supported

    Simple { name : “Bob”, age : 19, image : “zombie.png” } Saturday, February 4, 2012
  4. JSON Stands for JavaScript Object Notation Text based Widely Supported

    Simple { name : “Bob”, age : 19, image : “zombie.png” } Complete Ruleset: http://www.json.org/ Saturday, February 4, 2012
  5. JSON Values Simple Values Arrays Nested Hashes { name :

    “Bob”, age : 19, image : “zombie.png” } KEY VALUE Saturday, February 4, 2012
  6. Arrays A list of comma separated values enclosed in brackets

    [1, 2, 3] [“a”, “b”, “c”] [1, 2, [“a”, “b”], “hello”, true] Saturday, February 4, 2012
  7. Objects A nested data object can also act as a

    value Example: { foo : { a : 1, b : 2 } } Saturday, February 4, 2012
  8. 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... Saturday, February 4, 2012
  9. JSON Use Case Client Server Server App DB Flights To

    Paris Results { Flights: [ { departure: “02:00”, price: 600 }, { departure: “06:00”, price: 800 }, { departure: “00:00”, price: 999 } ]} Saturday, February 4, 2012
  10. 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 Saturday, February 4, 2012
  11. Demo: Time Server Server returning time of day using Ruby

    & Sinatra App which shows the data Saturday, February 4, 2012
  12. 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. Saturday, February 4, 2012
  13. get/post Examples $.get(‘test.php’); $.post(‘test.php’, { name : ‘john’, time: ‘2pm’

    }); $.get(‘test.php’, function(data) { alert(data); }); Saturday, February 4, 2012
  14. $.ajax Gain full control over the request Can handle errors

    get/post are actually just shortcuts for this one Takes url and settings object Saturday, February 4, 2012
  15. $.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/ Saturday, February 4, 2012
  16. $.ajax Example $.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success:

    function(msg){ alert( "Data Saved: " + msg ); } }); Saturday, February 4, 2012
  17. 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 Saturday, February 4, 2012
  18. Concepts Create parts of the DOM dynamically by using JavaScript,

    based on data that is stored as JS objects Template + Data = HTML Saturday, February 4, 2012
  19. 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/Mustache- Monsterssss-201209873 Saturday, February 4, 2012
  20. 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> Saturday, February 4, 2012
  21. 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" } Saturday, February 4, 2012
  22. 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> Saturday, February 4, 2012
  23. Demo Using a template embedded inside the html file as

    a script Code: ajax/ Handlebars/Demo1/ Saturday, February 4, 2012
  24. 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' } }; Saturday, February 4, 2012
  25. 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" ] } Saturday, February 4, 2012
  26. 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> Saturday, February 4, 2012
  27. Helpers Run JS Code and put its result inside the

    mustache The code is predefined as a helper Demo: ajax/ Handlebars/Demo2 Saturday, February 4, 2012
  28. 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 Saturday, February 4, 2012
  29. Server To Client HTTP is only one way client to

    server protocol How can the server tell all clients that something new has happened ? Saturday, February 4, 2012
  30. Server To Client Client frequent refreshes Web Comet Coined as

    a play on Ajax Saturday, February 4, 2012
  31. 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 Saturday, February 4, 2012
  32. Web Socket Arch Socket Server (Node.js) Application Server Client Browser

    MQ / DB WEB SOCKETS HTTP Saturday, February 4, 2012
  33. 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 Saturday, February 4, 2012
  34. 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); }; Saturday, February 4, 2012
  35. 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 Saturday, February 4, 2012
  36. 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); }; Saturday, February 4, 2012