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.
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.
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.
How to Get Started With AJAX
- 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.
- 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:
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’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!
