What could be causing my browser to display "uncaught referenceerror" in this situation?

Question

What could be causing my browser to display "uncaught referenceerror" in this situation?

Just running some browser tests to troubleshoot - everything's smooth sailing until this line is reached:

responseJson = JSON.parse(localReq.responseText);

So, when I evaluate JSON.parse(localReq.responseText), the correct value comes through. But as soon as I try to evaluate "responseJson," it throws an uncaught reference error and I can't pinpoint 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);
   }

}

javascript json ajax

Answer 1

Answer №1

To handle the response from the server asynchronously via a callback in your AJAX request, you should use an event listener. By not implementing this, you risk checking for a response code of 200 before receiving a response from the server.

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

    // utilize 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);
}

Take a look at this jsFiddle: http://jsfiddle.net/wwsj3r4q/

Answer 2

To handle the response from the server asynchronously via a callback in your AJAX request, you should use an event listener. By not implementing this, you risk checking for a response code of 200 before receiving a response from the server.

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

    // utilize 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);
}

Take a look at this jsFiddle: http://jsfiddle.net/wwsj3r4q/

What could be causing my browser to display "uncaught referenceerror" in this situation?

Answer №1

Similar questions

What is the best way to transform a BLOB Buffer into a Base64 string using Swift?

I am seeking a way to conceal text in an HTML document using JavaScript when the browser window width is less than a specified amount, and reveal it when the window width exceeds that value

How can I access the parent elements within a recursive directive?

Retrieve information from a web service and display it on a map

Enhance user experience with Angular Material and TypeScript by implementing an auto-complete feature that allows

Is your Ajax jQuery live search not functioning properly with JSON data?

Sort the array of objects based on the nested attribute

Processing information on the second page following the activation of a button on the first page using the Console Browser

Using the jQuery attr method to assign values to newly created DOM elements generated by an AJAX request

Activate the 'li' element within the 'ul' whenever a 'ui-sref' link on the

Ways to appropriately handle session timeouts when making an AJAX call

The Signature Pad loses its focus

Issues retrieving information from MySQL through an AJAX request

What is the sequence in which Jest executes its tests?

Retrieve the content inside the HTML body of a specific <link> element using jQuery based on its unique ID

The child component emitted a custom event, but the listener in the parent component was not activated

Redux: utilizing yield within an unrecognized function

Is there a way to refresh the list automatically after deleting an item using Firebase?

The Net Core controller did not receive the ajax data as expected

Exploring Multilingual Autocomplete or: Best Practices for Managing Multiple Languages in Web Applications