Intercept XMLHttpRequest responses by overriding prototype properties

Intercept XMLHttpRequest responses and modify values in response bodies before they reach the web page

Marian C.
5 min readSep 15, 2024

In JavaScript there are two APIs for making HTTP requests— modern fetch() and legacy XMLHttpRequest. They do exactly the same but differ in syntax. With XMLHttpRequest responses are handled in callbacks, while fetch() returns more convenient to use promises.

XMLHttpRequest is the prevailing API for making HTTP requests

There is no point in using legacy XMLHttpRequest in a new project.

On the other hand, upgrade of existing working XMLHttpRequest-based code to fetch() brings no significant benefits. Thriving websites with massive codebase that has been developed over many years have no reasons for replacing XMLHttpRequest with fetch() in their code. Upgrade of their working code to fetch() would be an effort that would introduce only bugs and risks.

I checked network activity in popular websites that I know. google, youtube, gmail, bing, linkedin, tiktok, instagram, facebook rely on XMLHttpRequest with a bit of fetch(). reddit, quora do not use XMLHttpRequest.

Why override response in…

--

--

Marian C.
Marian C.

Written by Marian C.

Java, JavaScript and SQL developer. Interested in data collection and visualization.

Responses (11)