Your SlideShare is downloading. ×
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



Published on

JQuery Javascript AJAX …

JQuery Javascript AJAX
Deferred Objects

Published in: Technology

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. JavaScript Essentials JQuery & AJAX Mak Bhatamrekar AJCP Java Concept Pros
  • 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. Why JQuery
  • 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. 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. 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. 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. 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. 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. Appendix• Source code can be found on github – – (11-*.html and 12-*.html) – (download the war file from /downloads)
  • 11. Questions• Why Jquery ?• DOM Manipulations Questions• How to Invoke Ajax()
  • 12. THANK YOU