Advantages of jQuery Ajax
The jQuery library also includes following events which will be fired based on the state of the Ajax request.
Cross-browser support . Simple methods to use . Ability to send GET and POST requests .
Ability to Load JSON, XML, HTML or Scripts .
- Let's look at an overview of important jQuery Ajax methods in the next section.
- If you are new with AJAX, I would recommend you go through our Ajax Tutorial before proceeding further.
- JQuery is a great tool which provides a rich set of AJAX methods to develop next generation web application.
What About jQuery and AJAX?
This is very easy to load any static or dynamic data using JQuery AJAX. JQuery provides load() method to do the job −.
jQuery AJAX Methods
Here is the simple syntax for load() method −. Here is the description of all the parameters −.
Loading Simple Data
URL − The URL of the server-side resource to which the request is sent. It could be a CGI, ASP, JSP, or PHP script which generates data dynamically or out of a database. data − This optional parameter represents an object whose properties are serialized into properly encoded parameters to be passed to the request.
If specified, the request is made using the POST method. If omitted, the GET method is used.
callback − A callback function invoked after the response data has been loaded into the elements of the matched set. The first parameter passed to this function is the response text received from the server and second parameter is the status code.
Consider the following HTML file with a small JQuery coding −. Here load() initiates an Ajax request to the specified URL /jquery/result.html file. After loading this file, all the content would be populated inside
Assuming, our /jquery/result.html file has just one HTML line −. When you click the given button, then result.html file gets loaded. There would be a situation when server would return JSON string against your request.
JQuery utility function getJSON() parses the returned JSON string and makes the resulting string available to the callback function as first parameter to take further action. Here is the simple syntax for getJSON() method −. Here is the description of all the parameters −. URL − The URL of the server-side resource contacted via the GET method.
data − An object whose properties serve as the name/value pairs used to construct a query string to be appended to the URL, or a preformatted and encoded query string.
Getting JSON Data
callback − A function invoked when the request completes. The data value resulting from digesting the response body as a JSON string is passed as the first parameter to this callback, and the status as the second.
Consider the following HTML file with a small JQuery coding −. Here JQuery utility method getJSON() initiates an Ajax request to the specified URL result.json file.
After loading this file, all the content would be passed to the callback function which finally would be populated inside
Many times you collect input from the user and you pass that input to the server for further processing.
JQuery AJAX made it easy enough to pass collected data to the server using data parameter of any available Ajax method. This example demonstrate how can pass user input to a web server script which would send the same result back and we would print it −. Here is the code written in result.php script −. Now you can enter any text in the given input box and then click "Show Result" button to see what you have entered in the input box.
JQuery AJAX Methods
You have seen basic concept of AJAX using JQuery. Following table lists down all important JQuery AJAX methods which you can use based your programming need −.
You can call various JQuery methods during the life cycle of AJAX call progress. Based on different events/stages following methods are available −. You can go through all the AJAX Events. AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page.
What is AJAX?
JQuery AJAX Events
|* Selector||$(“*”)||Selects all the elements of an html page.|
|#id Selector||$(“#myid”)||Selects the element with id value equals to “myid”.|
|.class Selector||$(“.myclass”)||Selects all the elements with class “myclass”.|
|Multiple class Selector||$(“.myclass1,.myclass2”)||Selects all the elements with class “myclass1” or “myclass2”.|
|Element Selector||$(“p”)||Selects all the paragraphs|
|Multiple elements Selector||$(“h2,p,a”)||Selects all the h2, p and a elements of an html page|
Passing Data to the Server
In short; AJAX is about loading data in the background and display it on the webpage, without reloading the whole page.
jQuery AJAX Example
|click||jQuery click event occurs when a user clicks on an html element.|
|dblclick||jQuery dblclick event occurs when a user double clicks on an html element.|
|mouseenter||jQuery mouseenter event occurs when the mouse pointer enters the html element.|
|mouseleave||jQuery mouseleave event occurs when the mouse pointer leaves the html element.|
|mousedown||jQuery mousedown event occurs when any of the mouse button is pressed down while the mouse pointer is over an html element.|
|mouseup||jQuery mouseup event occurs when any of the mouse button is released while the mouse pointer is over an html element.|
|hover||jQuery hover event is a combination of mouseenter() and mouseleave() methods. First event handler function executes when mouse pointer enters the html element and the second event handler function executes when the mouse pointer leaves the html element.|
jQuery Form Events
|focus||jQuery focus event occurs when a form field gets focus.|
|blur||jQuery blur event occurs when a form field loses focus.|
|submit||jQuery submit event occurs when a form is submitted.|
|change||jQuery change event occurs when the value of an element has been changed. The applicable elements for this event are: ,|
jQuery Keyboard Events
|keypress||jQuery keypress event occurs when a button is pressed down. The keypress event is not triggered for special keys such as ALT, CTRL, SHIFT, ESC.|
|keydown||jQuery keydown event occurs when a keyboard key is pressed down. Unlike keypress event, this event is triggered for ALT, CTRL, SHIFT, ESC keys.|
|keyup||jQuery keyup event occurs when a keyboard key is released|
jQuery Window Events
|resize||jQuery resize event occurs when the browser window is resized.|
|scroll||jQuery scroll event occurs when user scrolls in the specified html element.|
jQuery Effects tutorials
Examples of applications using AJAX: Gmail, Google Maps, Youtube, and Facebook tabs.
|jQuery show and hide||jQuery show() and hide() methods explained with examples.|
|jQuery Fading effects||jQuery fadeIn(), fadeOut(), fadeToggle() and fadeTo() methods explained with examples|
|jQuery sliding effects||jQuery slideDown(), slideUp() and slideToggle() methods explained with examples.|
|jQuery animate||jQuery animate() method with examples.|
|jQuery stop()||jQuery stop() method explained with examples.|
|jQuery Callback||jQuery callback function with examples.|
|jQuery chaining||jQuery chaining multiple methods/actions.|