如何知道，当本机Javascript中完全加载AJAX请求时？

Question

这是我用setTimeout进行的AJAX呼叫

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    document.getElementById('mainContent').style.display = 'none';
    if (this.readyState == 4 && this.status == 200) {
        xhttp.onload = function(){
            document.getElementById("mainContent").innerHTML = this.responseText;
            setTimeout(function(
               document.getElementById("mainContent").style.display = 'block';        
            ),1000);
        }
    }
};
xhttp.open("POST", "system.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("lang="+lang);    

我想检测ajax何时完全加载，并且在这里也有解决方法

我在这里有解决方案，但我不明白它是如何工作的。

var oldOpen = XMLHttpRequest.prototype.open;
function onStateChange(event) {
    // fires on every readystatechange ever
    // use `this` to determine which XHR object fired the change event
}

XMLHttpRequest.prototype.open = function() {
    // when an XHR object is opened, add a listener for its readystatechange events
    this.addEventListener("readystatechange", onStateChange)

    // run the real `open`
    oldOpen.apply(this, arguments);
}

您能举例说明它是如何工作的还是编写完整的代码是如何工作的？