Response from the server to multiple asynchronous XMLHttpRequests

I'm in the process of creating a Web Application that involves making multiple simultaneous XHR calls using Ajax instead of native Javascript.

 $.ajax({
    type: 'POST',
    url: 'Services/Service.asmx/MyFunction',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify({
        'something': 'Something'
    }),
    success: function (data) {
        // Perform actions with the received data.
    },
    error: function (xhr, status, error) {
        // Handle any errors that occur.
    }
});

During debugging of the application and testing of two or more simultaneous calls, I noticed that although the client initiates XHR calls immediately after page load, there is a delay when multiple requests are made to the same web method fetching identical responses. This delay increases with each subsequent call.

https://i.sstatic.net/uCOni.png

It appears that the server processes these XHR calls sequentially rather than in parallel - receiving the requests, handling one at a time, responding, before moving on to the next request. Is this intentional behavior, or is there a way to have the server handle each request independently and concurrently?

Answer №1

The configuration and type of backend system play a crucial role in determining how requests are handled. It could be a VPS, dedicated server, or cloud setup with one or multiple nodes. The structure may involve a single database or distributed databases.

If you've observed that requests are not processed simultaneously, it suggests that the server might be operating with a single node, process, or database. Alternatively, it could be due to the nature of the operations where the second request relies on the outcome of the first one, limiting parallel execution.

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

Incorporating the Results of a Script into TinyMCE with the Help of

Recently, I developed a script for creating a basic table layout structure. To enhance its functionality, I decided to integrate AJAX with jQuery in order to input the output of the script into a TinyMCE textarea. The PHP script itself works seamlessly whe ...

Parameterized function call on click event

There is a function defined as follows: menu[0].onclick = function() { filters.reset_all(); clients.get(); } This function gets called when the user clicks on the first menu element. Now, I need to invoke this function from another place and here ...

Is there a way to refresh my order hook in React JS?

I've been attempting to modify the values within my order hook, but for some reason, they aren't updating. I'm relatively new to React and can't figure out what mistake I might be making. Any insights? Take a look at my code snippet: ...

Error message encountered: 'GlobalStyles' is not a valid export from the module '@material-ui/system' (referenced as 'SystemGlobalStyles')

./node_modules/@material-ui/core/GlobalStyles/GlobalStyles.js Error encountered while trying to import: 'GlobalStyles' is not exported from '@material-ui/system' (imported as 'SystemGlobalStyles'). I am currently grappling wi ...

Tips for containing a range slider within a div element in a flexbox container

I am currently using Javascript to generate a grid of images, and I want to include a range slider at the bottom of one of the images. Here is a simplified version of my code using flex-container: <style> .flex-container { display: flex; fle ...

What is the best way to transform an array of objects in JavaScript?

I'm working with an array of objects that I need to transform into a table by pivoting the data. In other words, I am looking to generate a new array of objects with unique titles and nested arrays of key-value pairs. Can someone please assist me in a ...

Is there a way to eliminate the blue border from a Material React Modal?

I am currently using the React Material Modal and noticed that in the demo examples, there is a blue border when the modal is opened. Is there a way to remove this blue border? I have tried setting the disableAutoFocus property to "true" in the Modal Api ...

What is causing this setInterval function to run repeatedly?

Below is the code snippet from my Vue application: mounted: function () { this.timer = setInterval(async () => { if (this.progress >= 1) { this.progress = 1 clearInterval(this.timer) } console.log('update& ...

Synk: the presence of a self-signed certificate within the certificate chain

Recently, I've been encountering the error message Synk Protect is showing "self-signed certificate in certificate chain" when I try to run npm install on a project of mine. Would appreciate any help or tips on how to identify which out of the 984 pac ...

Angular select element is not functioning properly with the `addEventListener` method

My current project involves creating a table using the primeng library. The table consists of three rows and three columns, and all the data is static. Even though I am utilizing an external library, I find myself traversing the DOM directly. <p-table ...

Switching code from using .hover() to using .click() while still maintaining the functionality of both.orChanging code to switch

How can I change this script to trigger on click and also maintain the hover functionality: $x = jQuery.noConflict(); $x(document).ready(function () { $x(".swatch-anchor").on('click hover', function () { var newTitle = $x(this).attr( ...

Leveraging deep linking to launch the email application in react native

I am currently exploring the deeplink URL for the mail app on iOS. A scenario I have set up involves displaying an alert that, when the user clicks 'ok', redirects them to the default mail app. const openEmailApp = () => { if (Platform.OS ...

JavaScript: Issue with launching Firefox browser in Selenium

I'm currently diving into Selenium WebDriver and teaching myself how to use it with JavaScript. My current challenge is trying to launch the Firefox browser. Here are the specs of my machine: Operating System: Windows 7 64-bit Processor: i5 Process ...

Passing an unpredictable amount of parameters to react router in a dynamic way

Within my React application, users have the ability to create both folders and files. A folder can contain an indefinite number of subfolders within it. Here is an example structure: Folder-1 |_Folder-1-1 |_Folder-1-2 |_Folder-1-2-1 |_Folder- ...

Generate a blank image using the canvas.toDataURL() method

I've been attempting to take a screenshot of this game, but every time I try, the result is just a blank image. var data = document.getElementsByTagName("canvas")[0].toDataURL('image/png'); var out = document.createElement('im ...

eliminate the gap in the MUI Accordion when it is expanded

How can I prevent the Accordion MUI component from moving and applying top and bottom margins to summary elements in expanded mode? I added the following code to the summary element but it doesn't seem to be working. Any suggestions on how to fix this ...

Using Javascript to display or conceal a specific child element within a loop, based on which parent element has been clicked

I need assistance with creating a grid of projects where clicking on a specific 'project' in the loop will display the corresponding 'project_expanded' div, while hiding all other 'project_expanded' divs. My initial plan was ...

React's conditional statement is malfunctioning

I am attempting to display a specific form for review if the user meets the following criteria: 1. Logged in 2. Not an administrator 3. Not a moderator My code currently looks like this: <h2>Write a Review</h2> {errorResortReview &a ...

Determine in jQuery whether a Value is present within a JSON dataset

[ { "link" : "images/examples/image-3.png", "image" : "images/examples/image-3.png", "title" : "copy" }, { "link" : "images/examples/image-3.png", "video" : "video placeholder", "title" : "c ...

Issue with Ant Design form validation

After reading through the documentation, I attempted to implement the code provided: Here is a basic example: import { Button, Form, Input } from "antd"; export default function App() { const [form] = Form.useForm(); return ( <Form f ...