Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

JQuery Javascript AJAX
Deferred Objects

Published in: Technology
  • Be the first to comment


  1. 1. JavaScript Essentials JQuery & AJAX Mak Bhatamrekar AJCP Java Concept Pros
  2. 2. JQuery FeaturesFeature DescAJAX $.ajax(..), $.getJSON(..), $.get(..),$.post(), $.load() $.ajax({url:”address”,success: “handler”}); (Base method) $(“#myid”).load(“address”) - loads HTML ElementDOM Manipulation / Search $(“p.myStyle”).addClass(“BoldStyle”).show(). Easy to find siblings, children, closest, nth element.Animations / Effects fade, show, hide,more..Externalized Events Events are binding happens in JS and not in htmlCross Browser Support Supports all Major Browsers IE(>6.0), FF, Safari,ChromeJquery UI & Plugins Widgets, and lots of Plugins
  3. 3. Why JQuery
  4. 4. DOM Selection • Uses familiar CSS Selector to find Elements. • CSS Selector reads from Right to Left (11.htm)Selector Desc$(“#myId”) Selects Element with a particular ID (only one)$(“h1”) Returns all the h1 elements$(“.myClass”) Returns all the elements that have class “myClass”$(“headerDiv h1 Return all (span= “myClass”) elements which are inside h1 andspan.myClass”) inturn which are inside headerDiv. 1.grossly formed selectors will Slower performance, good idea to add a Class to Element for faster Selection 2.Cache the Selector in a variable if used frequently. var mySel = $(“headerDiv h1 span.myclass”);$(‘input[value=“foo”]’) Returns the input elem whose value is foo
  5. 5. DOM Functions$(“#txBox”).val() / $(“#txBox”).val(“nval”) Get or Set value of elem.e.g TxBox,Input,Button$(“#elem”).html()/$(“#elem”).html(..) Get or Set html of elem e.g div,p etc$(“#e”).siblings(), .children(), .closest() Traversing to the right Element$(“#elem”).click(function) Adds click handler. Some others focus, mouseover, change$.each(obj,function(idx,val){..}); Utilities - Iterate over each object in the elem or object.$.trim(“obj”) Utitlies – trims$.data() attaches custom dataJQuery Chaining –$("#p1").css("color","red").slideUp(2000).slideDown(2000);
  6. 6. Restful AJAX – X stands for JSONAsync JavaScript and XML. Fetch data from Server AsynchronouslyAdvantages • Interactive and Desktop Feel • Refreshes only Data instead of Entire Page • Create Server less Clients, with Cloud and Services.Dis-Advantages • Loose Context Browser History Fwd and Back Button • JavaScript has to be enabledREST Based Calls GET – Fetch Records UPDATE – Update Record(HTTP Verbs) POST – Create Record DELETE – Delete record
  7. 7. Jquery AJAX Functions.$.ajax{url:”addr”, success: handler, • Base Methodinputdata }) • Inputdata can be -- String (url encoding TBD)function handler(data,httpStatus,req) -- JSON literal • Other Options$.post(), $.get() • Convenience /Shorthand Method for AJAX tailored to request$.post(“addr”,success:function) • It also supports chaining from Jquery 1.5$.get(“addr”).success(function).error() • $.ajax({type:”post”,options})$(“#result”).load(url,completeFunc) • Loads a specific page or part of the page • Internall calls $.get$.getJSON() • Load JSON-encoded data from the server using a GET HTTP request. $.ajax({dataType: "json“,options})
  8. 8. JSONP(JSON Padding)PROBLEMSame origin policy of browser prevents a script loaded from one domain to make ajaxcalls on another domain.JSONP Solution - Return a JSON Object wrapped in a requested Call back. This Scriptis injected on Window Object, executed .StepsStep1 – Ajax call is made with callback param servers responds as cbfunc(JSON String)Step3: Browser treats the response as a script, downloads and executes the script.
  9. 9. Deferred Object• Enables to work with values that may not be immediately present like AJAX calls.• Its like Publish/Subscribe, which allows you to perform logic when say couple of AJAX request are finished.• Allows to Wait on multiple AJAX Requests• Ability to attach Multiple Event Handlers//Step1 : dfd = $.deferred() -- Create $.deferred() object//Step2 : function myfunc(){ -- if ( success) dfd.resolve() //Once function is done invoke resolve() else dfd.reject() //if failed invoke reject(), so that deferred can invoke reject stack return dfd.promise() //return the promise}//Step3 : add handlersdfd.done() -- when call is -- when call is faileddfd.always – always call
  10. 10. Appendix• Source code can be found on github – – (11-*.html and 12-*.html) – (download the war file from /downloads)
  11. 11. Questions• Why Jquery ?• DOM Manipulations Questions• How to Invoke Ajax()
  12. 12. THANK YOU