Your SlideShare is downloading. ×
  • Like
Simplify AJAX using jQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Simplify AJAX using jQuery

  • 2,710 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,710
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
84
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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