JavaScript JQUERY AJAX

JavaScript Essentials
JQuery & AJAX
Mak Bhatamrekar
http://github.com/makrand-bkar

AJCP

http://meetup.com/my-ajcp
Atlanta Java Concept Pros

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

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

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);

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

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})

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.

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

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()

JavaScript JQUERY AJAX

Recommended

More Related Content

What's hot (20)

Viewers also liked (16)

Similar to JavaScript JQUERY AJAX (20)

More from Makarand Bhatambarekar (8)

Recently uploaded (20)

JavaScript JQUERY AJAX