JavaScript JQUERY AJAX
1 like2,544 views
This document provides an overview of JavaScript and jQuery features and AJAX functionality. It discusses jQuery features like DOM manipulation and selection using CSS selectors, animations and effects, event handling, and cross-browser support. It covers jQuery AJAX functions like $.ajax(), $.get(), $.post(), and $.load() for making asynchronous HTTP requests. Deferred objects and promises in jQuery are explained for asynchronous logic. JSONP is described as a solution for cross-domain AJAX calls. Examples of DOM functions, traversal, event binding, and utilities are also provided. Source code examples and links are included in an appendix.
![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](https://image.slidesharecdn.com/javascriptforjavadevpart3ajax-130109200536-phpapp02/85/JavaScript-JQUERY-AJAX-4-320.jpg)
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 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