javascript - 为什么不能分离 xmlHttp.onreadystatechange 的函数？

Question

下面的js文件test.js`在我的html中工作正常。

function sendData()
{
    var formData = new FormData( document.querySelector("form") );
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open("post", "test.php",true); 
    xmlHttp.send(formData); 
    xmlHttp.onreadystatechange =  function(){
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ 
        alert(xmlHttp.responseText);
    }
}
}

ob = document.getElementById("submit"); 
ob.addEventListener("click",sendData);

现在我想把它们分开

        if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ 
        alert(xmlHttp.responseText);

在单个函数中。

我将 test1.js 重写为 test2.js。

var xmlHttp;
function ready(){        
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ 
        alert(xmlHttp.responseText);
        }
}

function sendData()
{
    var formData = new FormData( document.querySelector("form") );
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open("post", "test.php",true); 
    xmlHttp.send(formData); 
    xmlHttp.onreadystatechange =  ready;
}

ob = document.getElementById("submit"); 
ob.addEventListener("click",sendData);

test2.js遇到错误信息:

test2.js:4 Uncaught TypeError: Cannot read property 'readyState' of undefined
    at XMLHttpRequest.ready (test2.js:4)

另一个问题:以下语句的正确顺序是什么？
我看到一些 Material 写如下:

    xmlHttp.open("post", "test.php",true); 
    xmlHttp.send(formData); 
    xmlHttp.onreadystatechange =  function(){  }

还看到其他 Material :

    xmlHttp.onreadystatechange =  function(){  }
    xmlHttp.open("post", "test.php",true); 
    xmlHttp.send(formData); 

网页中的其他订单xmlHttp statements order

xmlhttp.open("POST", "Demo", true);
xmlhttp.onreadystatechange=myCallBack;
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xmlhttp.send("FirstName=Nat&LastName=Dunn");

Answer 1

在 sendData 中，您有:

var xmlHttp = new XMLHttpRequest();

您唯一的错误是在此处包含 var - 只需这样做:

xmlHttp = new XMLHttpRequest();

这很重要的原因是 var 正在声明一个同名的新局部变量，然后该变量被分配给 - 所以 ready 无法访问到它。它访问从未分配过的全局 xmlHttp 变量。通过删除如上所示的 var，您可以确保将全局变量分配给 - 并且这应该可以工作。 (尽管使用全局变量当然不是最佳实践。)