JavaScript JQUERY AJAX

JavaScript JQUERY AJAX

• 1.
  JavaScript Essentials JQuery & AJAX Mak Bhatamrekar http://github.com/makrand-bkar AJCP http://meetup.com/my-ajcp Atlanta Java Concept Pros
• 2.
  JQuery Features Feature Desc AJAX $.ajax(..), $.getJSON(..), $.get(..),$.post(), $.load() $.ajax({url:”address”,success: “handler”}); (Base method) $(“#myid”).load(“address”) - loads HTML Element DOM 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 html Cross Browser Support Supports all Major Browsers IE(>6.0), FF, Safari,Chrome Jquery 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 and span.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 data JQuery Chaining – $("#p1").css("color","red").slideUp(2000).slideDown(2000);
• 6.
  Restful AJAX –X stands for JSON Async JavaScript and XML. Fetch data from Server Asynchronously Advantages • 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 enabled REST 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 Method inputdata }) • 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) PROBLEM Same originpolicy of browser prevents a script loaded from one domain to make ajax calls on another domain. JSONP Solution - Return a JSON Object wrapped in a requested Call back. This Script is injected on Window Object, executed . Steps Step1 – Ajax call is made with callback param http://query.yahooapis.com/v1? format=json&callback=cbfunc Step2: servers responds as cbfunc(JSON String) Step3: Browser treats the response as a script, downloads and executes the script.
• 9.
  Deferred Object • Enablesto 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 handlers dfd.done() -- when call is success dfd.fail() -- when call is failed dfd.always – always call
• 10.
  Appendix • Source codecan 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)
• 11.
  Questions • Why Jquery? • DOM Manipulations Questions • How to Invoke Ajax()
• 12.
  THANK YOU