javascript onreadystatechange 函数在 AJAX 中不起作用

onreadystatechange function is not working in AJAX

提问by Abdullah A Malik

as far as XMLHttpRequest() Object is concerned, it is fine, the problem is with onreadystatechangefor example if I put my code this way, it works perfect.

就 XMLHttpRequest() 对象而言，这很好，问题出在onreadystatechange 上，例如，如果我这样放置我的代码，它就完美无缺。

function process(){
    var xmlHttp = new XMLHttpRequest();

    if(xmlHttp){
        xmlHttp.onreadystatechange = function(){
            theD = document.getElementById("theD");
            if(xmlHttp.readyState == 1){
                theD.innerHTML += "Status 1: Server connection established ! <br/>";
            }
            else if(xmlHttp.readyState == 2){
                theD.innerHTML += "Status 2: Request recieved ! <br/>";
            }
            else if(xmlHttp.readyState == 3){
                theD.innerHTML += "Status 3: Processing Request ! <br/>";
            }
            else if(xmlHttp.readyState == 4){

                if(xmlHttp.status == 200){
                    var text = xmlHttp.responseText;
                    theD.innerHTML += "Status 4: Processing Request ! <br/>";
                    theD.innerHTML += text;
                }
                else{
                    alert("Something is wrong !");
                }
            }
        };
        xmlHttp.open("GET", "hello.txt", true);
        xmlHttp.send();
    }
}

but if I make a function of handleServerResponse()

但是如果我做一个handleServerResponse()的函数

function handleServerResponse(){
    theD = document.getElementById("theD");
    if(xmlHttp.readyState == 1){
        theD.innerHTML += "Status 1: Server connection established ! <br/>";
    }
    else if(xmlHttp.readyState == 2){
        theD.innerHTML += "Status 2: Request recieved ! <br/>";
    }
    else if(xmlHttp.readyState == 3){
        theD.innerHTML += "Status 3: Processing Request ! <br/>";
    }
    else if(xmlHttp.readyState == 4){

        if(xmlHttp.status == 200){
            var text = xmlHttp.responseText;
            theD.innerHTML += "Status 4: Processing Request ! <br/>";
            theD.innerHTML += text;
        }
        else{
            alert("Something is wrong !");
        }
    }
}

And call it like

并称之为

xmlHttp.onreadystatechange = handleServerResponse();

It doesn't work. Please point it if I'm wrong.

它不起作用。如果我错了，请指出。

回答by The Code

try using

尝试使用

xmlHttp.onreadystatechange = handleServerResponse;

Note the removed paranthesis.

注意删除的括号。

回答by ZER0

Two things:

两件事情：

xmlHttp.open("GET", "hello.txt", true);
xmlHttp.onreadystatechange = handleServerResponse;
xmlHttp.send();

As you see, I removed the parentheses and I inverted the order of openand onreadystatechange.

如您所见，我删除了括号并颠倒了open和的顺序onreadystatechange。

The first thing, is because otherwise you do not associate the function reference itself, but the function's return value – because, basically, you're executing it. It's the same difference to have:

第一件事，是因为否则您不会关联函数引用本身，而是关联函数的返回值——因为基本​​上，您正在执行它。有相同的区别：

var a = sum(1, 2); // 3, assign to `a` the return value of `sum`
var b = sum; // assign to `b` the `sum` function ref.
var c = b(1, 2); // 3, therefore `b` is an 'alias' to `sum` 

The second thing, it depends by the browser: for instance, some version of IE "reset" the onreadystatechangeof a XMLHttpRequestinstance, every time the openmethod is called. So if you set the onreadystatechangebefore the open, that works as "initializator", there is a chance, depends by the browser, that would be removed – and therefore never called – once the openmethod is called. So to be fully compatible, it's better set the onreadystatechangeafter the openmethod – but of course before the send.

第二件事情，这取决于浏览器：例如，IE的一些版本的“复位”的onreadystatechange一个的XMLHttpRequest情况下，每次open方法被调用。所以，如果你设置onreadystatechange之前open，该作品为“initializator”，有机会的话，依赖浏览器，那会被删除-因此从来不叫-一旦open方法被调用。所以为了完全兼容，最好onreadystatechange在open方法之后设置- 但当然在send.

回答by Sudarshan

use this xmlHttp.onreadystatechange = handleServerResponse

用这个 xmlHttp.onreadystatechange = handleServerResponse

then write as function handleServerResponse(xmlHttp) it will work

然后写为函数 handleServerResponse(xmlHttp) 它将工作

回答by jsotola

I know that this is kind of old, but I just spent a couple of hours trying to make a similar program work in Chrome.

我知道这有点老了，但我只是花了几个小时试图在 Chrome 中制作一个类似的程序。

The only way that I could make it work was to use the thisobject.

我可以使它工作的唯一方法是使用该this对象。

Using a global xmlHttpinstead of thisresults in the handleServerResponse()to be called only once when xmlHttp.readyState == 2.

使用全局xmlHttp而不是this导致handleServerResponse()仅在 时被调用一次xmlHttp.readyState == 2。

Here is the code that works in Google Chrome Version 81.0.4044.129 (Official Build) (32-bit).

这是适用于 Google Chrome 版本 81.0.4044.129（官方版本）（32 位）的代码。

handleServerResponse()gets called 4 times, each time xmlHttp.readyStategets incremented.

handleServerResponse()被调用 4 次，每次xmlHttp.readyState增加。

Found by using Developer Tools in Chrome and monitoring the thisobject, amongst others.

通过在 Chrome 中使用开发人员工具并监视this对象等找到。

function process(){
    var xmlHttp = new XMLHttpRequest();

    if(xmlHttp){
        xmlHttp.onreadystatechange = handleServerResponse;
        xmlHttp.open("GET", "hello.txt", true);
        xmlHttp.send();
    }
}

function handleServerResponse(){
    theD = document.getElementById("theD");
    if(this.readyState == 1){
        theD.innerHTML += "Status 1: Server connection established ! <br/>";
    }
    else if(this.readyState == 2){
        theD.innerHTML += "Status 2: Request recieved ! <br/>";
    }
    else if(this.readyState == 3){
        theD.innerHTML += "Status 3: Processing Request ! <br/>";
    }
    else if(this.readyState == 4){

        if(this.status == 200){
            var text = this.responseText;
            theD.innerHTML += "Status 4: Processing Request ! <br/>";
            theD.innerHTML += text;
        }
        else{
            alert("Something is wrong !");
        }
    }
}