1. Simplify AJAX using
jQuery
December 24, 2012
Sivasubramaniam Arunachalam
@sivaa_in
http://www.meetup.com/Online-Technology-User-Group/events/87541132/

2. It’s me!
• Application Developer
• Technical Consultant
• Process Mentor

3. It’s about you!
Web(Application) Developer &
Tasted jQuery

4. Expectations
• Introduction
• No Server Specific
• Not a tutorial
• Not a reference guide

5. Introduction to AJAX
Asynchronous
- No refresh
- No redirection
- Same Lifeline
JavaScript
And XML

6. XMLHttpRequest

7. Google and AJAX

8. AJAX – The Flow
http://www.cs.uky.edu/~paulp/CS316F12/CS316AJAX_html_m79697898.png

9. http://www.cs.uky.edu/~paulp/CS316F12/CS316AJAX_html_m79697898.png

10. http://www.cs.uky.edu/~paulp/CS316F12/CS316AJAX_html_m79697898.png

11. AJAX in Javascript - Initialize

12. AJAX in Javascript - Callback

13. AJAX in Javascript - Send

16. HTTP Cache related Fields
• Expires
• Last-Modified
• Cache-Control

17. Expires

18. Last-Modified

19. Cache-Control

20. POST - n/a

21. Caching and AJAX
• Caching is always good
• Same as HTTP Caching
• Static Content
• Lookup Data
• Images
• Not good for AJAX
• Mostly used with Dynamic Content

22. IE always Caches AJAX requests
by Default

24. Simple Hack
Just add random number to
request URL

25. The jQuery Way

26. Simple AJAX request
load()

27. Simple AJAX request
Syntax:
$(“selector”).load(URL);

28. Simple AJAX request
Example:
$(“#myDiv”).load(“/get.html”);

29. Event are Important
Example:
$(“#myButton”).click(function(event){
$(“#myDiv”).load(“/get.html”);
});

30. Process a Part
url = ajax/load_basic
url = ajax/load_basic #image
<dom id=“image”>…</dom>
Example:
<a href=“url" id="image">
<img src=“img.jpg”>
</a>

31. Better AJAX request
Syntax:
$(“selector”).load(
URL,
[data],
[callback]
);

32. Better AJAX request - Methods
Syntax:
$(“selector”).load(
URL,
[data], GET / POST
[callback]
);

33. Better AJAX request - GET
Syntax:
$(“selector”).load(
URL,
[data], GET
[callback]
);
”company=yahoo&loc=india”

34. Better AJAX request - GET
$(“selector”).load(
“ajax/getdata”,
”company=yahoo&loc=india”
);

35. Better AJAX request - POST
Syntax:
$(“selector”).load(
URL,
[data],
POST
[callback]
);
{ company: ‘yahoo’,
loc: ‘india’ }

36. Better AJAX request - POST
$(“selector”).load(
“ajax/getdata”,
{ company: ‘yahoo’, loc: ‘india’ }
);

37. Better AJAX request
Syntax:
$(“selector”).load(
URL,
[data],
[callback]
); (responseText, textStatus, XMLHttpRequest)

38. AJAX, jQuery &
JSON

39. JSON
JavaScript Object Notation
• data-interchange format
• Light weight
• Human readable
• And better than XML
• Now language independent

40. JSON - Example
var json =
{
“id”: “23IT64”,
“name”: {
“first”: “Sivasubramaniam”,
“last”: “Arunachalam”
},
“profession”: “developer”
}

41. JSON – Access (1)
var json =
{
“id”: “23IT64”,
“name”: {
“first”: “Sivasubramaniam”,
“last”: “Arunachalam”
},
“profession”: “developer” json.id
}

42. JSON – Access (2)
var json =
{ json.name.first
”id”: “23IT64”,
“name”: {
“first”: “Sivasubramaniam”,
“last”: “Arunachalam”
},
“profession”: “developer”
}

43. AJAX - JSON Request
Syntax:
$.getJSON(
URL,
[data],
[success callback]
);

44. AJAX - JSON Request
”company=yahoo&loc=india”
Syntax:
GET
$.getJSON( { company: ‘yahoo’, loc: ‘india’ }
URL, No Post & GET only
[data],
[success callback]
);

45. AJAX - JSON Request
Syntax: Success_callback(
json_data,
$.getJSON( [textStatus],
URL, [jqXHR]
)
[data],
[success callback]
);

46. AJAX - JSON Request - Example
$.getJSON (
“ajax/getjson”,
”company=yahoo&loc=india”,
function(json) {
$("#mydiv01").html(json.id);
$("#mydiv02").html(json.profession);
}
);

47. AJAX, jQuery &
Remote Script

48. Let’s load a piece of
Javascript from Server
and execute it.

49. AJAX – Script Request
Syntax:
$.getScript(
URL,
[success callback]
);

50. AJAX – Script Request
Syntax: success_callback(
[script_data],
$.getScript( [textStatus],
[jqXHR]
URL, )
[success callback]
);

51. AJAX – Script Request - Example
$.getScript(
“ajax/getscript”,
function() {
$("#mydiv").html(“Script Loaded..”);
}
); Script will be executed automatically!

52. A Simple GET AJAX Request

53. AJAX – GET Request
Syntax:
$.get(
URL,
[data],
[success callback],
[response data type]
);

54. AJAX – GET Request
Syntax:
{ company: ‘yahoo’, loc: ‘india’ }
$.get(
URL,
[data],
[success callback],
[response data type]
);

55. AJAX – GET Request
Syntax: success_callback(
$.get( data,
[textStatus],
URL, [jqXHR]
[data], )
[success callback],
[response data type]
);

56. AJAX – GET Request
Syntax: • html
$.get( • xml
• json
URL, • script
[data],
[success callback],
[response data type]
);

57. AJAX – GET Request - Example
$.get(
“ajax/getdata”,
{ company: ‘yahoo’, loc: ‘india’ },
function(responseText) {
$("#content").html(responseText)
},
“html”
);

58. A Simple POST AJAX Request

59. AJAX – POST Request
Syntax:
$.post(
URL,
[data],
[success callback],
[response data type]
);

60. AJAX – POST Request
Syntax:
{ company: ‘yahoo’, loc: ‘india’ }
$.post(
URL,
[data],
[success callback],
[response data type]
);

61. AJAX – POST Request
Syntax: success_callback(
$.post( data,
[textStatus],
URL, [jqXHR]
[data], )
[success callback],
[response data type]
);

62. AJAX – POST Request
Syntax: • html
$.post( • xml
• json
URL, • script
[data],
[success callback],
[response data type]
);

63. AJAX – POST Request - Example
$.post(
“ajax/postdata”,
{ company: ‘yahoo’, loc: ‘india’ },
function(responseText) {
$("#content").html(responseText)
},
“html”
);

64. And we are done with the
“basics”

65. And what happens when AJAX
requests are
“failed”?
Lets do advanced AJAX 

66. Global Setup
$.ajaxSetup()
• async
• type • global
• cache •
• url beforeSend()
• username • timeout • complete()
• password • contentType • success()
• dataType • error()
Override is possible

67. Global AJAX Event Handlers
• .ajaxSend() • .ajaxComplete()
• .ajaxStart() • .ajaxSuccess ()
• .ajaxStop() • .ajaxError()
• .done()
• .fail()
• .always()

68. .ajaxStart() & .ajaxStop()
var ajax_load = “<img src=“loading.gif”/>
$("*").ajaxStart(function(){
$("#loading").html(ajax_load);
});
$("*").ajaxStop(function(){
$("#loading").html("");
});

69. .ajax() - Examples
$.ajax ( {
url: “ajax/load“,
success: function(data) {
$(‘#result').html(data);
}
});

70. .ajax() - Examples
$.ajax ( {
url: “ajax/get“,
type: “GET“,
cache: true
}).done(function( data) {
$("#results").html(data);
});

71. .ajax() - Examples
$.ajax ( {
url: “ajax/post“,
type: “POST“,
data: { company: “yahoo", loc: “india" }
}).done(function( data) {
$("#results").html(data);
});

72. .ajax() - Examples
$.ajax ( {
url: “ajax/js“,
type: “GET“,
dataType: “script”,
});

73. .ajax() - Examples
$.ajax ( “ajax/load" )
.done (function() { alert("success"); })
.fail (function() { alert("error"); })
.always (function() { alert("complete") });

74. Summary
http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

75. Demo

76. Thank You!
siva@sivaa.in
https://www.facebook.com/sivasubramaniam.arun

77. References
• http://www.clickonf5.org/2902/schedule-meeting-send-invitation-gmail/
• http://explainafide.com.au/rss-feed-reader/
• http://squash2020.com/squash-tops-google-search/google-map-logo/
• http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/
• http://stevesouders.com/hpws/rule-ajax.php
• http://blog.httpwatch.com/2009/08/07/ajax-caching-two-important-facts/
• http://viralpatel.net/blogs/ajax-cache-problem-in-ie/
• http://www.tutorialspoint.com/jquery/jquery-ajax.htm