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.
- 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
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
- 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.
- 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.
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
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!