AJAX 101

Transcript

1. 101 Hernán Garzón de la Roza @chertopjanov
2. - 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:
4. A J A X 101
5. A J A X synchronous 101
6. 101 Synchronous call
7. 101 Browser Server Time
8. 101 Browser Server User action User action User action Time Server processing Server processing
9. 101 Asynchronous call
10. 101 Server Browser user action Ajax engine Server processing
11. 101 Browser Server User action Response Time Server processing Ajax engine
12. 101 Browser Server User action Response Time Server processing Ajax engine
13. A J A X synchronous avascript 101
15. XMLHttpRequest (XHR) Object 101
16. 101 - Attributes - readyState - responseText - status - statusText - Events - onreadystatechange - onload - onloadstart - on progress - Methods - open - send - abort
17. Compatibility and support 101
18. A J A X synchronous avascript and 101
19. A J A X synchronous avascript and ml 101
20. 101 How AJAX works step by step
21. 101 Create an XMLHttpRequest object var req = new XMLHttpRequest();
22. 101 Create a callback function xhr.onreadystatechange = function () { // runs every time there is a change in the event. }
23. 101 xhr.onreadystatechange 0 1 2 3 4 >> readyState
24. 101 Create a callback function xhr.onreadystatechange = function () { if (xhr.readyState === 4){...} }
25. 101 Open a request xhr.open(‘GET’, ‘sidebar.html’);
26. 101 open(httpMethod, url, boolean)
27. 101 HTTP GET method Receiving or getting information from a server https://developer.mozilla.org/en-US/docs/Web/HTTP#HTTP_request_methods
28. 101 Static and dynamic information https://developer.mozilla.org/en-US/docs/Web/HTTP#HTTP_request_methods HTTP GET method
29. 101 Dynamic QueryString http://www.website.com/employee.php?lastName=perez http://www.url-encode-decode.com/
30. 101 Sending information that’s gonna be saved https://developer.mozilla.org/en-US/docs/Web/HTTP#HTTP_request_methods HTTP POST method
31. 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
32. 101 Send the request xhr.send();
33. 101 xhr.onreadystatechange = function () { if (xhr.readyState === 4){ // Where the magic happens } } xhr.open(‘GET’, ‘data/employees.json’); xhr.send();
34. 101 demo basic ajax
35. 101 Response Reply to AJAX requests
36. 101 request response Browser Server
37. 101 Simple text response plain text or HTML
38. 101 Request a static file
39. 101 Lots of data and how to handle it
40. 101 Structured data format XML & JSON
41. 101 XML Tags to structure data
42. 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>
43. 101 JSON JavaScript Object Notation
44. 101 JSON Array notation
46. 101 [‘string’,2, true, [1,2,3,4]]
47. 101 JSON Object notation
48. 101 {"employees":[ {"firstName":"John", "lastName":"Doe"}, {"firstName":"Anna", "lastName":"Smith"}, {"firstName":"Peter", "lastName":"Jones"} ]} http://jsonlint.com/
49. 101 Parsing Convert plain text into javascript
50. 101 demo parsing
51. 101 Limits
52. 101 Web Browser same origin policy http://en.wikipedia.org/wiki/Same_origin_policy
54. 101 http://www.myserver.com http://www.myserver.com/ajax.html Browser Server
56. 101 http://www.myserver.com http://www.anotherwebsite.com Browser Server
57. 101 http://www.myserver.com https://www.myserver.com/8888 Browser Server
58. 101 http://www.myserver.com https://www.db.myserver.com/ Browser Server
59. 101 JSONP JSON with padding
60. 101 http://www.myserver.com/home Browser https://www.myserver.com/ Server
61. 101 http://www.myserver.com/home https://www.anotherserver.com/ Browser Server https://www.myserver.com/ Server
62. 101 http://www.myserver.com/home https://www.anotherserver.com/ Browser Server https://www.myserver.com/ Server <script src=”http://anotherserver.com/jsFile.js”></script>
63. 101 Cross-Origin Resource Sharing Access-Control-Allow-Origin
64. 101 jQuery http://api.jquery.com/category/ajax/shorthand-methods/
65. 101 Load the jQuery library CDN <script src=”http://code.jquery.com/jquery-1.11.9.min.js”></script>
66. 101 $.get();
67. 101 $.post();
68. 101 $.getJson();
69. 101 demo $.load();
70. 101 $.ajax(url, settings); http://librojquery.com/#opciones-del-método-.ajax http://api.jquery.com/jquery.ajax/
71. 101 $.ajax(url, settings); var url = $(this).attr(‘action’);
72. 101 $.ajax(url, settings); $.ajax(url, { data: formData, type: ‘POST’, success: function(response){ $(‘signup’).html(‘<p>Thank you!</p>’) } });
73. 101 var url = $(this).attr(‘action’); $.ajax(url, { data: formData, type: ‘POST’, success: function(response){ $(‘signup’).html(‘<p>Thank you!</p>’) } });
74. 101 $.post vs $.ajax
75. 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>
76. 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
77. 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
79. Thank you