Accessing an Ajax variable outside of its function

Can someone help me with an issue I'm experiencing with code that involves using ajax response outside of a function? Every time I try, it keeps showing undefined. I understand it might be a simple fix, but I'm unsure how to tackle it.

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>test</title>
<script>
 var sourceData;
 var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      sourceData = this.responseText;

     //
    }
  };
  xhttp.open("GET", "http://localhost:34560/test/js/source.json", true);
  xhttp.send();
  document.getElementById("test").innerHTML=sourceData;
</script>

</head>

<body>
 <div id="test"></div> 

</body>

</html>

Update:

Is there a way to use ajax outside the function in this script tag? I would prefer not to have it inside the function.

Answer №1

One common issue many developers face is grasping asynchronous JavaScript operations. Essentially, when you trigger xhttp.send(), JavaScript initiates the request, but execution does not halt. The subsequent line of code (where you attempt to utilize sourceData) runs before the server has responded to your send() call. As a result, your onreadystatechange function remains uninvoked and sourceData ends up being undefined. If you wish to perform any actions after receiving a response from the server for your asynchronous request, it is imperative to place those actions within the onreadystatechange function :

  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("test").innerHTML=this.responseText;
    }
  };

Answer №2

If you want to make a synchronous call instead of an asynchronous one, you can use the following code:

var request = new XMLHttpRequest();
request.open('GET', '/bar/foo.txt', false);  // `false` makes the request synchronous
request.send(null);

if (request.status === 200) {
  console.log(request.responseText);
}

Keep in mind that making synchronous calls blocks the script and can cause your web page to become unresponsive until the server responds. It's recommended to explore asynchronous callbacks as a better alternative.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Spinning objects in three.js using tween.js to move around the global axis

Currently, I am working on tween-rotating a 3D cube. Thanks to this helpful post (How to rotate a object on axis world three.js?), I have successfully achieved rotation without any issues. Now, my goal is to transfer the rotation achieved through setFromRo ...

Grails Countdown Widget

I'm currently working on a migration program that transfers data from Sybase to PostgreSQL in Grails. On the backend, there's a Grails migration service running in its own dedicated thread. The goal is to show the number of data records being tra ...

Errors Arise when Using jQuery UI Dialog with Greasemonkey

Encountering a peculiar error whenever attempting to create a dialog using Greasemonkey... I suspect it may be related to the constraints of XPCNativeWrapper, though I can't be certain. Thus far, none of the fundamental jQuery functions I've uti ...

Arranging JSON object by its values

How can I sort a JSON object based on date? json = {"date_hash":{"second_bleed":"2014-09-08","sixth_boost":"2014-10-28","first_boost":"2014-06-24","first_bleed":"2014-08-08","fifth_boost":"2014-09-30","fourth_bleed":"2014-11-03","second_boost":"2014-07-15 ...

Exploring the possibilities of toggling between a personalized CSS design and a Bootstrap CSS layout

Is it possible to implement a dropdown menu on my sample-page using javascript/jquery in order to switch between a custom layout and a bootstrap layout? ...

Exploring AngularJS with Filtering for Advanced Search Results

Currently, I have a search box that successfully searches values in a table using my code. <tr ng-repeat="b in bugs | filter:searchText"> Now, I want to take it one step further by allowing users to search specific columns if they include a colon i ...

Validation based on the condition of the request body in Express using express-validator

I have a specific route in place for handling different scenarios, with only minor variations in logic between them. To keep things streamlined, I have decided to utilize a single endpoint and differentiate between cases using the parameter 'type&apos ...

Typescript is throwing a fit over namespaces

My development environment consists of node v6.8.0, TypeScript v2.0.3, gulp v3.9.1, and gulp-typescript v3.0.2. However, I encounter an error when building with gulp. Below is the code snippet that is causing the issue: /// <reference path="../_all.d. ...

Experiencing an unexpected wait before the requestAnimationFrame?

Surprisingly, Internet Explorer is actually performing the way I want it to in this case :-) I developed a function for SVG animations using requestAnimationFrame (for simplicity, I left out the value calculations here ... but my initial test involved an ...

Strange occurrences observed while looping through an enum in TypeScript

Just now, I came across this issue while attempting to loop through an enum. Imagine you have the following: enum Gender { Male = 1, Female = 2 } If you write: for (let gender in Gender) { console.log(gender) } You will notice that it iter ...

Trouble with Setting Up the Email Address for the 'File a Complaint' Form in WordPress

I am currently in the process of integrating a 'Complaint Registration Form' on my WordPress site. This form enables users to input their name, email address, order ID, and reason for filing a complaint. Once submitted, the details are forwarded ...

Extract data dynamically from multiple JSON arrays using AngularJS

In the task at hand, I am faced with multiple JSON arrays and my goal is to extract specific data using a loop. Specifically, I am interested in obtaining the value of the key count. Let's take a look at the code snippet: .then(function(){ var t ...

What is the correct way to create an if statement that checks if a style attribute is empty?

Currently, I am working on a feature that involves toggling the struck-through style of a span element when clicked. After experimenting with an if statement to determine the textDecoration attribute's value using console.dir(x), I found that the retu ...

JavaScript-generated buttons fail to trigger VueJS functions

I have a function that creates buttons for each item in a list, and each button is supposed to execute a function in the App.vue file when clicked. The issue I am facing is that neither the onclick nor the v-on:click methods are functioning as expected. ...

Is it possible to include a local directory as a dependency in the package.json file

As I work on developing an npm package alongside its application, I find myself constantly making small changes to the package. Each time I make a change, I want to run the application again for testing purposes. The package is included as a dependency in ...

Error encountered with Passport js Local Strategy: The LocalStrategy necessitates a verify callback function

Encountering Passport JS Local Strategy Error with Node & Express I have successfully implemented OAuth 2 for Google authentication using Passport in my project. However, I am facing an error with the Local Strategy of Passport and I can't seem to fi ...

Implementing Ext JS Checkbox Inside a Row Editor

Does anyone have a solution for aligning the checkbox in a RowEditor to the center position? I am using the "triton" theme with Ext JS 6.0.0. The issue is that the checkbox is currently placed at the top of the row, while other fields like textfield or co ...

Dominating React Components with Unique CSS Styles

Currently, I have developed a NavBar component. I've implemented some JavaScript code that changes the navbar's background color once it reaches 50px. However, I am facing an issue in applying this scroll effect to only one specific file and not ...

Here's how to use the useState hook directly in your React components without

Currently, I am using the code snippet below to import useState: import * as React from 'react' import {useState} from 'react' I wanted to see if there is a way to condense this into one line, so I attempted the following: import * a ...