Simplify AJAX using jQuery
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • 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
3,086
On Slideshare
3,056
From Embeds
30
Number of Embeds
3

Actions

Shares
Downloads
74
Comments
0
Likes
3

Embeds 30

http://www.technofranchise.com 17
http://technofranchise.com 12
http://localhost 1

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