What Is AJAX (Asynchronous JavaScript and XML)?

AJAX (Asynchronous JavaScript and XML) is a web development technique that combines JavaScript, the XMLHttpRequest object, HTML and CSS to enable asynchronous server communication.

RelatedWhat Is File Transfer Protocol (FTP)?

How Does AJAX Work? 

AJAX combines several technologies in order to create dynamic websites that can update without reloading the entire page. These technologies include:

• XMLHttpRequest Object: We use this object to retrieve data from a server via an HTTP request.
• JavaScript: JavaScript is a popular programming language used to create websites. Together with HTML and CSS, it’s a core technology of the internet as we know it.
• HTML: HyperText Markup Language is a standard markup language used to create websites.
• DOM: The Document Object Model is a programming interface for HTML and XML documents.

Synchronous vs. Asynchronous Requests

AJAX can make both synchronous and asynchronous requests. That said, I wouldn’t recommend synchronous requests since it deteriorates user experience. This deterioration occurs because JavaScript is a single-threaded language. When using synchronous requests, the main thread becomes completely blocked, which means that the code execution will be blocked until the synchronous request is resolved. When code execution is blocked, the browser becomes completely unresponsive, which will lead to the user thinking that the website has crashed when it’s simply waiting for the request to complete.

In fact, because of the huge negative impact on user experience, Synchronous XMLHttpRequest (outside of web workers) is in the process of being deprecated entirely. 

Advantages of AJAX 

• AJAX allows the creation of dynamic websites, where parts of the website are updated without having to reload.
• AJAX improves responsiveness by updating only parts of a page in response to user actions, reducing full-page reloads.
• AJAX can send and receive information in many formats, not just XML like its name indicates. For instance, AJAX commonly uses JSON — now more popular than XML — to send and receive structured data. AJAX is also compatible with HTML and plain text.  

Disadvantages of AJAX 

• If the user has disabled either JavaScript or XMLHttpRequest, the browser won’t be able to use AJAX. 
• The Fetch API is simpler, easier to use and offers many more features than AJAX. 
• AJAX remains in use but is increasingly being supplemented or replaced by newer APIs like Fetch and modern JavaScript frameworks.

Examples of AJAX Frameworks 

• Axios: A promise-based HTTP client for Node.js and the browser.
• JQuery: A JavaScript library that provides an AJAX framework, as well as an API for DOM manipulation, animations, event handling and more. 
• ASP.NET AJAX: Built by Microsoft, ASP.NET AJAX extends ASP.NET by implementing AJAX functionality.

RelatedHow to Use Docker Compose Environment Variables

How to Get Started With AJAX 

1. First, you need to obtain the data from the server by making an HTTP request. To make this request, you’ll use an instance of the XMLHttpRequest.
2. In order to handle the data obtained from the server by the XMLHttpRequestObject instance (the response), you’ll assign a handler function to the onreadystatechange property to process the server response. As a note, developers must check both readyState === 4 (DONE) and status === 200 before using response data.

Once you receive the handler, you can make the request. In order to do so, there are two methods you must use:

1. the “open” method, which initializes the request 
2. the “send” method, which sends the request.

The open method receives three arguments: the HTTP request method (GET, POST, PUT etc.), the URL to which the request is being sent and whether the request is synchronous or asynchronous. 

The Handler Function

The JavaScript handler function can manage the response in whichever way the developer wants whether they’re trying to update a page’s section with the data, make another HTTP request with the data or filter and display the data. 

Before attempting to process the response data, the handler function should check whether readyState is equal to XMLHttpRequest.DONE (a constant with the value 4), which indicates the request has completed. To ensure the response is successful, it’s also good practice to verify that the status is in the 200–299 range before proceeding. You can find a list of other state codes here.

The next step is to check the HTTP status code of the response. A status code in the 200-299 range indicates a successful response, which means the server has successfully obtained the data from the server and is ready to be processed. Implementing error handling is a good practice so you can manage possible errors that may arise. 

Finally, to access the response’s data, the XMLHttpRequest API provides two properties: the response property and the responseText property. The data can now be used for display, further processing or to trigger additional requests, depending on application logic.

Frequently Asked Questions