Is Dealing with Multiple AJAX Requests a Pain?

Currently, I am utilizing AJAX to retrieve a list of active streams from TwitchTV along with their viewers, updating every second. Sometimes the stream list can become quite long, so my plan is to divide the AJAX requests into 2 or 3 parts:

1) Obtain Number of Viewers for Current Stream (Check every 1 Second)

2) Divide Stream List in Half and Check First Half for Active Streamers (Check every 5 Seconds)

3) Check Second Half of List for Active Streamers (Check every 5 Seconds)

This approach will involve running 3 requests simultaneously, but I am concerned about potential increase in load times. Will the constant data retrieval slow down the page? Would users notice any delays? Is it more efficient to use one large AJAX request for substantial data or multiple smaller requests for smaller data portions? Is AJAX truly the best method for continuously fetching constantly changing live data?

Answer №1

When it comes to your queries, the answer may lie in the famous phrase "It varies":

  1. The AJAX calls themselves shouldn't pose a hindrance to speed. These requests are asynchronous, meaning they will only impact the user's browser once they are finished.

  2. Your app's performance could be affected by DOM manipulation upon request completion. While updating the streaming user count may not cause issues, redrawing lists of streams could be resource-intensive and lead to lag during redraws.

  3. Consider utilizing websockets instead of AJAX for real-time updates, as this allows for constant connections and server-triggered data changes without polling.

  4. What is the purpose behind dividing your list into two halves?

  5. To reduce data transfer, consider signaling the latest data received to prevent sending redundant information. For example, like how Twitter sends the ID of the most recent tweet to avoid unnecessary data transfer. Tailoring this approach to your specific needs could prove beneficial.

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

Tips for Implementing Multi-Level/Nested in Ajax Requests

I am currently developing a user-friendly web application with intuitive multi-level options that loads new content without the need to refresh the entire page. This is how my structure looks: /index.php /schools.html /colleges.html Within schools.html, ...

How to Use jQuery Post Method to Submit a Form Without Redirecting

I am looking to enhance the user experience of my form by preventing it from reloading upon submission. Specifically, I want to trigger the call to index.php when the submit button named "delete-image" is clicked in the scenario outlined below. It's i ...

The transmission of values to various conditionals in JavaScript

Within my input field, I am currently verifying two conditions... If the input field contains a valid email format If the input field ends with a certain domain $('#newsletter_submit').on('click', function () { document.getEleme ...

Utilizing a combination of HTML, AJAX, and PHP, transfer an HTML input array via AJAX to a PHP webpage

Despite trying numerous similar solutions, none of them have proven effective for my issue. Within a form, users can input an unspecified amount of select options that can be added as needed using AJAX. My goal is to post this array to a PHP page via AJAX ...

Utilizing ViewComponent with Ajax

Does anyone know how to implement AJAX with ViewComponent in Asp.Net Core? Specifically, calling the method @Component.Invoke("ComponentName", SomeData); will display various views based on SomeData without refreshing the main view. Update Here is my app ...

Creating nested tables by assigning unique Div IDs to each table element

Can we utilize a straightforward JavaScript/jQuery function to nest elements inside table elements? For instance, every square comes with its own unique ID (A1, B7, C5). How can I use this ID to insert the checker image in any selected tile upon clicking? ...

Delete JavaScript functions and events from memory once the JavaScript code has been removed from the HTML file

I am encountering a situation with my website where popups loaded via ajax also load JavaScript code, which I want to remove when the popup is closed. The main site code looks like this: <body> ... <div id="popup" style="display:none"> < ...

Is there a way to restrict the selection of new tags in jQuery select2 plugin when a valid value from the ajax call is already present in the list?

I am currently utilizing select2 version 4 for multiple select functionality. I have enabled the option for users to add new tags, but I want to restrict them from choosing a tag that already exists in my backend database. At present, when a user inputs a ...

Enclose each instance of "Rs." with <span class="someClass">

I'm facing an issue with the currency symbol "Rs." appearing in multiple places on my website. I want to enclose every instance of this text within <span class="WebRupee">. However, if it's already wrapped in <span class="WebRupee">, ...

Tips on using Ajax to post in HTML

Here is the code I have been working on: <script type="text/javascript"> var xmlDoc; var xmlhttp; function loadRates() { xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = readRates; xmlhttp.open("GE ...

Utilizing regular expressions on a URI parameter in JavaScript

I implemented an ajax function that retrieves three images (PORTRAIT, SQUARE, and LANDSCAPE) from a JSON response: $.ajax({ url: link, method: 'GET', headers: { "Authorization": authToken ...

Updating the minimum date based on the user's previous selection using React JS and Material UI

In my material UI, I have two date pickers set up: From Date - <KeyboardDatePicker value={initialDateFrom} disableFuture={true} onChange={handleFromDateChange} > </KeyboardDatePicker> To Date - <KeyboardDatePicker value={initialDateTo} ...

Load JSON file in ExtJs using Ext.Ajax.request method: A step-by-step guide

I am exploring a new approach to loading a json file in ExtJs. In the past, I used jQuery to achieve this functionality as shown in the code snippet below: Ext.define('app.store.Students', { extend: 'Ext.data.Store', model: &ap ...

Encountering difficulty accessing the router during testing in Next.js

Hello, I'm currently attempting to test a scenario where when a button is pressed, it should redirect to '/'. Normally this works fine, but during testing it fails and shows the following error: Cannot read properties of null (reading ' ...

Press the Text and Alter Text with React

I'm having an issue with the onClick event using React hooks. My goal is to have the text change to a different one when the user clicks, and then revert back to the original text on another click. For example, clicking "Change First" should switch it ...

Prevent onlick actions until JavaScript function has completed

I run a dynamic quiz website using PHP, JavaScript, and MySQL. The quiz consists of multiple choice questions with answer options displayed on four buttons. <input type = "button" value="$alt1" onClick="changeQuestion('alternative1'); this.st ...

Tips for transferring a file to PocketBase using NodeJs

Currently, I am in the midst of a project that necessitates uploading numerous PDF files to a PocketBase collection. All the necessary files are saved on my computer and my goal is to upload them using nodejs along with the PocketBase JavaScript SDK. Howe ...

Tips on providing validation for either " _ " or " . " (select one) in an Angular application

I need to verify the username based on the following criteria: Only accept alphanumeric characters Allow either "_" or "." (but not both) This is the code snippet I am currently using: <input type="text" class="form-control" [ ...

Tips for implementing dependency injection in AngularJs with ES6

I have integrated the yeoman angular-fullstack boilerplate into my project. 'use strict'; class LoginController { // Implementing login functionality. } angular.module('myApp') .controller('LoginController', LoginCont ...

What are the reasons for utilizing various approaches when transmitting data to a server using jquery ajax?

I've been tasked with updating an old project and noticed that the data being sent to the server via jQuery's ajax method is formatted differently from how it's done in newer projects. In the old project, the data is passed as a JSON object ...