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

AJAX 101

AJAX 101

Hernán Garzón

September 19, 2014
Tweet

Other Decks in Programming

Transcript

  1. - AJAX basic concepts - HTTP methods GET / POST

    / PUT / OTHERS - TEXT / XML / JSON - From the server to Javascript: Parsing the response - jQuery and AJAX 101 Agenda:
  2. 101

  3. 101 - Attributes - readyState - responseText - status -

    statusText - Events - onreadystatechange - onload - onloadstart - on progress - Methods - open - send - abort
  4. 101 Create a callback function xhr.onreadystatechange = function () {

    // runs every time there is a change in the event. }
  5. 101 HTTP GET method Receiving or getting information from a

    server https://developer.mozilla.org/en-US/docs/Web/HTTP#HTTP_request_methods
  6. 101 Puts a file or resource at a specific URI,

    and exactly at that URI. https://developer.mozilla.org/en-US/docs/Web/HTTP#HTTP_request_methods HTTP PUT method
  7. 101 xhr.onreadystatechange = function () { if (xhr.readyState === 4){

    // Where the magic happens } } xhr.open(‘GET’, ‘data/employees.json’); xhr.send();
  8. 101 <xml> <employees> <employee> <firstName>John</firstName> <lastName>Doe</lastName> </employee> <employee> <firstName>Anna</firstName> <lastName>Smith</lastName>

    </employee> <employee> <firstName>Peter</firstName> <lastName>Jones</lastName> </employee> </employees> </xml>
  9. 101

  10. 101

  11. 101

  12. 101 $.ajax(url, settings); $.ajax(url, { data: formData, type: ‘POST’, success:

    function(response){ $(‘signup’).html(‘<p>Thank you!</p>’) } });
  13. 101 var url = $(this).attr(‘action’); $.ajax(url, { data: formData, type:

    ‘POST’, success: function(response){ $(‘signup’).html(‘<p>Thank you!</p>’) } });
  14. 101 <h1>Sign up for our newsletter:</h1> <div id=”signup”> <form method=”post”

    action=”/signup”> <label for=”userName”>Nombre:</label> <input type=”text” name=”userName” id=”userName”> <label for=”email”>Email:</label> <input type=”email” name=”email” id=”email”> <label for=”submit”></label> <input type=”submit” value=”signUp!” id=”sumbit”> </form> </div>
  15. 101 $(‘form’).submit(function(evt) { evt.preventDefault(); var url = $(this).attr(“action”); var formData

    = $(this).serialize(); $.post(url,formData,function(response){ $(‘#signup’).html(‘<p>thanks for signing up!</p>’); }); // end post }); // end submit
  16. 101 $(‘form’).submit(function(evt) { evt.preventDefault(); var url = $(this).attr(“action”); var formData

    = $(this).serialize(); $.ajax({ url: url, data: formData, type: “POST”, success: function(response){ $(‘#signup’).html(‘<p>thanks for signing up!</p>’) }); )}; // end post }); // end sumbit