AJAX

What it is

Historically, a webpage would need to download everything it needs to render a page during the initial loading of the page. This meant that it was impossible to fetch new data in response to user actions, like loading the next stories in a list when the user scrolls down a feed. Asynchronously loading new data is a key feature for making interactive apps, and it is the problem that AJAX solves.

AJAX refers to the ability of a browser to make new HTTP requests asynchronously. It was spearheaded in 2004 with (then) innovative apps like Gmail and Google Maps, which could magically pull in new map tiles as you panned to new areas.

AJAX stands for Asynchronous Javascript And XML, referring to the fact that you use Javascript to asynchronously make network requests using the XmlHttpRequest object. It is a bit confusing that this interface is called “XMLHttpRequest” instead of simply “HttpRequest”, because it reality it is used to send any type of data, from image files to any other structured data serialization format like XML or (most commonly) JSON.

The fact that it is called “XMLHttpRequest” instead of simply “HttpRequest” seems to be an unfortunate historical accident.

AJAX is now just a blanket term that refers to any type of asynchronous network call made by a web app, be it for an image, structured data, or anything else.

Why it matters

To run a web app, the browser needs to download the code the construct the site and the data to populate it. It is an extremely common pattern for the code to be downloaded on page load and the data to be loaded in after the webpage loads using an AJAX request.

How to learn it

AJAX requests can be created using the raw browser javascript API with an XMLHTTPRequest, or with a javascript library like JQuery’s $.ajax, Angular’s $.http, or Axios.

You can read more in-depth about AJAX on tutorialspoint