JavaScript's Ajax functionality only triggers when a fake line is added

Question

JavaScript's Ajax functionality only triggers when a fake line is added

Using the onblur event:

function ajaxFunction(obj) 
{
    var button = document.getElementById("submit");
    button.disabled = true;
    button.setAttribute("class", "test");
    var getdate = new Date();  
    xmlhttp.onreadystatechange  = handleServerResponse(obj);

    if(xmlhttp) 
    {
        xmlhttp.open("POST","register_ajax.php",true);
        xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xmlhttp.send(obj.name +"="+ obj.value);
    };
}

Revised handleServerResponse function:

function handleServerResponse(obj) 
{
    alert(xmlhttp.responseText);
    if (xmlhttp.readyState == 4)
    {
        if(xmlhttp.status == 200) 
        {
            obj.value=xmlhttp.responseText; 
        }
        else 
        {
            alert("Error during AJAX call. Please try again");
        }
    }
}

javascript ajax dom-events

Answer 1

Answer №1

Your "efforts" seem to be successful at first, but in reality, they are not.

Here's what's going on:

An xmlhttp request is sent (a response will come later).
You immediately attempt to check the readyState, which is not yet 4 because it's still processing!

In another scenario:

An xmlhttp request is sent (response coming later).
You interrupt the process by triggering an alert. As you're dealing with the alert, the AJAX response arrives.
You quickly check the readyState and now it is 4.

If you close the alert too fast, the issue will recur.

The correct approach for handling AJAX (and asynchronous processes in general) is to use event listeners.

xmlhttprequest.addEventListener("onreadystatechange", function (event) {
    if (xmlhttprequest.readyState === 4) {
        // handle response
    }
});

Answer 2

Your "efforts" seem to be successful at first, but in reality, they are not.

Here's what's going on:

An xmlhttp request is sent (a response will come later).
You immediately attempt to check the readyState, which is not yet 4 because it's still processing!

In another scenario:

An xmlhttp request is sent (response coming later).
You interrupt the process by triggering an alert. As you're dealing with the alert, the AJAX response arrives.
You quickly check the readyState and now it is 4.

If you close the alert too fast, the issue will recur.

The correct approach for handling AJAX (and asynchronous processes in general) is to use event listeners.

xmlhttprequest.addEventListener("onreadystatechange", function (event) {
    if (xmlhttprequest.readyState === 4) {
        // handle response
    }
});

Answer 3

Answer №2

Here is an important line to note:

xmlhttp.onreadystatechange  = handleServerResponse(obj);

Instead of properly setting the on readystate change handler, you are mistakenly calling handleServerResponse. You should actually assign a function to xmlhttp.onreadystatechange rather than assigning the return value of handleServerResponse(obj). You should try this approach:

xmlhttp.onreadystatechange  = function(){
                                  handleServerResponse(obj);
                              };

Additionally, the reason why the second method worked is because the alert paused execution and allowed the ajax call to complete before the checks were performed.

Answer 4

Here is an important line to note:

xmlhttp.onreadystatechange  = handleServerResponse(obj);

Instead of properly setting the on readystate change handler, you are mistakenly calling handleServerResponse. You should actually assign a function to xmlhttp.onreadystatechange rather than assigning the return value of handleServerResponse(obj). You should try this approach:

xmlhttp.onreadystatechange  = function(){
                                  handleServerResponse(obj);
                              };

Additionally, the reason why the second method worked is because the alert paused execution and allowed the ajax call to complete before the checks were performed.

JavaScript's Ajax functionality only triggers when a fake line is added

Answer №1

Answer №2

Similar questions

What could be the reason why my AJAX error is not displaying the exception from my Webmethod?

What could be causing the alteration of my JSON data when sent through a WEB.API Ajax request?

Steps to Execute a button press with Protractor

Trouble with loading images on hbs/nodejs

How can I use a specific condition to query for a particular element in an $in array in MongoDB?

Gathering screenshots of items hidden beyond pagination

Experiencing issues with creating HTML using JavaScript?

How to sort by a specific split part of an array using JavaScript and jQuery?

Troubleshooting unresponsive buttons within a $timout/ setTimeout function in Angular and Ionic

Executing JavaScript code upon successful form submission: An overview

"Encountered a type error: The .join method is not recognized as a function

Obtain URL parameters prior to rendering with Next.js on the server side

How can I perform a subtraction operation with the 24-hour clock using JavaScript/JQuery?

Unable to establish SocketIO callback from client to server resulting in a null object instead

After logging in, AngularJS ensures that the window is brought into focus

Comparing WebSockets and XHR for transmitting data

The PHP application encountered an error when trying to use an object of the mysqli_result type as an array

Using the after ship.com API with CORS in JavaScript using Ajax

What is the best method in Django to dynamically load JavaScript based on the view name, if it exists?

An innovative way to display or hide a div depending on the multiple selections made in a select2 jQuery field