What is the best way to send multiple XMLHttpRequests for JSON data from various sources?

Question

What is the best way to send multiple XMLHttpRequests for JSON data from various sources?

I am attempting to make multiple XMLHttpRequests in JavaScript with two different URLs. My goal is to store each response in a variable and manipulate them all collectively.

Currently, this is how I am doing it. Is there a more graceful approach?

var firstRequest = new XMLHttpRequest();
firstRequest.open('GET', 'http://website-one.com/FIRST.json');
firstRequest.onload = function() {
    var dataOne = JSON.parse(firstRequest.responseText);
    callSecond(dataOne);
};
firstRequest.send();

function callSecond(dataFromOne) {
    var secondRequest = new XMLHttpRequest();
    secondRequest.open('GET', 'http://website-two.com/second.json');
    secondRequest.onload = function() {
        var dataTwo = JSON.parse(secondRequest.responseText);
        workTogether(dataFromOne, dataTwo);
};
secondRequest.send();

function workTogether(data1, data2) {
    //perform necessary operations
}

javascript json ajax

Answer 1

Answer №1

Unfortunately, there is no easier way to handle requests when using the XMLHtpRequest. Instead, you could opt for alternative libraries like Ajax or utilize newer JavaScript APIs such as Promises and async/await for more concise and readable code.

A refactored version of the code would look like this:

const chainedFunction = async () => {
   const firstResult = await ourRequest();
   const second = await call_second(firstResult);
   // perform additional tasks
};

Answer 2

Unfortunately, there is no easier way to handle requests when using the XMLHtpRequest. Instead, you could opt for alternative libraries like Ajax or utilize newer JavaScript APIs such as Promises and async/await for more concise and readable code.

A refactored version of the code would look like this:

const chainedFunction = async () => {
   const firstResult = await ourRequest();
   const second = await call_second(firstResult);
   // perform additional tasks
};

Answer 3

Answer №2

There are several options available for handling this situation. You could utilize the Promise object along with Promise.all or opt for the simpler fetch method.

The Fetch API is designed to facilitate the retrieval of resources, including those obtained over a network connection.

If you choose to use the fetch approach, your code could resemble the following:

fetch('http://example.com/movies.json')
    .then(function(data_one) {
        fetch('http://example2.com/movies.json')
            .then(function(data_two) {
                function process_data(data_one, data_two)
            })
    })

Answer 4

There are several options available for handling this situation. You could utilize the Promise object along with Promise.all or opt for the simpler fetch method.

The Fetch API is designed to facilitate the retrieval of resources, including those obtained over a network connection.

If you choose to use the fetch approach, your code could resemble the following:

fetch('http://example.com/movies.json')
    .then(function(data_one) {
        fetch('http://example2.com/movies.json')
            .then(function(data_two) {
                function process_data(data_one, data_two)
            })
    })

Answer 5

Answer №3

Using Promise.all can streamline the process for you

const movieList = fetch('http://samplewebsite.com/movies.json')

const bookList = fetch('http://samplewebsite.com/books.json')


Promise
.all([movieList, bookList])
.then((response) =>  {

  console.log(response[0]); // movie data
  console.log(response[1]); // book data


});

Answer 6

Using Promise.all can streamline the process for you

const movieList = fetch('http://samplewebsite.com/movies.json')

const bookList = fetch('http://samplewebsite.com/books.json')


Promise
.all([movieList, bookList])
.then((response) =>  {

  console.log(response[0]); // movie data
  console.log(response[1]); // book data


});

Answer 7

Answer №4

A more refined approach is available. The main concept revolves around the principle of avoiding repetition.

function fetchData(url, callback) {
  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function(event) {
    // XMLHttpRequest.DONE === 4
    if (this.readyState === XMLHttpRequest.DONE) {
      if (this.status === 200) {
        return callback(null, this.responseText);
      } else {
        return callback({errCode: this.status, errMsg: this.statusText});
      }
    }
  };

  xhr.open('GET', url, true);
  xhr.send(null);
}


fetchData('http://website-one.com/FIRST.json', function(errFirst, responseFirst) {
  if (errFirst) {
    throw new Error('An error occurred: ' + errFirst.errCode + '/' + errFirst.errMsg); 
  }
  return fetchData('http://website-two.com/second.json', function(errSecond, responseSecond) {
    if (errSecond) {
      throw new Error('An error occurred: ' + errSecond.errCode + '/' + errSecond.errMsg); 
    }
    return work_with_data(responseFirst, responseSecond);
  });
});

Answer 8

A more refined approach is available. The main concept revolves around the principle of avoiding repetition.

function fetchData(url, callback) {
  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function(event) {
    // XMLHttpRequest.DONE === 4
    if (this.readyState === XMLHttpRequest.DONE) {
      if (this.status === 200) {
        return callback(null, this.responseText);
      } else {
        return callback({errCode: this.status, errMsg: this.statusText});
      }
    }
  };

  xhr.open('GET', url, true);
  xhr.send(null);
}


fetchData('http://website-one.com/FIRST.json', function(errFirst, responseFirst) {
  if (errFirst) {
    throw new Error('An error occurred: ' + errFirst.errCode + '/' + errFirst.errMsg); 
  }
  return fetchData('http://website-two.com/second.json', function(errSecond, responseSecond) {
    if (errSecond) {
      throw new Error('An error occurred: ' + errSecond.errCode + '/' + errSecond.errMsg); 
    }
    return work_with_data(responseFirst, responseSecond);
  });
});

What is the best way to send multiple XMLHttpRequests for JSON data from various sources?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Angular 9 Singleton Service Issue: Not Functioning as Expected

Having trouble with Symfony and Doctrine returning a null response when querying the SQL database

Encountered an issue accessing property 'Component' which is undefined during the webpack build of a React component plugin

Is it possible to integrate ng-repeat with ng-model in Angular?

Exploring the use of asynchronous data retrieval with jQuery and JSON within MVC 2.0

Text box size in user input not adapting on mobile devices

Deciphering Complex JSON Strings with Java

Exploring the concept of promise.reject() and the art of passing an object as a parameter

"Handling Errors in JavaScript when a Button Click Event Triggers a

Tips on setting an expiration time for verification codes in a Node.js environment

Retrieve the child property of an object directly without referencing the parent property

The animation for the CSS gradient background is failing to animate

Unable to set height of images using jQuery following an ajax request

Angular Unit testing error: Unable to find a matching route for URL segment 'home/advisor'

What is the best way to obtain the id of an HTML element that is generated within jQuery code?

Can the App be initiated manually using AngularJS and AJAX injection?

Is there a compatibility issue between Vue particles and my project?

Animating the change in Slider value with Material-UI in React

Ensuring the checkbox is disabled prior to editing

Is there a way to insert copied links onto separate lines?