This presentation will help you understand basics of AJAX.

1. 101
Hernán Garzón de la Roza
@chertopjanov

2. Agenda: 101
- AJAX basic concepts
- HTTP methods GET / POST / PUT / OTHERS
- TEXT / XML / JSON
- From the server to Javascript: Parsing the response
- jQuery and AJAX

4. A
J
A
X
101

5. A
J
A
X
synchronous
101

6. 101
Synchronous call

7. 101
Browser
Time
Server

8. 101
Browser
Server
User action User action User action
Time
Server
processing
Server
processing

9. 101
Asynchronous call

10. 101
user action
Browser
Ajax engine
Server
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

14. 101

15. XMLHttpRequest (XHR) Object
101

16. 101
- Attributes
- readyState
- responseText
- status
- statusText
- Events
- Methods
- onreadystatechange
- onload
- onloadstart
- on progress
- 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
HTTP GET method
Static and dynamic information
https://developer.mozilla.org/en-US/docs/Web/HTTP#HTTP_request_methods

29. 101
Dynamic QueryString
http://www.website.com/employee.php?lastName=perez
http://www.url-encode-decode.com/

30. 101
HTTP POST method
Sending information that’s gonna be saved
https://developer.mozilla.org/en-US/docs/Web/HTTP#HTTP_request_methods

31. 101
HTTP PUT method
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

32. 101
Send the request
xhr.send();

33. xhr.onreadystatechange = function () { 101
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
Browser Server
response

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

45. 101

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

53. 101

54. 101
http://www.myserver.com http://www.myserver.com/ajax.html
Browser Server

55. 101

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
https://www.myserver.com/
Server
http://www.myserver.com/home
Browser

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