JQuery Javascript AJAX JSONP Deferred Objects

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 origin policy 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
• 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 handlers
dfd.done() -- when call is success
dfd.fail() -- when call is failed
dfd.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