Error with retrieving data using AJAX, information not being displayed completely

var xmlHttp = setupXmlHttpRequest();

function setupXmlHttpRequest() {
    var xmlHttp;

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

    return xmlHttp;
}

function loadData() {
    if (xmlHttp) {
        xmlHttp.open("GET", "bacon.txt", true);
        xmlHttp.onreadystatechange = handleResponse();
        xmlHttp.send(null);
    }
}

function handleResponse() {
    var display = document.getElementById('display');

    if (xmlHttp.readyState == 1) {
        display.innerHTML += "Status 1: server connection established";
    }

    if (xmlHttp.readyState == 2) {
        display.innerHTML += "Status 2: done";
    }

    if (xmlHttp.readyState == 3) {
        display.innerHTML += "Status 3: done again";
    }

    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
            var responseText = xmlHttp.responseText;
            display.innerHTML += "Status 4: request complete";
            display.innerHTML += responseText;
        }
    }
}

Currently, the output is only showing "server connection established".

Answer №1

Instead of attaching the listener only once, make sure it is properly set up.

Make the following change:

xmlHttp.onreadystatechange = handleServerResponse();

to this:

xmlHttp.onreadystatechange = handleServerResponse;

Answer №2

Hey there, to tackle this issue effectively, it's recommended that you utilize Fiddler. It appears that your request is getting stuck at readyState 1, indicating that the initial connection has been established but progress to status number 2 is being obstructed by something.

By monitoring your request with Fiddler, you will be able to identify what exactly is causing the problem and take necessary actions to resolve it.

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

Trigger a JQuery selector when a click event occurs

I'm trying to set up an event trigger when clicking on a specific class within a div. Here's what I've attempted: $("div .event").click(function() { alert($( this ).text()); }); And also tried the following: $("div").on("click", $(&a ...

React Ant Design: Toggle Visibility of Columns

Seeking a method to toggle the visibility of columns for the Table Component in Ant Design. The goal is to include a checkbox next to each column name. When unchecked, the column should be hidden. In my previous experience with react-table, accomplishing ...

Issue with socket.io: Server unable to emit event to client upon connection

I'm struggling with my basic socket.io setup as I can't seem to get my server to send a message once the connection is established. Upon establishing a connection to my server, I want it to automatically send a message back to the client. Here&a ...

Inconsistent Accuracy of React Countdown Timer

Hello everyone! I'm new to programming and I'm currently working on creating a countdown timer that goes from 3 to 0. The issue I'm facing is that the timer counts down too quickly when rendered on the screen. I've tried adjusting the i ...

Failure to send serialized data via AJAX to the specified URL

After executing the SUCCESS function, I have confirmed that my values are accurate: serviceID=123&acceptAgreement=on The acceptAgreement field is an input checkbox. Despite this, the DB file does not show any updates. To troubleshoot, I attempted to ...

Navigating Time Constraints and Error Management in the World of Facebook Graph API

I'm currently working on a program that involves numerous fql and graph calls, but I'm facing difficulty in handling 'get' or 'post' errors. Can anyone provide guidance on how to implement retry functionality when these errors ...

A helpful guide on attaching event handlers to HTML buttons using JavaScript code

My HTML code consists of a series of square buttons like this - <td><button id="18" ></button></td> <td><button id="28" ></button></td> <td><button id="38" >< ...

Removing an item from an array depending on a specific condition and index

I am working with an array structure that looks like this: [ {key: 4, data: {…}, qText: {…}}, {key: 4, data: {…}, qText: {…}, isVisible: false}, {key: 5, data: {…}, qText: {…}, isVisible: false}, {key: 4, data: {…}, qText: {…}, isVi ...

Accessing variables from outside the query block in Node.js with SQLite

I'm looking to retrieve all the rows from a table and store them in an array called "arr". I need to access this stored array outside of the query section. Is there a way for me to get all the rows outside of the db.each function so that I can continu ...

The system encountered an error while trying to access the file "/box/main.c" because it does not exist in the directory

Currently, I am working on a project that requires the use of judge0 API. Initially, everything was running smoothly when I utilized it with RapidAPI. However, I made the decision to switch to a self-hosted setup using a docker-compose.yml file. While my ...

AngularJS's fading and flashing button styling

Seeking assistance with creating a smooth fade-based flashing button using AngularJS/Bootstrap. The goal is to not just have a simple "on/off" effect, but rather highlight to the user that they need to press submit. I have searched extensively for example ...

The React useState hook is not functioning as anticipated

I am having an issue with my useState hook that manages the state of selected checkboxes. The selected checkboxes should be instantly displayed in the UI within my filter, but currently they are only shown when the filter component is closed and reopened. ...

Is it necessary for material-ui useStyles to use the entire props object?

Perusing through the documentation, it suggests that in order for our component to accommodate style overrides using classes, we are advised to provide the entire props object to the useStyles hook: function Nested(props) { const classes = useStyles(prop ...

Activate click function once a different checkbox is marked

Can anyone help me with a jQuery function that accomplishes the following task? For instance, when checkbox1 is checked, I want to be able to click on other elements (with ids starting with element-) and have their IDs printed in the console. Here's t ...

Meteor fetching nested arrays

I am facing a challenge while trying to structure a table of orders in Meteor. Specifically, I am having difficulty displaying a nested array within the document. Below is the code snippet I am working with: Collection data { "_id" : "tDLaCMSde3QyneJ ...

Is it possible for the Vue computed function to use destructuring assignment for the parameter even when no arguments are provided?

new Vue({ el: "#app", data: { value: "text", }, computed:{ all: function({value}){ return value } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"> ...

Using JavaScript to pass a newly created variable as an argument in a default

Currently, I am developing a node application that heavily utilizes promises. To enhance the readability of my code, I have been removing anonymous functions and storing them in a JavaScript object called "myCallbacks". Here's an example: let myCallb ...

Manipulate an image by hiding it, altering its contents, and then displaying it

I am seeking the most effective method to accomplish the following task: $("#some-image").fadeOut(); $("#some-image").attr("src", "new-src.png"); $("#some-image").fadeIn(); For timing purposes, the code below is a step closer, but it still needs improvem ...

Opening an Excel document within an Angular 2 environment

I'm currently working with ng2-File-upload and I am looking to extract data from an Excel file, including all its rows, in order to determine the total count. Do you know if it is possible to accomplish this using the ng2-File-upload module? If not, d ...

Steps for redirecting to the homepage after a successful login in a ReactJS single-page application

Issue: I am facing a problem where, after clicking the login button, my page does not redirect to the home page. Even though I have successfully logged in as per the Application, I need to refresh (F5) the page to get everything back to normal after loggin ...