jQuery AJAX: What, Why and How?

Have you been always curious about what is jQuery AJAX, why to use jQuery AJAX and how to use AJAX in jQuery? In this article, I am going to introduce you to the concepts of jQuery AJAX. Read on to find out more.

What is jQuery AJAX?

Before we start with the definitions and other good stuff, let’s take a quick look at what jQuery & AJAX stands for.

jQuery – It is a JavaScript framework that helps speed up web development by providing code for most commonly used actions, such as animation, display/hide elements on web page,  etc.

AJAX – It stands for Asynchronous JavaScript and XML. “Asynchronous” means an action occurring on the page, after it’s loaded.

Why to use AJAX in jQuery?

Why to primarily use AJAX?

In general sense, when a page is loaded by a web browser, the content remains the same until the user leaves the page or up until he presses the submit button. When AJAX is used, the JavaScript requests new content from the server and makes changes to the current page and displays the new information dynamically. All of this happens within the already loaded page, without having to refresh, submit or redirecting it.

So in short, AJAX is used to load data in the background and display it on the webpage, without reloading the whole page.

Popular examples of applications using AJAX:
Gmail, Twitter Tweets, Facebook Like button, Youtube videos, Google Maps, etc.

So really, why should you use AJAX in jQuery?

Using AJAX with jQuery can be a great combination for immensely speeding up the process of web development. Once AJAX is implement, most of the process will be transparent to the user as processing takes place in the background and users will be able to take advantage of the facilities offered, without having to spend more time on page reload, refresh or redirection. So altogether, it will provide rich user experience and save time to your users.

Secondly, writing regular AJAX code can be a bit tricky and could get out of control at times. This is because different browsers have different syntax for AJAX implementation.So this means that its highly likely that you will end up writing extra code to test for different browsers and eventually end up spending more time. So to avoid this and to make sure that the same code works uniformly across different browsers, jQuery takes care of this automatically and lets us write AJAX functionality with only one single line of code and this code will work evenly across different browsers.

How to use AJAX in jQuery?

jQuery provides several methods for AJAX functionality. Using the different AJAX methods, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post. You can also load external data directly into the selected HTML elements of your web page & show animations in the process to keep the user interested. So before we start diving deep into AJAX, let’s look at the most important requirement. It is to add the jQuery library to your page. Without it, the AJAX functionality won’t work.

Add jQuery to web page:

<script type="text/javascript" src="js/jquery_1.7.1_min.js"></script>

In the above code src points to the physical location of the jQuery core file. I am using a minified version of the jQuery core library and it’s located in the js folder. This js folder is in turn, located in the root directory of my website. Just update the source and add the above code just above the </head> tag in your web page and make sure that you download and place the jQuery core file in the js folder. If you would like this to be take care of automatically i.e. if you would like to always include latest version of jQuery automatically in your web page, then click here.

So now let’s look at the basic syntax of using AJAX in jQuery:

$.ajax();

Are you surprised? Yes, that’s it for the basic syntax. There are others things that go into it, such as declaration of events, etc. We will be discussing them later in this article. You may have even seen something like this:

$.ajax({ });

Or like this

$.ajax({

});

The above code means that you can split the code as shown and this will have the same effect as the code shown previously. So what would go within the curly braces? Well, that’s the place where you enter the “settings”.  Here is a general representation:

$.ajax({
settings,
events
});

The settings and events are optional. Here’s a much better example:

$.ajax({
cache: false,
type: "POST",
url: "target_url.php",
data: "country=USA&state=Texas",
success: function(response)
{
alert( "Response received: " + response);
}
});

There are some key points to understand in the above code. Here they are:

cache, type, url, data are individual settings.

cache – If the application is static, then cache can be used to cache AJAX calls to speed up the app. But if the data being dealt with is dynamic & can change, then it’s better to use cache value as false to prevent caching, thereby requesting the accurate results via the calls.

type – It indicates the type of request that is being sent i.e. whether if it is $_POST or $_GET or $_REQUEST. The most common forms are $_POST or $_GET.

url – It is the the server side processing target file that handles the incoming data, processes it & sends output based on the processing done or as per the coding. It this target file does not exist, then the page will simply not show any response other than 404 & that too in the debugging mode.

data – This is the actual data that is being sent to the target url to process. Here Country name & State name are passed for the sake of the example.

success – This is an event. This event, as it’s name suggests, occurs only when the response from the target URL is successfully received without any errors. There are other events such as error, complete that occur upon receiving an error or when the ajax operation is complete.

So this would be your starting point for ajax development understanding  and in understanding how jQuery html ajax php etc. can be used together to make a static/dynamic AJAX application. If you want to learn AJAX in much more detail, then remember to bookmark our blog and keep visiting it often for updates. You may also opt to subscribe for our emails so that you don’t miss our next tutorial on AJAX in jQuery.

Your Turn!

Do you know like this article on ajax Query? Feel free to share your thoughts by commenting below.