时间戳

首页 > 解决方案 > 为什么不能分离 xmlHttp.onreadystatechange 的函数？

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

问题描述

下面的 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)

另一个问题：以下语句的正确顺序是什么？
我看过一些材料写如下：

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

还看到了其他材料：

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

网页 xmlHttp语句中的其他命令顺序

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");

标签： javascriptajaxonreadystatechange

解决方案

在sendData你有：

var xmlHttp = new XMLHttpRequest();

您唯一的错误是包括var这里 - 只需这样做：

xmlHttp = new XMLHttpRequest();

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

推荐阅读