Listening to Ajax calls without typing additional code in the AJAX call iteslf

Question

I was planning for a long time now to create a JS function that listens for failed AJAX calls and does something(like error reporting to a separate server).

I could call the function on the Ajax-failed portion of the AJAX code itself, but I want my colleagues to write AJAX calls without any need to remember that they need to type anything in the Ajax-failed portion.

eg:

We code stuff like this:

• All the calls we want to handle errors for, go to pre-specified ajax_controller2.php. So the file we target with our Ajax calls is ALWAYS called ajax_controller2.php . There are other AJAX calls but to different php files and we don't want to handle errors for them.

Is it possible to listen for failed AJAX calls only to a php file called ajax_controller2.php without typing anything in the Ajax-failed portion of the code?

The whole idea is that my colleagues just include a .js file in their HTML and the rest is done for them.

This is the AJAX calls we use:

        var ajax = new XMLHttpRequest();
        var params = //some parameters here;
        ajax.open("POST", "ajax_controller2.php?m=somecase", true);
        ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        ajax.send(params);
        ajax.onreadystatechange = function () {
            var response = "";
            if (ajax.readyState == 1) {
                response += "Status 1: Server connection established ! <br/>";
            } else if (ajax.readyState == 2) {
                response += "Status 2: Request recieved ! <br/>";
            } else if (ajax.readyState == 3) {
                response += "Status 3: Processing Request ! <br/>";
            } else if (ajax.readyState == 4) {
                if (ajax.status == 200) {
                    var text = ajax.responseText;


                } else {
                    console.log("Ajax failed"); //In this portion of the code I could just type down the name of the function that when triggered, sends an error report.
                }
            }
        }
        //If an error occur during the ajax call.
        if (ajax.readyState == 4 && ajax.status == 404) {
            console.log("Error during AJAX call");
        }
    }
}

Answer 1

You can also alter the prototype of XMLHttpRequest to also insert your event handler at the onreadystatechange .

In the code below I did that at the open method and using addEventListener so it won't mess or get lost with other event listeners even the ones added with .onreadystatechange = function...

    function errorLoggingFunc(){ console.log('myFunc'); };

    XMLHttpRequest.prototype._open = XMLHttpRequest.prototype.open;

    XMLHttpRequest.prototype.open= function(){
        if(!this._hasErrorLog)
        {
            this._hasErrorLog = true;
            this.addEventListener('readystatechange', errorLoggingFunc);  
        }

        this._open.apply(this, arguments);
    };

This way you colleagues will keep using the XMLHttpRequest but your logging will always be there anyway.