What Is AJAX (Asynchronous JavaScript and XML)?

AJAX makes websites faster and more responsive to user input, which creates a better user experience. Here’s how AJAX works and how you can get started.

Published on Apr. 04, 2023
Image: Shutterstock / Built In
Image: Shutterstock / Built In
Brand Studio Logo

AJAX stands for Asynchronous JavaScript and XML. AJAX is a combination of several client-side technologies brought together to create dynamic web applications. 

Is AJAX a Programming Language?

It’s a common mistake to think that AJAX is a programming language but it’s not. AJAX is a combination of several technologies that allow web applications to both send and retrieve data from a server asynchronously. In practice, this means we can update a web page dynamically, without having to reload the entire page. 

More From the Built In Tech DictionaryWhat 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 Data Object Model is a programming interface for web 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. 

How to Get Started With AJAX: AJAX Tutorial for Beginners. | Video: Dani Krossing

 

Advantages of AJAX 

  • AJAX allows the creation of dynamic websites, where parts of the website are updated without having to reload.
  • Websites that use AJAX are faster and more responsive than traditional websites that must reload the entire page with each change in content. 
  • AJAX can send and receive information in many formats, not just XML like its name indicates. For instance, AJAX is compatible with JSON, 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 is by no means obsolete, but it’s getting old. 

 

Examples of AJAX Frameworks 

  • Axios: A promised-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.

More From This ExpertHow 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 be provided a JavaScript function to the instance’s “onreadystatechange” property

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. 

Find out who's hiring.
See all Developer + Engineer jobs at top tech companies & startups
View 10000+ Jobs

 

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’s data, the handler function should first check the request’s state because the data may not be ready for processing. When the request state has a value of XMLHttpRequest.DONE, it means the data is ready. 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. You’re now able to use the data in any way you want!

Explore Job Matches.