Performing AJAX requests and operations synchronously during the waiting process

I am working with an ExtJS client-side program that communicates with the server using synchronous AJAX. Most responses are received in less than 1 second, but occasionally, there are some cases where the server takes 10 seconds or more to process commands. In order to notify the user that this delay is expected and not a bug, I need to implement a mechanism (like a "pls wait" form).

So, what I envision is:

Send request;
Set a timeout to 'show loading form' after 2 seconds;
Wait for response;
Close loading form once response is received;
Process the response.

Is there a way to execute a function while waiting for a synchronous AJAX response?

P.S. I am currently using synchronous AJAX due to legacy reasons and it cannot be changed (the best option would involve over 6 months of work).

Answer №1

While there may not be predefined methods for this, one way to achieve it is by intercepting all events during an asynchronous request.

Answer №2

Absolutely, it's known as asynchronous AJAX. This allows you to perform other tasks while your HTTP request is in progress.

On the other hand, synchronous AJAX does not provide this flexibility.

In JavaScript, everything operates on a single thread.

Therefore, a synchronous ajax request will essentially put a hold on your sole thread.

The most effective approach is to display a loading screen before each and every asynchronous ajax request and then remove it once the request is complete.

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

What could be causing the mail() function to send an email with the body content set as "0"?

This content is being transmitted through Ajax. Here's the JavaScript code: $.ajax({ url: objCommon.ajax, type: 'POST', data: {type:'feedback', msg:$('.commonsFeedbackDiv').text(), url:window.location.href}, ...

ajax php

Are there any specific plugins or recommended methods for Gatsby to generate each build in a different language?

If I have a website built in Gatsby with English content on www.someWebsiteUrl.com, how can I create the same page with Spanish content on www.someWebsiteUrl.es? Is there a way to specify which site with specific translations should be generated? For exam ...

javascript reactjs gatsby

At times, $http may give an error code of 0 while other times it

I am facing an issue with my Angular controller that processes form data, manipulates it, and sends it to the server using $http for saving. Sometimes, the code works perfectly - the success function is triggered. Other times, however, I receive error cod ...

javascript angularjs node.js mongodb

Establishing a universal function within Ionic AngularJS

I have the following code snippet, where I have added a reset function that I want to be able to use from ng-click in any part of any template. angular.module('starter', ['ionic', 'starter.controllers', 'starter.services ...

javascript angularjs ionic-framework

"Facing issues with Update Panel working synchronously instead of asynchronously

In my Master page, I have included a Script Manager as shown below: <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> Within the content page, there is an Update Panel containing a DataList and a Button structured li ...

javascript c#asp.net ajax

Using the .innerHTML property in combination with setTimeout will only display the final section when executed

Just starting out with JavaScript. My goal is to display the elements of an array one by one in the same spot, but with a specific time delay between each element. Currently, it only shows the last element. <!DOCTYPE html> <html> <head> ...

javascript html

The passport authentication process is malfunctioning as there seems to be an issue with the _verify function

Having an issue and could use some assistance. I am currently implementing passport in my express application. While I am able to successfully register a user, I encounter an error when trying to log in. TypeError: this._verify is not a function at Str ...

javascript node.js express passport.js

Getting the referer in getStaticProps: A simple guide

Is there a way to access the referer in the getStaticProps method? I am familiar with how to do it using getServerSideProps, but unsure about getStaticProps. In getServerSideProps: context.req.headers.referer; Using JavaScript: document.referer; What is ...

javascript reactjs next.js

Can someone explain how to implement an onclick event for a div element inside an iframe using jquery or javascript?

Understanding the HTML Structure <iframe src="#" scrolling="no" id="gallery-frame"> <div class="gv_filmstrip"> <div class="gv_frame"> <div class="gv_thumbnail current"> <img src="images/grandstand-padang-right/1.jpg"> </d ...

javascript jquery html iframe

The Ajax request is not being triggered when using a different form submit method

Being a tech enthusiast, I have developed a handy function: function blur_slide_visit_count(){ $.ajax({ type: 'POST', url: 'add_save_slide_visitor_count.php', async: false, data: { fillvalue: fieldAr ...

javascript php jquery ajax

Hide and reveal images on hover by using multiple images or links on a single webpage

Despite my efforts, I haven't been able to find exactly what I'm looking for. My current setup involves an image/content slider powered by Awkward Showcase. Within each slide, I want to incorporate a mouse-in/mouse-out effect that switches and hi ...

javascript jquery css slider

ResponseXML in AJAXBindingUtil

I'm having an issue with the responseXML in my AJAX code. Here is an excerpt from my callback function: var lineString = responseXML.getElementsByTagName('linestring')[0].firstChild.nodeValue; The problem I'm facing is that the linest ...

javascript ajax string

Middle-Click JavaScript Action

On the website I'm currently working on, there is a button that uses a sprite sheet animation and therefore needs to be set as a background image. I want the button to have a slight delay when clicked, so the animation can play before redirecting to a ...

javascript jquery html href sprite-sheet

Tips for Wrapping Page Layouts and Routes in Angular 4

As I work with my regular angular 4 app, I often find myself using Router, ActivatedRoute.params.subscribe, [routerLink], and other tools to navigate between pages and interpret URLs. This results in a multitude of "magic strings" scattered throughout var ...

javascript angular typescript url-routing encapsulation

Is there a way for me to view the content through a link?

Is it possible to retrieve the link content using JavaScript and jQuery? <a href='http://example.com' id='my id'>content</a> ...

javascript jquery html

Encountering Err_Connection_Refused while working with MVC WebAPI 2 and AngularJS

Seeking guidance on WebAPI, AngularJS, and .NET Authentication, I am currently following a tutorial mentioned HERE. The tutorial is brief (~under 10 mins), but I encountered an error stating Failed to load resource: net::ERR_CONNECTION_REFUSED. Typically, ...

javascript asp.net-mvc angularjs asp.net-web-api

What could be the reason for my error messages not displaying when I have defined them on a static method in the schema, despite the error handling seeming to

I have created a static method in my schema that defines the User document structure in my MongoDB database. This method, .findByCredentials(), is used to verify if a user-provided email and password match an existing user and hashed password in the databa ...

javascript express mongoose error-handling mongoose-schema

Automate the login process for a website and programmatically fill out and submit a form

I am currently trying to automate the login process on Skype's website using Selenium in C#. Everything goes smoothly until I reach the password field, which seems to be elusive to Selenium. I have tried various methods to locate the password field bu ...

javascript c#html selenium firefox

Creating Layouts with Bootstrap 3

I'm exploring the codepen below in an attempt to mimic the appearance of the image provided consistently across all screen sizes. However, there are two issues that I am encountering - firstly, the green numbers on the first line which represent the d ...

javascript jquery html twitter-bootstrap twitter-bootstrap-3

Simple solution for storing key-value pairs temporarily in a form using JQuery

Is there an elegant method to temporarily store an array of string values in a form? In my article editing form, users can add tags as string values. I don't want these tags to be persisted until the user saves the entire article, so I require a way ...

javascript jquery

JavaScripter Q&A