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

Mon, 23 Aug 2021 21:31:52 +0000

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:

The post AJAX Revolution (Part II) – jQuery.Ajax() appeared first on phpGrid - PHP Datagrid.

AJAX Revolution (Part I) – XMLHttpRequest

Fri, 30 Jul 2021 23:20:46 +0000

Image Source: AJAX logo by gengns.svg

Intro

Ajax is NOT a programming language but a technique for accessing web servers from or send data to a web server without refreshing the page, usually via javascript.

In 1999, Microsoft first explored a web-based asynchronies technique in its Internet Explorer 5 as an ActiveX object, XMLHttpRequest, adopted from an earlier implementation in Microsoft Outlook. Then, Mozilla, Safari, and other browsers soon followed. Later in 2005, Jesse James Garrett referred to this technique and its set of technologies in a popular blog post and coined the term “AJAX” stands for Asynchronous JavaScript + XML.

AJAX = Asynchronous JavaScript + XML.

AJAX’s most interesting characteristic is its “asynchronous” nature, which means it can communicate with the network server and update web pages asynchronously, avoiding the delay while waiting to retrieve data from the server.

It’s worth mentioning that AJAX name is misleading as the letter X standards for XML. Before JSON was invented and standardized, XML was the only exchange format standard. Nowadays, JSON is the new de-facto format standard. You can learn more about JSON via JSON in Plain English.

Ajax Sample Code

The following was how to initiate Ajax requests (should be no longer used since all modern browsers have a built-in XMLHttpRequest object to request data from a server)

1
2
3
4
5

if (window.XMLHttpRequest) {
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 and older
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

After making a request, you need to tell the XMLHttp request object which JavaScript anonymous functions ( functions without name) will handle the response by setting the onreadystatechange property:

1
2
3

httpRequest.onreadystatechange = function(){
// Process the server response here
};

Inside this anonymous function, it must verify the XMLHttp request’s state. For example, XMLHttpRequest.DONE signals that full server response was received, and it’s OK to continue processing the response.

1
2
3
4
5

if (httpRequest.readyState === XMLHttpRequest.DONE) {
// Everything is good, the response was received.
} else {
// Not ready yet.
}

Before Ajax, only client-server was the only computer applications model including, network printing, and the web. Basically, the client sends a request, and the server returns a response.

With Ajax, it added an abstract layer of communication between the traditional client and server model:

Finally, to make an actual request, use httpRequest.open()

1 2	httpRequest.open('GET', 'http://www.example.com/abc.file', true); httpRequest.send();

It is easy to understand two methods:

The first parameter of open() is one of the HTTP request methods – GET (read), POST (update, insert), and DELETE, PUT.
The second parameter is the URL you’re sending the request to. By default, you cannot call URLs on 3rd-party domains as a security measure ruled via HTTP access control (CORS), which will be a discussion for another time.
The optional third parameter (defaults to true) sets whether the request is asynchronous.

Next, after done examining Ajax readyState, we should also check the actual HTTP response status codes. A successful AJAX call should return response code “200 OK“.

In summary

AJAX uses a combination of:

it is the use of the XMLHttpRequest object to communicate with servers
JSON is the standard data exchange format for asychronouse scripting.

Coding asynchronously back then wasn’t exactly an easy feat. Fortunately, jQuery.ajax() was there to make asynchronously javascript calls easier by providing a rich set of ready-to-use AJAX methods. I will cover more jQuery.ajax() in future posts.

What’s coming next

jQuery.ajax() wraps XMLHttpRequest object and provides additional functionality that simplified form and cross browser consistent functionality.
Fast forward to the current time, The Fetch API, has been standardized as a modern approach to asynchronous network requests and uses Promises as a building block with good support across the major browsers.

Part 2 jQuery.ajax() (stay tuned)

Part 3 Fetch API with Promise

jQuery Ajax Archives | phpGrid - PHP Datagrid