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

JavaScript JQUERY AJAX

1,031
views

Published on

JQuery Javascript AJAX …

JQuery Javascript AJAX
JSONP
Deferred Objects

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,031
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. JavaScript Essentials JQuery & AJAX Mak Bhatamrekar http://github.com/makrand-bkar AJCPhttp://meetup.com/my-ajcpAtlanta 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 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.
  • 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 successdfd.fail() -- when call is faileddfd.always – always call
  • 10. 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)
  • 11. Questions• Why Jquery ?• DOM Manipulations Questions• How to Invoke Ajax()
  • 12. THANK YOU