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

Simplify AJAX using jQuery

  • 2,631 views
Uploaded on

 

More 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,631
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
81
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