What is AJAX jQuery

There will be hardly any web application of web which does not employ AJAX. Actually, you can’t imagine an interactive application without AJAX. AJAX is an integral part of the web development stack. In this tutorial, we shall explain AJAX and how can we implement AJAX.

Let’s start with what Wikipedia  says about AJAX.

1. A method for exchanging data asynchronously between browser and server, thereby avoiding page reloads. The XMLHttpRequest (XHR) object is usually used, but sometimes an IFrame object or a dynamically added tag is used instead.

2. A format for the data sent to the browser. Common formats include XML, pre-formatted HTML, plain text, and JavaScript Object Notation (JSON). This data could be created dynamically by some form of server-side scripting.

Basically, AJAX enables us to send HTTP requests from client to server and serve back with the server’s response and that too without reloading the web page.

JavaScript does this for you with the help of XML Http Request object, which is responsible for sending the request to server and processing the response.

Though we would not be going into the details of creating such objects in the case of different browsers. jQuery ajax() function handles most of the part.

You don’t need to worry about anything else but just need to have a look at jQuery’ ajax() function and its parameters.

Here is the syntax of jQuery ajax function:

[code]
jQuery.ajax( url [, settings ] );
[/code]

The first parameter which is named “url”, is actually an URL in string format, to which a request will be sent.

The next parameter which is “settings”, involves a set of key/value pairs, using which AJAX request can be configured accordingly. We shall explore these parameters but first, let’s try to use ajax function as an example.

// Ajax request to save data on the server

[code]
$(‘#submit’).click(function(event) {
event.preventDefault();

$.ajax({
type: "POST",
url: "http://localhost/test/submit.php",
data: { name: "Mike", email: "mike@gmail.com" }
})
.done(function( msg ) {
alert( "Data Saved Successfully: " + msg );
});
});

[/code]

So we can implement jquery’s ajax function with these set of lines(off course you also need to include jQuery library on your page).

Let’s try to understand each parameter one by one.

type: Set the request type and possible options POST, GET and PUT. In case you don’t provide any option then GET is the default one.

url : As already explained above, url of the page is to be called.

data: It can be either a plain object or string or array. This parameter is responsible for sending data the server and is converted to a query string before sending it to server.

done callback: This method is called upon receiving a response from the server. Please note that success() method is deprecated and use done() method instead.

So you have just learned about making an AJAX call. In our next blog, we shall explore the various available parameters in jQuery function and will learn more about the fail and always callback.

Mohd Ozair

OzairWebs is a free WordPress and SEO resource Web Development company. The main goal of this site is to provide quality tips, tricks, hacks, and Web Development Services that allow WordPress beginners to improve their sites.

Leave a Reply