javascript - 监听 Ajax 调用，而无需在 AJAX 调用本身中键入其他代码

Question

我长期以来一直计划创建一个 JS 函数来监听失败的 AJAX 调用并执行某些操作(例如向单独的服务器报告错误)。

我可以在 AJAX 代码本身的 Ajax 失败部分调用该函数，但我希望我的同事编写 AJAX 调用，而无需记住他们需要在 Ajax 失败部分中键入任何内容。

例如:

我们编写这样的代码:

• 我们想要处理错误的所有调用，转到预先指定的ajax_controller2.php。 因此我们 Ajax 调用的目标文件是始终调用 ajax_controller2.php。还有其他 AJAX 调用，但是到不同的 php 文件，我们不想为它们处理错误。

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?

整个想法是，我的同事只需在他们的 HTML 中包含一个 .js 文件，剩下的就为他们完成了。

这是我们使用的 AJAX 调用:

        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

您还可以更改 XMLHttpRequest 的原型(prototype)，以将您的事件处理程序插入 onreadystatechange 。

在下面的代码中，我在 open 处执行了此操作。方法和使用addEventListener因此它不会与其他事件监听器混淆或迷失，即使是添加了 .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);
    };

这样，您的同事将继续使用 XMLHttpRequest，但您的日志记录将始终存在。