Replace XMLHttpRequest AJAX with Fetch API

XMLHttpRequest vs Fetch API Html5
Reading Time: 3 minutes

XMLHttpRequest vs Fetch API Html5

We all are using ajax for a pretty long time but not with Fetch API. When AJAX came to the modern web, it changed the definition of how web works. To load a new content in a web page, we do not need a full page reload. Using AJAX, we can post or pull data from a web server asynchronously.

Almost every web application nowadays use ajax. It was all possible because of the XMLHttpRequest. It is a browser API in the form of an object whose methods transfer data between a web browser and a web server. The object is provided by the browser’s JavaScript environment.

Our one of the most (maybe most) popular JavaScript library, jQuery uses XMLHttpRequest under the hood to make HTTP calls. If we talk about any networking library in any modern JavaScript ecosystem uses XMLHttpRequest like axios (promise-based), superagent (callback-based).

The issues with XMLHttpRequest

Making HTTP request with raw XMLHttpRequest really sucks. You need to take care a lot of things to get some data from the server. In my last article, I showed 11 different ways of making post request. To make a get request with XMLHttpRequest, we need to write the code like

The above code will not work in IE 6 or 7. People are afraid of using the above code. So we tend to use jQuery’s Ajax (84 KB). If in a web application, we are adding jQuery to make only a few requests, then It is not at all bandwidth friendly. We are loading a script of 84kb to use only one or two methods. The problem can be solved using the Fetch API which is already present in our browser.

Introduction to Fetch API

Fetch is a promise based HTTP networking API provided by the browser. It is here from the chrome 42. Firefox also supports it. It is now almost standardised. It saves you from remembering complex API of XMLHttpRequest. Look at one example of Fetch.

It is excellent. It is clean. Here we are making a simple get request. Fetch always returns a promise. Promise resolves to the response object. This response object has different helper methods like response.json(), response.text(), response.blob() etc.

Usage of Fetch

It can fully replace old XMLHttpRequest. The first parameter of the fetch is the requested URL. We can also pass a second parameter which is essentially a configuration object. In this configuration object, we can specify different options like HTTP Method Type, Headers of the Request, body of the request etc. Let’s look at how to make a post request with Fetch.

Post Request using Fetch API

Here we are chaining our response through our json method. The code is self-explanatory. I will encourage you to use fetch over XMLHttpRequest in your next vanilla JavaScript project.

If you are yet not convinced to use Fetch. There is an excellent fetch polyfill exist.

7 thoughts on “Replace XMLHttpRequest AJAX with Fetch API”

  1. It’s solely depends upon your user base. If most of your users are using modern web browsers, then it wouldn’t be any problem. Also if you are developing electron based desktop applications, there is also not any issue. If every developer starts to use Fetch, then users will bound to update their browsers.

  2. Really informative posts and well explained topics. It’s a n00bs guide to backend development. Easy to understand within minutes. Going to share this.

  3. Every blasted example I’ve see of using fetch() only considers the equivalent of only processing at readyState == 4. There are methods that depend on readyState == 3. It looks like I’m stuck with the old-style of AJAX yet. 🙁

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.