为什么不能为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 ，您可以确保将全局变量分配给 - 这应该有效。（尽管使用全局变量当然不是最佳实践。）

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

Why can't separate the function for xmlHttp.onreadystatechange?

javascript

ajax

onreadystatechange