• Save
Upcoming SlideShare
Loading in...5




JQuery Javascript AJAX

JQuery Javascript AJAX
Deferred Objects



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

JavaScript JQUERY AJAX JavaScript JQUERY AJAX Presentation Transcript

  • JavaScript Essentials JQuery & AJAX Mak Bhatamrekar http://github.com/makrand-bkar AJCPhttp://meetup.com/my-ajcpAtlanta Java Concept Pros
  • 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
  • Why JQuery
  • 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
  • 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);
  • 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
  • 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})
  • 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 http://query.yahooapis.com/v1?format=json&callback=cbfuncStep2: servers responds as cbfunc(JSON String)Step3: Browser treats the response as a script, downloads and executes the script.
  • 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 successdfd.fail() -- when call is faileddfd.always – always call
  • Appendix• Source code can be found on github – https://github.com/makrand-bkar/ajip_javascript – (11-*.html and 12-*.html) – https://github.com/makrand-bkar/RestServer (download the war file from /downloads)
  • Questions• Why Jquery ?• DOM Manipulations Questions• How to Invoke Ajax()