• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
JavaScript JQUERY AJAX
 

JavaScript JQUERY AJAX

on

  • 980 views

JQuery Javascript AJAX

JQuery Javascript AJAX
JSONP
Deferred Objects

Statistics

Views

Total Views
980
Views on SlideShare
980
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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()
    • THANK YOU