Jquery Ajax Tutorial For Beginners

Posted on  by admin

AJAX stands for "Asynchronous JavaScript and XML". JavaScript includes features of sending asynchronous http request using XMLHttpRequest object. Ajax is about using this ability of JavaScript to send asynchronous http request and get the xml data as a response (also in other formats) and update the part of a web page (using JavaScript) without reloading or refreshing entire web page.

Advantages of jQuery Ajax

The following figure illustrates the Ajax functionality. The jQuery library includes various methods to send Ajax requests. These methods internally use XMLHttpRequest object of JavaScript. The following table lists all the Ajax methods of jQuery.

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.
  • AJAX is an acronym standing for Asynchronous JavaScript and XML and this technology helps us to load data from the server without a browser page refresh.
  • 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.

Syntax

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

tagged with ID stage.

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.

Example

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

tagged with ID stage. Assuming, our result.json file has following json formatted content −. When you click the given button, then result.json file gets loaded.

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

Try it Yourself ». AJAX = Asynchronous JavaScript and XML.

LinkExampleDescription
* 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

Tutorial linkDescription
clickjQuery click event occurs when a user clicks on an html element.
dblclickjQuery dblclick event occurs when a user double clicks on an html element.
mouseenterjQuery mouseenter event occurs when the mouse pointer enters the html element.
mouseleavejQuery mouseleave event occurs when the mouse pointer leaves the html element.
mousedownjQuery mousedown event occurs when any of the mouse button is pressed down while the mouse pointer is over an html element.
mouseupjQuery mouseup event occurs when any of the mouse button is released while the mouse pointer is over an html element.
hoverjQuery 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

Tutorial linkDescription
focusjQuery focus event occurs when a form field gets focus.
blurjQuery blur event occurs when a form field loses focus.
submitjQuery submit event occurs when a form is submitted.
changejQuery change event occurs when the value of an element has been changed. The applicable elements for this event are: ,