The responseText from the Ajax (XMLHttpRequest) call was found to be empty

Question

The responseText from the Ajax (XMLHttpRequest) call was found to be empty

I've been experimenting with a basic console application that has two main functions: (1.) Sending an asynchronous Ajax request. (2.) Logging the responseText to the console.

To accomplish this, I decided to make an ajax request to openweathermap.org and then parse the responseText into JSON before logging it to the console.

Below is the code I used to achieve this:

var data ;
var url = "http://api.openweathermap.org/data/2.5/weather?id=7535661&APPID=56104080d6cb412468dad1627cb27da6";

var myRequest;

function sendRequest(url){
    myRequest = new XMLHttpRequest();
    myRequest.onreadystatechange= function(){
        if(myRequest.readyState == 4 && myRequest.status== 200){
            data= JSON.parse(myRequest.responseText);
        }
    }

    myRequest.open("GET", url, true );
    myRequest.send();
}

sendRequest(url);
console.log(data);

Every time I run this code, it always returns "undefined".

I would greatly appreciate any assistance on this matter.

javascript json ajax xmlhttprequest

Answer 1

Answer №1

Your open() and send() methods are nested inside the onreadystatechange() callback, which means the connection is only opened once the request is completed. To fix this issue, try the following:


var data;
var apiUrl = "http://api.openweathermap.org/data/2.5/weather?id=7535661&APPID=56104080d6cb412468dad1627cb27da6";

var httpRequest;

function makeRequest(url) {
  httpRequest = new XMLHttpRequest();
  httpRequest.onreadystatechange = function() {
    if (httpRequest.readyState == 4 && httpRequest.status == 200) {
      data = JSON.parse(httpRequest.responseText);
      console.log(data);
    }
  }
  httpRequest.open("GET", url, true);
  httpRequest.send();
}

makeRequest(apiUrl);

Answer 2

Your open() and send() methods are nested inside the onreadystatechange() callback, which means the connection is only opened once the request is completed. To fix this issue, try the following:


var data;
var apiUrl = "http://api.openweathermap.org/data/2.5/weather?id=7535661&APPID=56104080d6cb412468dad1627cb27da6";

var httpRequest;

function makeRequest(url) {
  httpRequest = new XMLHttpRequest();
  httpRequest.onreadystatechange = function() {
    if (httpRequest.readyState == 4 && httpRequest.status == 200) {
      data = JSON.parse(httpRequest.responseText);
      console.log(data);
    }
  }
  httpRequest.open("GET", url, true);
  httpRequest.send();
}

makeRequest(apiUrl);

The responseText from the Ajax (XMLHttpRequest) call was found to be empty

Answer №1

Similar questions

Evaluating operational Angular component - Error: $(...).somename function is not defined

Challenges with loading multiple iframes on a single page

Using JavaScript to redirect input value for searching a particular webpage

Processing DataTables in an Asp.Net MVC 4 Environment

Tips for properly escaping JSON data in PHP for seamless parsing with jQuery

Verification cannot be completed with the bootstrap modal

Using JavaScript to set a form via a parameter in the URL

What is the best way to locate a document's array item in MongoDB (Mongoose) using its "_id" field?

JavaScript Discord Bot Unresponsive to Commands

Tips for setting up OpenLayers demonstrations on a personal server?

Verifying the Page Load Status in the Browser

What is the process of enabling a concealed input feature?

Minify Magic Dreamweaver Plugin

Is there a way to transfer data depending on certain conditions?

Utilize Node.js driver to export a Mongo collection into a JSON file

The Node script remains active even after all setTimeout functions have completed

What is the best way to merge strings and JMESPath queries in order to construct a webhook payload?

Flag is activated to retrieve the data from the @Input source

Dynamic collapsible navigation panels powered by Bootstrap

Having trouble with my OpenAI API key not functioning properly within my React application