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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Simplify AJAX using jQuery

2,904

Published on

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

No Downloads
Views
Total Views
2,904
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
101
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

×