Unable to halt operation when xmlhttprequest.responseText is equal to a particular value

Question

Unable to halt operation when xmlhttprequest.responseText is equal to a particular value

Currently, I am incorporating XmlHttp with Java servlets in the following manner:

function btnSave_onclick(){

var xmlHttp;
var responseText;

if (condition){

    var para= "someParamsHere";

    var url = "urlHere";

    if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }

    else if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlHttp.open('post', url, true);
    xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
    xmlHttp.setRequestHeader("Content-length", para.length);
    xmlHttp.setRequestHeader("Connection", "close");

    xmlHttp.send(para);

    xmlHttp.onreadystatechange=function() {
        if (xmlHttp.readyState==4) {
            if(xmlHttp.status==200){
                responseText=xmlHttp.responseText;
                if(responseText=='error'){
                    alert("Fatal Error Occurred");
                    return;
                }
           }
        }
    }

}

// additional code goes here

}

The information is sent to the servlet and if an exception arises, the response text containing the word 'error' is displayed. The issue is that the error alert pops up but the code proceeds to the section // additional code goes here without exiting the JavaScript function on return. Any suggestions on this matter would be much appreciated.

javascript ajax servlets xmlhttprequest

Answer 1

Answer №1

Understanding the essence of "A" in AJAX is crucial, as it signifies the asynchronicity. The code housed within the inner function (

xmlHttp.onreadystatechange=function() {...HERE...}

) operates asynchronously. This implies that the entire outer function (btnSave_onclick()) will finish and at a later point, the onreadystatechange will trigger (if at all). In simplified pseudocode where condition === true, your current code can be visualized as:

function btnSave_onclick() {
    doAjaxAndWhenItFinishesRun(function(responseText) {
        if( responseText=='error' ) handleFatalError();
        else handleSuccess();
    });
    doStuff();
}

To enhance clarity, I propose a revised version without the inner function:

function ajaxFinished(responseText) {
    if( responseText=='error' ) handleFatalError();
    else handleSuccess();
}

function btnSave_onclick() {
    doAjaxAndWhenItFinishesRun(ajaxFinished);
    doStuff();
}

The updated structure demonstrates that btnSave_onclick() initiates two operations - an asynchronous call followed by doStuff(). Subsequently, upon completion of the async call, ajaxFinished() is executed. To ensure that doStuff() runs exclusively on success, you would need to invoke it from handleSuccess() or integrate it within this segment of your code:

function btnSave_onclick(){
    ...
    if (condition){
        ...
        xmlHttp.onreadystatechange=function() {
            if (xmlHttp.readyState==4) {
                if(xmlHttp.status==200){
                    responseText=xmlHttp.responseText;
                    if(responseText=='error'){
                        alert("Fatal Error Occurred");
                    }
                    else {
                        // additional code here
                        // ... this section executes upon success
                    }
               }
            }
        }
    }

    // any code placed here will execute regardless and BEFORE the AJAX call concludes
}

Answer 2

Understanding the essence of "A" in AJAX is crucial, as it signifies the asynchronicity. The code housed within the inner function (

xmlHttp.onreadystatechange=function() {...HERE...}

) operates asynchronously. This implies that the entire outer function (btnSave_onclick()) will finish and at a later point, the onreadystatechange will trigger (if at all). In simplified pseudocode where condition === true, your current code can be visualized as:

function btnSave_onclick() {
    doAjaxAndWhenItFinishesRun(function(responseText) {
        if( responseText=='error' ) handleFatalError();
        else handleSuccess();
    });
    doStuff();
}

To enhance clarity, I propose a revised version without the inner function:

function ajaxFinished(responseText) {
    if( responseText=='error' ) handleFatalError();
    else handleSuccess();
}

function btnSave_onclick() {
    doAjaxAndWhenItFinishesRun(ajaxFinished);
    doStuff();
}

The updated structure demonstrates that btnSave_onclick() initiates two operations - an asynchronous call followed by doStuff(). Subsequently, upon completion of the async call, ajaxFinished() is executed. To ensure that doStuff() runs exclusively on success, you would need to invoke it from handleSuccess() or integrate it within this segment of your code:

function btnSave_onclick(){
    ...
    if (condition){
        ...
        xmlHttp.onreadystatechange=function() {
            if (xmlHttp.readyState==4) {
                if(xmlHttp.status==200){
                    responseText=xmlHttp.responseText;
                    if(responseText=='error'){
                        alert("Fatal Error Occurred");
                    }
                    else {
                        // additional code here
                        // ... this section executes upon success
                    }
               }
            }
        }
    }

    // any code placed here will execute regardless and BEFORE the AJAX call concludes
}

Unable to halt operation when xmlhttprequest.responseText is equal to a particular value

Answer №1

Similar questions

Class for Eliminating the Background Image Using Bootstrap

Building an interactive chat feature with jQuery/AJAX and Pusher: A step-by-step guide

Populate Chart.js with a specific set of JSON data

Adaptive Container with Images that are not stretched to full width

Endless Keycloak redirection loop

Verifying the "select" dropdown option prior to final submission

Exploring the functionalities of can-deactivate without incorporating routing

encountering a problem with retrieving the result of a DOM display

Mobile Devices Experiencing Issues with Proper Resizing of Three.JS Panorama

Exploring the documentation of JQuery's $.Ajax Function

Using the built-in http module in node.js to upload images via multipart/form-data

Configuring a Selenium Firefox profile

Explaining how to iterate through objects (one by one) in the This.questionnaire.Profile at every click using JavaScript (answer not found in forums)

Vue 2 checkbox form array data

An issue arises when attempting to utilize URL parameters within a loader

Tips for continuing code execution in an ajax success function following the completion of a nested ajax call within the success block

Validating usernames with parsley (version 2.8.1) using php

Exploring Angular2: A Guide to Interpolating Expressions in Templates

Struggling to make the controller karma test pass

"An issue with AngularJS ngTable causing a delay in the rendering of Ajax