A Modern Reintroduction to AJAX
Fetch API is the modern alternative to XMLHttpRequest for retrieving resources from the server. Unlike XMLHttpRequest, it has a more powerful feature set and a more meaningful name. Fetch is also flexible and easy to use because of its syntax and structure. However, the thing that sets it apart from other AJAX HTTP libraries is that it is supported by all modern web browsers. Fetch follows a request-response approach where Fetch makes a request and returns a promise that resolves to the Response object.
You can pass a Request object to fetch or, alternatively, just the URL of the resource to be fetched. The example below demonstrates a simple GET request made with Fetch.
As you can see, Fetch’s
then method returns a response object that you can further manipulate using a chain of
thens. I’ve used the
.json() method to transform the response to JSON and print it to the console.
What if you need to POST the form data or create an AJAX file upload using Fetch? Apart from Fetch, you will need an input form, and the FormData library to store the form object.
You can read more about Fetch API in the official Mozilla web docs.
Intercept requests and responses.
Transform request and response data using promises.
Automatically transforms JSON data.
Cancel live requests.
To use Axios, you will need to install it first.
Here is a basic example that demonstrates Axios in action.
Axios has an easier syntax compared to that of Fetch. Let’s do something more complex like the AJAX file uploader that we built earlier using Fetch.
Axios is definitely more readable. Axios is also popular with modern libraries such as React and Vue.
If you’ve used jQuery before, this would probably be the easiest solution of the lot. However, you would have to import the whole jQuery library for using the
$.ajax methods. Although the library has domain-specific methods such as
$.post, the syntax isn’t as easy as other AJAX libraries out there. Here is the code for making a basic GET request.
The good thing about jQuery is that you will find tons of support and documentation if you’re in doubt. I found many examples for AJAX file upload using
FormData() and jQuery. Here is the easiest approach:
SuperAgent is a lightweight and progressive AJAX library that’s focused more on readability and flexibility. SuperAgent also boasts of a gentle learning curve unlike other libraries out there. It has a module for Node.js with the same API. SuperAgent has a request object that accepts methods such as GET, POST, PUT, DELETE, and HEAD. You can then call
.end() or the new
.await()method to process the response. For example, here is a simple GET request with SuperAgent.
What if you wanted to do something more such as uploading a file using this AJAX library? That’s super easy too.
If you’re interested in knowing more about SuperAgent, they have a good set of documentation to get you started.
Request - A Simplified HTTP Client
The Request library is one of the simplest ways to make HTTP calls. The structure and syntax are very similar to that of how requests are handled in Node.js. Currently, the project has 18K stars on GitHub and deserves a mention for being one of the popular HTTP libraries available. Here is an example:
Making HTTP calls from the client-side wasn’t this easy a decade ago. A front-end developer would have to rely on XMLHttpRequest which was hard to use and implement. The modern libraries and HTTP clients make the front-end features like user interactions, animations, asynchronous file uploads, etc., easier.
My personal favorite is Axios because I personally feel it’s more readable and easy on the eyes. You can also stick to Fetch because it’s well documented and a standardized solution.
What is your personal favorite AJAX library? Share your thoughts below.