为什么我的浏览器在这里说“未捕获的参考错误”？

Question

I'm just doing some tests in my browser to figure out what's going on - everything seems to be working correctly up until this line:

responseJson = JSON.parse(localReq.responseText);

When I evaluate this part: JSON.parse(localReq.responseText); I get the appropriate value. But when I evaluate "responseJson" it gives me an uncaught referenceerror and I can't figure out why.

function login()
{
   userName = document.getElementById("_name").value;
   password = document.getElementById("_password").value;
   data = "userName=" + userName + "&" + "password=" + password;
   localReq = new XMLHttpRequest();

   localReq.open("POST", "http://universe.tc.uvu.edu/cs2550/assignments/PasswordCheck/check.php", true);
   localReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   localReq.send(data);
   response = document.getElementById("_login");

   if (localReq.status == 200)
   {
      responseJson = JSON.parse(localReq.responseText);
   }



}

Answer 1

You need to use an event listener on your AJAX request to handle the response from the server asynchronously via a callback. By not doing this you are checking for a response code of 200 before the server has responded.

function login(){
   userName = "username";
   password = "password";
   data = "userName=" + userName + "&" + "password=" + password;
   localReq = new XMLHttpRequest();

    // use an event handler here
    localReq.addEventListener("load", function(evt){
        if (localReq.status == 200) {
            responseJson = JSON.parse(localReq.responseText);
            alert("Success: " + localReq.responseText);
        } else {
            alert("Not Success!= :(");
            console.log(localReq);
        }
    });

    localReq.open("POST", "http://universe.tc.uvu.edu/cs2550/assignments/PasswordCheck/check.php", true);
    localReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    localReq.send(data);
}

See this jsFiddle: http://jsfiddle.net/wwsj3r4q/