AJAX Revolution (Part II) - jQuery.Ajax()

Previously, we briefly covered the early days of Ajax, the technology that allows developers to make asynchronous HTTP requests without the need for a full-page refresh.

It has changed the Web.

jQuery and jQuery.ajax()

Designed for cross-browser Javascript programming and simplifying DOM manipulation, jQuery has been the most widely deployed JavaScript library. It was first released in 2006 by John Resig, still a senior computer scient college student. A few years later, it added Ajax support.

jQuery.ajax() is a wrapper XMLHttpRequest, the raw browser object, into a simplified and cross-browser consistent functionality for asynchronous request/response. It provides the core functionality of Ajax in jQuery.

Quick Syntax:

1	$.ajax(url[, settings])

Parameter description:

URL: A string URL to which you want to submit or obtain the data,
options (optional): Configuration options for Ajax request, usually using JSON format.

For example:

1	$.ajax({name1:value1, name2:value2, ... })

Check out the complete list of Ajax settings https://api.jquery.com/jquery.ajax/#jQuery-ajax-settings

The Basics: Send Ajax requests and get the JSON data using jQuery.ajax() method

By default ajax() method performs HTTP GET request if the options parameter does not include the method option.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$.ajax({
url: "/app-url/relative-url",
type: "GET", //Or "DELETE" for http delete calls
dataType: 'json',
})
.done (function(data, textStatus, jqXHR) {
alert("Success: " + response);
})
.fail (function(jqXHR, textStatus, errorThrown) {
alert("Error");
})
.always (function(jqXHROrData, textStatus, jqXHROrErrorThrown) {
alert("complete");
});

The Basics: Send Http POST request using ajax()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$.ajax({
url: "/app-url/relative-url",
type: "POST", //Use "PUT" for HTTP PUT methods
dataType: 'json',
data: {
key : "value",
}
})
.done (function(data, textStatus, jqXHR) {
alert("Success: " + response);
})
.fail (function(jqXHR, textStatus, errorThrown) {
alert("Error");
})
.always (function(jqXHROrData, textStatus, jqXHROrErrorThrown) {
alert("complete");
});

The above two examples illustrate the most popular jQuery.ajax() use cases.

Pay special attention to method done() and fail(). They are some of the most common jQuery Deferred methods (remember Ajax is asynchronous) for Ajax events handling. Though you don’t need to master them all, I suggest getting to know at least those two.

Note that I didn’t use some of jQuery’s Ajax shorthand methods:

They are convenient methods for making Ajax requests in a few lines of code. They do the same thing but make it quicker to write an AJAX request – $.post makes an HTTP POST request, and $.get makes an HTTP GET request. Both H are the most used HTTP methods. If you aren’t familiar with these, I strongly recommend you check out the HTTP protocol.

Should you use jQuery.ajax()?

You can still use jQuery.ajax() for asynchronous scripting, but right now (as of year 2021), another more modern method is deprecating XMLHttpRequest. It is the new browser built-in object called fetch.

We will cover fetch in the final installment of the Ajax revolution.

Recommending readings: