Simplify AJAX using jQuery

4,058 views
3,744 views

Published on

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

No Downloads
Views
Total views
4,058
On SlideShare
0
From Embeds
0
Number of Embeds
70
Actions
Shares
0
Downloads
129
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

×