JavaScript XMLHttpRequest is always essential

I am currently working on a chat application that needs to constantly receive server information. After the request finishes, I have added an additional call to the function within the 

http.onreadystatechange=function()
like this:

request();

This sets everything up to run in a loop. However, I am running into an issue where it only seems to work properly in Google Chrome. In Internet Explorer and Firefox, the browser does not wait for the 

get.onreadystatechange=function()
to finish before continuously calling return() multiple times per second, causing unnecessary load on the server.

function request()
{
    var get;
    if (window.XMLHttpRequest)
    {
        get = new XMLHttpRequest();
    }
    document.getElementById("request_status").innerHTML = "requests: "+requests;
    get.onreadystatechange = function()
    {
        if (get.readyState == 4 && get.status == 200)
        {
            requests += 1;
            request();
        }
    }
    get.open("GET", "request.php", true);
    get.send();
}

When running in Google Chrome, the 'requests' increase by around 4 per second. However, in Internet Explorer and Firefox, the count jumps up to about 200 per second, indicating that something is not functioning as expected.

javascripthttpgoogle-chromefirefoxxmlhttprequest

Answer №1

While I haven't tested Explorer, I have successfully run your example on Firefox using this Fiddle link: http://jsfiddle.net/ZHdgb/1/

Although it worked for me, you may want to try making those requests synchronous so they fire one at a time. Here's how:

Replace 

get.open("GET","request.php",true);

With:

get.open("GET","request.php",false);

Answer №2

When finishing up your function, remember to incorporate 

setTimeout(functionHere(), timeInMilisHere)
in order to keep invoking your function at specified intervals in milliseconds

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

Data merging in Firebase 9 and Vue 3 is not functioning properly

I am facing an issue with merging data in my firebase database. I consulted the documentation at https://firebase.google.com/docs/firestore/manage-data/add-data for guidance. After attempting to merge data using setDoc, I encountered an error (Uncaught Ty ...

javascriptfirebasevue.jsgoogle-cloud-platformgoogle-cloud-firestore

Encountering an error with $mdDialog.alert

I am attempting to activate an Alert Dialog using Angular Material Design. Within my controller, I have: angular.module('KidHubApp') .controller('ActivityCtrl', ['$scope','$meteor', '$stateParams', &apo ...

javascriptangularjsmeteorangular-material

Sweet treats, items, and data interchange format

Can an object be converted to a string, stored in a cookie, retrieved, and then parsed back to its original form when the user logs on again? Here's a concise example of what I'm asking: var myObject = { prop1: "hello", prop2: 42 }; va ...

javascriptjsoncookies

Update a variable globally within setInterval function

Seeking assistance on showcasing the number of seconds that have elapsed using a setInterval function in JavaScript integrated within HTML. The code snippet below has been attempted, but it is only displaying 1 second and the test function appears to not ...

javascriptsetinterval

Creating Highcharts series with dynamic addition of minimum and maximum values

I am currently working with a Highcharts chart that includes multiple tabs allowing users to display different data on the graph. I am dynamically adding series for each of these data points, which has been functioning well. However, I have encountered an ...

javascripthighcharts

Is it possible to implement a custom sign-in form for AWS Cognito?

Is it possible to replace the AWS Cognito hosted UI with a custom form in my Next.js app that utilizes AWS Cognito for authentication? import { Domain } from "@material-ui/icons"; import NextAuth from "next-auth"; import Providers fro ...

javascriptreactjsamazon-web-servicesnext.jsamazon-cognito

Bringing in a feature within the Vue 3 setup

At the moment, I am attempting to utilize a throttle/debounce function within my Vue component. However, each time it is invoked, an error of Uncaught TypeError: functionTD is not a function is thrown. Below is the code snippet: useThrottleDebounce.ts imp ...

javascripttypescriptvue.jsvue-componentvuejs3

Excellent JavaScript library for capturing screenshots of the entire screen

Is there a good JavaScript library that enables users to take a screenshot of a webpage and customize the size before saving it to their computer? I am specifically looking for a pure JS solution where users can simply click on a button and have a "save a ...

javascriptimagecross-browserscreenshot

What benefits does using Object.create(null) offer in comparison to utilizing a Map?

I've noticed that some developers prefer using code that looks like const STUFF_MAP = Object.create(null); It seems that STUFF_MAP is intended to be used like a map, hence the choice of using Object.create(null) over {} (to avoid conflicts with prope ...

javascriptdictionaryjavascript-objectses6-map

Error in Node.js: [Error: Query parameter should not be empty]

I've been recently focusing on a project that involves sending the required name to my profile.js file using a POST request. However, whenever I try to access console.log(req.body.bookName) (as the data being sent is named bookName), it shows an error ...

javascriptnode.jsajaxpost

Exploring the capabilities of useRef in executing a function on a dynamically created element within a React/Remix/Prisma environment

I've been trying to implement multiple useRef and useEffect instructions, but I'm facing difficulties in getting them to work together in this scenario. The code structure involves: Remix/React, fetching data from a database, displaying the data ...

javascriptreactjsremix.run

"Is there a way to extract a value from a JSON object using

I have an object with the following key-value pairs: { 'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier': '918312asdasc812', 'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name': 'Login1&a ...

javascriptjsontypescript

Creating background color animations with Jquery hover

<div class="post_each"> <h1 class="post_title">Single Room Apartments</h1> <img class="thumb" src="1.jpg"/> <img class="thumb" src="1.jpg"/> <img class="thumb" src="1.jpg"/> <img class="thumb last" ...

javascriptjqueryhtmlcss

Having a hard time implementing a subtracting callback function in a JavaScript reduce function

Currently, I am tackling a code challenge in JavaScript that requires me to develop a function called reduce. This function is responsible for reducing a collection to a value by applying a specific operation on each item in the collection over which it it ...

javascriptarraysreduce

error displays stating that the module '../util/http_util' cannot be located

I'm currently using node and Notepad++ to develop a website that allows users to log in, save their details, and access the site. I've encountered an issue that I can't quite figure out even though everything seems fine in the code. Below yo ...

javascripthtmlnode.jsnpm

Tips for making Google search results include query strings in the returned links

I need help figuring out how to make Google search results show a URL containing a query string. Here's an example from the project I am currently working on: Instead of this link, Google search returns: If anyone has any suggestions for fixing this ...

javascriptphpcsssitemapgoogle-search-console

React-redux: Data of the user is not being stored in redux post-login

Hello everyone, I am fairly new to using react-redux and I'm currently facing an issue with storing user information in the redux store after a user logs in. I am utilizing a django backend for this purpose. When I console out the user in app.js, it ...

javascriptreactjsreduxreact-reduxreact-router

Issue with displaying nested React Elements from Component

I am currently facing an issue with my Collection component, which is utilizing a sub-component called RenderCollectionPieces to display UI elements. Strangely, I am able to see the data for image.name in the console but for some reason, the UI elements ar ...

javascriptreactjsmaterial-ui

Can Vue.js support two-way data-binding without the use of an input element?

Here is the code snippet that I'm working with: <div id="app"> {{ message }} </div> JavaScript: myObject = {message:"hello"} new Vue({ el: '#app', data: myObject }) When I update myObject.message, the content within th ...

javascriptvue.js

The icons from FontAwesome in Vue do not update when computed

I am seeking a way to dynamically change the header icon based on a conversation property. <a class="navbar-item" :title="$t('header.lock')" @click="makePrivate"> <i class="fas" :class="getLockClass"></i> </a> These ...

javascriptvue.js