JavaScript function execution fails following an AJAX request

Question

JavaScript function execution fails following an AJAX request

One of my functions is functioning properly with the alert:

function RequestNext() {

    var xhr = getXMLHttpRequest();

    xhr.onreadystatechange = function() {

        if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
            MyCard = GetCard(xhr.responseText);
            **alert(MyCard.GetNo());**
            return MyCard;
        }
    };

    xhr.open("GET", "../../HttpRequest_Next.php" , true);

    xhr.send(null);                                             
}

However, in another function where the first one is called, the same alert does not work:

function Start(){

    var MyCard = RequestNext();

    alert("Patience.js");
    **alert(MyCard.GetNo());**
    alert("test2");
    //alert(Card.GetKind());
    //WriteCard(Card);
    alert("test3");
}

Just to provide context, these functions are located in separate files.

javascript ajax return

Answer 1

Answer №1

In this scenario, utilizing a callback function proves to be extremely beneficial. By passing a function as an argument, you can execute that function once the asynchronous ajax operation is complete. While the syntax might need some adjustments, you could implement something like this:

function FetchData(callback) {

  var xhr = getXMLHttpRequest();

  xhr.onreadystatechange = function() {

    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
        ProcessedData = AnalyzeData(xhr.responseText);
        **alert(ProcessedData.GetID());**
        if (typeof callback=='undefined') return ProcessedData;
        else {
          return callback.call(ProcessedData);
        }
    }
  };

  xhr.open("GET", "../../DataFetcher.php" , true);

  xhr.send(null);                                             
}
function InitiateProcess(){
  var ProcessedData = FetchData(function() {
      alert("Async.js");
      alert(this.GetID());
      alert("test2");
      //alert(this.GetType());
      //ManipulateData(this);
      alert("test3");
      return this;
  });
}

Answer 2

In this scenario, utilizing a callback function proves to be extremely beneficial. By passing a function as an argument, you can execute that function once the asynchronous ajax operation is complete. While the syntax might need some adjustments, you could implement something like this:

function FetchData(callback) {

  var xhr = getXMLHttpRequest();

  xhr.onreadystatechange = function() {

    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
        ProcessedData = AnalyzeData(xhr.responseText);
        **alert(ProcessedData.GetID());**
        if (typeof callback=='undefined') return ProcessedData;
        else {
          return callback.call(ProcessedData);
        }
    }
  };

  xhr.open("GET", "../../DataFetcher.php" , true);

  xhr.send(null);                                             
}
function InitiateProcess(){
  var ProcessedData = FetchData(function() {
      alert("Async.js");
      alert(this.GetID());
      alert("test2");
      //alert(this.GetType());
      //ManipulateData(this);
      alert("test3");
      return this;
  });
}

JavaScript function execution fails following an AJAX request

Answer №1

Similar questions

Obtain a unique HTML ID dynamically with Selenium and VBA

What are the methods for providing both successful and unsuccessful promises, with or without data?

Obtaining the IP address of the client's request

how to use jQuery to sort appended data

Guide to organizing the legend section into two columns within Apache Echarts

The form will only display results after the "Submit" button is clicked twice

Leverage the power of both ui-sref and $state.go for seamless state transitions in Angular's ui

Verify whether the user is obstructing third-party domain

Tips for configuring jQtree to initially display the tree structure from the HTML source

ReactJS: Dealing with issues in setting a dynamic index for the setState key

When should ng-repeat be utilized: only when the object type is an array?

What is the best option: using a Javascript template or exploring another

Unraveling HTML elements within a string using MongoDB: A step-by-step guide

Getting image blob data with Cropper Js in a Laravel controllerNeed help on how to get image blob data

Combining multiple JSON objects into a single array in AngularJS

A Comprehensive Guide: Obtaining the Final Tab from a JSON using API

Experiencing difficulty with setting up the ReactJS pagination component

Validation of PO Box Addresses Using Regular Expressions

Utilizing AJAX to dynamically populate an HTML list from a database and then saving the user's newly selected value back to the database

Extract the value/values enclosed within double quotation marks using a regular expression