Listen to serve response JavaScript

Question

Background

I am making a Chrome extension for a webpage. In this webpage, I need to catch the response that the server sends when a user makes a POST request.

Currently, we are using the Observer pattern to check changes on the HTML page, but this is clumsy and it fires several times.

Objective

I need to catch that response, parse its information accordingly, and then base on it do some actions on the page's HTML by changing (adding some colors to some tables, add additional info, etc).

Problem

My issue here, is that I don't know of any JavaScript library or pure method that allows me to listen to server responses, so I can parse them.

What I tried

I tried JavaScript's EventSource, however for it to work I need to have specific code in the server and that is not an option.

Another research venue was making the request myself using an XHMLRequest, but then I would have to have a listener on every button on the page so I could stop its default action and perform it via my code, which doesn't sound that good either.

Questions

1. Are there any JavaScript tools that allow me to check for server responses and treat them?

Answer 1

How about something like this?

(function(open) {
    XMLHttpRequest.prototype.open = function(m, u, a, us, p) {
        this.addEventListener('readystatechange', function() {
            console.log(this.response);
        }, false);

        open.call(this, m, u, a, us, p);
    };
})(XMLHttpRequest.prototype.open)

You can override open function and then do with response whatever you want.