Your SlideShare is downloading. ×
0
Simplify AJAX using      jQuery                                        December 24, 2012     Sivasubramaniam Arunachalam  ...
It’s me!• Application Developer• Technical Consultant• Process Mentor
It’s about you!Web(Application) Developer &      Tasted jQuery
Expectations•   Introduction•   No Server Specific•   Not a tutorial•   Not a reference guide
Introduction to AJAXAsynchronous     - No refresh     - No redirection     - Same LifelineJavaScriptAnd XML
XMLHttpRequest
Google and AJAX
AJAX – The Flowhttp://www.cs.uky.edu/~paulp/CS316F12/CS316AJAX_html_m79697898.png
http://www.cs.uky.edu/~paulp/CS316F12/CS316AJAX_html_m79697898.png
http://www.cs.uky.edu/~paulp/CS316F12/CS316AJAX_html_m79697898.png
AJAX in Javascript - Initialize
AJAX in Javascript - Callback
AJAX in Javascript - Send
HTTP Cache related Fields• Expires• Last-Modified• Cache-Control
Expires
Last-Modified
Cache-Control
POST - n/a
Caching and AJAX• Caching is always good• Same as HTTP Caching  • Static Content     •   Lookup Data  • Images• Not good f...
IE always Caches AJAX requests         by Default
Simple HackJust add random number to        request URL
The jQuery Way
Simple AJAX request  load()
Simple AJAX requestSyntax:$(“selector”).load(URL);
Simple AJAX requestExample:$(“#myDiv”).load(“/get.html”);
Event are ImportantExample:$(“#myButton”).click(function(event){    $(“#myDiv”).load(“/get.html”);});
Process a Parturl = ajax/load_basicurl = ajax/load_basic #image      <dom id=“image”>…</dom>Example:<a href=“url" id="imag...
Better AJAX requestSyntax:$(“selector”).load(        URL,        [data],        [callback]);
Better AJAX request - Methods    Syntax:    $(“selector”).load(            URL,            [data],    GET / POST          ...
Better AJAX request - GET   Syntax:   $(“selector”).load(            URL,            [data],    GET            [callback] ...
Better AJAX request - GET$(“selector”).load(    “ajax/getdata”,     ”company=yahoo&loc=india”);
Better AJAX request - POST   Syntax:   $(“selector”).load(             URL,             [data],                           ...
Better AJAX request - POST$(“selector”).load(    “ajax/getdata”,     { company: ‘yahoo’, loc: ‘india’ });
Better AJAX requestSyntax:$(“selector”).load(          URL,          [data],          [callback]); (responseText, textStat...
AJAX, jQuery &   JSON
JSONJavaScript Object Notation• data-interchange format  •   Light weight  •   Human readable  •   And better than XML  • ...
JSON - Examplevar json = {    “id”: “23IT64”,    “name”: {                      “first”: “Sivasubramaniam”,               ...
JSON – Access (1)var json ={    “id”: “23IT64”,    “name”: {                  “first”: “Sivasubramaniam”,                 ...
JSON – Access (2)var json ={                         json.name.first    ”id”: “23IT64”,    “name”: {                      ...
AJAX - JSON RequestSyntax:$.getJSON(        URL,        [data],        [success callback]);
AJAX - JSON Request                         ”company=yahoo&loc=india”Syntax:                                 GET$.getJSON(...
AJAX - JSON RequestSyntax:             Success_callback(                         json_data,$.getJSON(               [textS...
AJAX - JSON Request - Example$.getJSON (     “ajax/getjson”,     ”company=yahoo&loc=india”,     function(json) {          ...
AJAX, jQuery &Remote Script
Let’s load a piece ofJavascript from Serverand execute it.
AJAX – Script RequestSyntax:$.getScript(       URL,       [success callback]);
AJAX – Script RequestSyntax:           success_callback(                       [script_data],$.getScript(           [textS...
AJAX – Script Request - Example$.getScript(     “ajax/getscript”,     function() {            $("#mydiv").html(“Script Loa...
A Simple GET   AJAX Request
AJAX – GET RequestSyntax:$.get(          URL,          [data],          [success callback],          [response data type]);
AJAX – GET RequestSyntax:                  { company: ‘yahoo’, loc: ‘india’ }$.get(          URL,          [data],        ...
AJAX – GET RequestSyntax:               success_callback($.get(                     data,                           [textS...
AJAX – GET RequestSyntax:                      •   html$.get(                       •   xml                             • ...
AJAX – GET Request - Example$.get(     “ajax/getdata”,     { company: ‘yahoo’, loc: ‘india’ },     function(responseText) ...
A Simple POST   AJAX Request
AJAX – POST RequestSyntax:$.post(          URL,          [data],          [success callback],          [response data type...
AJAX – POST RequestSyntax:                  { company: ‘yahoo’, loc: ‘india’ }$.post(          URL,          [data],      ...
AJAX – POST RequestSyntax:               success_callback($.post(                    data,                           [text...
AJAX – POST RequestSyntax:                      •   html$.post(                      •   xml                             •...
AJAX – POST Request - Example$.post(     “ajax/postdata”,     { company: ‘yahoo’, loc: ‘india’ },     function(responseTex...
And we are done with the      “basics”
And what happens when AJAX       requests are      “failed”?Lets do advanced AJAX 
Global Setup                $.ajaxSetup()                 •   async•   type                           •   global          ...
Global AJAX Event Handlers• .ajaxSend() • .ajaxComplete()• .ajaxStart() • .ajaxSuccess ()• .ajaxStop() • .ajaxError()     ...
.ajaxStart() & .ajaxStop()var ajax_load = “<img src=“loading.gif”/>$("*").ajaxStart(function(){     $("#loading").html(aja...
.ajax() - Examples$.ajax ( {     url: “ajax/load“,     success: function(data) {           $(‘#result).html(data);     }});
.ajax() - Examples$.ajax ( {     url: “ajax/get“,     type: “GET“,     cache: true}).done(function( data) {      $("#resul...
.ajax() - Examples$.ajax ( {     url: “ajax/post“,     type: “POST“,     data: { company: “yahoo", loc: “india" }}).done(f...
.ajax() - Examples$.ajax ( {     url: “ajax/js“,     type: “GET“,     dataType: “script”,});
.ajax() - Examples$.ajax ( “ajax/load" )     .done (function() { alert("success"); })     .fail (function() { alert("error...
Summaryhttp://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/
Demo
Thank You!            siva@sivaa.inhttps://www.facebook.com/sivasubramaniam.arun
References•   http://www.clickonf5.org/2902/schedule-meeting-send-invitation-gmail/•   http://explainafide.com.au/rss-feed...
Simplify AJAX using jQuery
Simplify AJAX using jQuery
Simplify AJAX using jQuery
Upcoming SlideShare
Loading in...5
×

Simplify AJAX using jQuery

3,037

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,037
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
110
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Simplify AJAX using jQuery"

  1. 1. Simplify AJAX using jQuery December 24, 2012 Sivasubramaniam Arunachalam @sivaa_in http://www.meetup.com/Online-Technology-User-Group/events/87541132/
  2. 2. It’s me!• Application Developer• Technical Consultant• Process Mentor
  3. 3. It’s about you!Web(Application) Developer & Tasted jQuery
  4. 4. Expectations• Introduction• No Server Specific• Not a tutorial• Not a reference guide
  5. 5. Introduction to AJAXAsynchronous - No refresh - No redirection - Same LifelineJavaScriptAnd XML
  6. 6. XMLHttpRequest
  7. 7. Google and AJAX
  8. 8. AJAX – The Flowhttp://www.cs.uky.edu/~paulp/CS316F12/CS316AJAX_html_m79697898.png
  9. 9. http://www.cs.uky.edu/~paulp/CS316F12/CS316AJAX_html_m79697898.png
  10. 10. http://www.cs.uky.edu/~paulp/CS316F12/CS316AJAX_html_m79697898.png
  11. 11. AJAX in Javascript - Initialize
  12. 12. AJAX in Javascript - Callback
  13. 13. AJAX in Javascript - Send
  14. 14. HTTP Cache related Fields• Expires• Last-Modified• Cache-Control
  15. 15. Expires
  16. 16. Last-Modified
  17. 17. Cache-Control
  18. 18. POST - n/a
  19. 19. 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
  20. 20. IE always Caches AJAX requests by Default
  21. 21. Simple HackJust add random number to request URL
  22. 22. The jQuery Way
  23. 23. Simple AJAX request load()
  24. 24. Simple AJAX requestSyntax:$(“selector”).load(URL);
  25. 25. Simple AJAX requestExample:$(“#myDiv”).load(“/get.html”);
  26. 26. Event are ImportantExample:$(“#myButton”).click(function(event){ $(“#myDiv”).load(“/get.html”);});
  27. 27. Process a Parturl = ajax/load_basicurl = ajax/load_basic #image <dom id=“image”>…</dom>Example:<a href=“url" id="image"> <img src=“img.jpg”></a>
  28. 28. Better AJAX requestSyntax:$(“selector”).load( URL, [data], [callback]);
  29. 29. Better AJAX request - Methods Syntax: $(“selector”).load( URL, [data], GET / POST [callback] );
  30. 30. Better AJAX request - GET Syntax: $(“selector”).load( URL, [data], GET [callback] ); ”company=yahoo&loc=india”
  31. 31. Better AJAX request - GET$(“selector”).load( “ajax/getdata”, ”company=yahoo&loc=india”);
  32. 32. Better AJAX request - POST Syntax: $(“selector”).load( URL, [data], POST [callback] ); { company: ‘yahoo’, loc: ‘india’ }
  33. 33. Better AJAX request - POST$(“selector”).load( “ajax/getdata”, { company: ‘yahoo’, loc: ‘india’ });
  34. 34. Better AJAX requestSyntax:$(“selector”).load( URL, [data], [callback]); (responseText, textStatus, XMLHttpRequest)
  35. 35. AJAX, jQuery & JSON
  36. 36. JSONJavaScript Object Notation• data-interchange format • Light weight • Human readable • And better than XML • Now language independent
  37. 37. JSON - Examplevar json = { “id”: “23IT64”, “name”: { “first”: “Sivasubramaniam”, “last”: “Arunachalam” }, “profession”: “developer”}
  38. 38. JSON – Access (1)var json ={ “id”: “23IT64”, “name”: { “first”: “Sivasubramaniam”, “last”: “Arunachalam” }, “profession”: “developer” json.id}
  39. 39. JSON – Access (2)var json ={ json.name.first ”id”: “23IT64”, “name”: { “first”: “Sivasubramaniam”, “last”: “Arunachalam” }, “profession”: “developer”}
  40. 40. AJAX - JSON RequestSyntax:$.getJSON( URL, [data], [success callback]);
  41. 41. AJAX - JSON Request ”company=yahoo&loc=india”Syntax: GET$.getJSON( { company: ‘yahoo’, loc: ‘india’ } URL, No Post & GET only [data], [success callback]);
  42. 42. AJAX - JSON RequestSyntax: Success_callback( json_data,$.getJSON( [textStatus], URL, [jqXHR] ) [data], [success callback]);
  43. 43. AJAX - JSON Request - Example$.getJSON ( “ajax/getjson”, ”company=yahoo&loc=india”, function(json) { $("#mydiv01").html(json.id); $("#mydiv02").html(json.profession); });
  44. 44. AJAX, jQuery &Remote Script
  45. 45. Let’s load a piece ofJavascript from Serverand execute it.
  46. 46. AJAX – Script RequestSyntax:$.getScript( URL, [success callback]);
  47. 47. AJAX – Script RequestSyntax: success_callback( [script_data],$.getScript( [textStatus], [jqXHR] URL, ) [success callback]);
  48. 48. AJAX – Script Request - Example$.getScript( “ajax/getscript”, function() { $("#mydiv").html(“Script Loaded..”); }); Script will be executed automatically!
  49. 49. A Simple GET AJAX Request
  50. 50. AJAX – GET RequestSyntax:$.get( URL, [data], [success callback], [response data type]);
  51. 51. AJAX – GET RequestSyntax: { company: ‘yahoo’, loc: ‘india’ }$.get( URL, [data], [success callback], [response data type]);
  52. 52. AJAX – GET RequestSyntax: success_callback($.get( data, [textStatus], URL, [jqXHR] [data], ) [success callback], [response data type]);
  53. 53. AJAX – GET RequestSyntax: • html$.get( • xml • json URL, • script [data], [success callback], [response data type]);
  54. 54. AJAX – GET Request - Example$.get( “ajax/getdata”, { company: ‘yahoo’, loc: ‘india’ }, function(responseText) { $("#content").html(responseText) }, “html”);
  55. 55. A Simple POST AJAX Request
  56. 56. AJAX – POST RequestSyntax:$.post( URL, [data], [success callback], [response data type]);
  57. 57. AJAX – POST RequestSyntax: { company: ‘yahoo’, loc: ‘india’ }$.post( URL, [data], [success callback], [response data type]);
  58. 58. AJAX – POST RequestSyntax: success_callback($.post( data, [textStatus], URL, [jqXHR] [data], ) [success callback], [response data type]);
  59. 59. AJAX – POST RequestSyntax: • html$.post( • xml • json URL, • script [data], [success callback], [response data type]);
  60. 60. AJAX – POST Request - Example$.post( “ajax/postdata”, { company: ‘yahoo’, loc: ‘india’ }, function(responseText) { $("#content").html(responseText) }, “html”);
  61. 61. And we are done with the “basics”
  62. 62. And what happens when AJAX requests are “failed”?Lets do advanced AJAX 
  63. 63. Global Setup $.ajaxSetup() • async• type • global • cache •• url beforeSend()• username • timeout • complete()• password • contentType • success() • dataType • error() Override is possible
  64. 64. Global AJAX Event Handlers• .ajaxSend() • .ajaxComplete()• .ajaxStart() • .ajaxSuccess ()• .ajaxStop() • .ajaxError() • .done() • .fail() • .always()
  65. 65. .ajaxStart() & .ajaxStop()var ajax_load = “<img src=“loading.gif”/>$("*").ajaxStart(function(){ $("#loading").html(ajax_load);});$("*").ajaxStop(function(){ $("#loading").html("");});
  66. 66. .ajax() - Examples$.ajax ( { url: “ajax/load“, success: function(data) { $(‘#result).html(data); }});
  67. 67. .ajax() - Examples$.ajax ( { url: “ajax/get“, type: “GET“, cache: true}).done(function( data) { $("#results").html(data);});
  68. 68. .ajax() - Examples$.ajax ( { url: “ajax/post“, type: “POST“, data: { company: “yahoo", loc: “india" }}).done(function( data) { $("#results").html(data);});
  69. 69. .ajax() - Examples$.ajax ( { url: “ajax/js“, type: “GET“, dataType: “script”,});
  70. 70. .ajax() - Examples$.ajax ( “ajax/load" ) .done (function() { alert("success"); }) .fail (function() { alert("error"); }) .always (function() { alert("complete") });
  71. 71. Summaryhttp://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/
  72. 72. Demo
  73. 73. Thank You! siva@sivaa.inhttps://www.facebook.com/sivasubramaniam.arun
  74. 74. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×