Is there a way to send a request before opening a new page that doesn't involve using synchronous XMLHttpRequest on the main thread, which is

With the deprecation of synchronous XMLHttpRequest, I am curious about any potential alternatives to achieve a similar behavior. Non-blocking asynchronous XMLHttpRequests may not always be suitable for specific cases.

I am specifically referring to a scenario where I need to send a POST request to the server when a user clicks on a hyperlink. In this case, using PreventDefault is not an option. By utilizing Synchronous XMLHttpRequest, I can trigger the request through an OnClick event, allowing the browser to continue its default behavior once the request is completed. However, using an asynchronous request could lead to unpredictable outcomes, depending on how quickly the new page loads in relation to the request completion.

Are there any more "modern" approaches to hold off the browser's default behavior until the POST request has been successfully executed?

Many thanks and best regards.

Answer №1

When the callback is triggered:

Update the window's location to "redirected url"

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

How do I test Pinia by calling one method that in turn calls another method, and checking how many times it has been called

As I embark on my journey with Vue 3 and Pinia, a particular question has been lingering in my mind without a concrete answer thus far. Let's delve into the crux of the matter... Here's an example of the store I am working with: import { ref, co ...

Create a variety of unique images without using the same one more than once

I'm currently developing my first Javascript game, but I've hit a roadblock.. I am trying to create a game that displays random images without repeating them. Each image should be accompanied by a random number between 4 and 10. The code I have w ...

Clicking on the button in Angular 2+ component 1 will open and display component 2

I've been developing a Angular 4 application with a unique layout consisting of a left panel and a right panel. In addition to these panels, there are 2 other components within the application. The left panel component is equipped with buttons while ...

Deleting a database row when the cancel button is pressed

I have a scenario where I need to remove a database row containing a file name when the user clicks on the cancel button. However, despite my efforts, the database row is not being deleted. Can anyone help me identify what I might be doing wrong? Here is ...

AngularJS application failing to initialize without a module being included

I'm feeling a bit lost when it comes to angularjs and I have a question about why my angularjs app is refusing to bootstrap without creating a module, even though egghead.io and other tutorials seem to suggest otherwise. Here's a snippet of my HT ...

The search box output will be the same as the JSON result

I have a server in Node.js that is able to read and process a JSON file containing various data, including unique user IDs. I have incorporated a search box into my HTML page, and I am seeking assistance with creating a jQuery method (which will require AJ ...

Iterate through each key in the response JSON object using a variable named "a

Here is a snippet of my code: var roomid= roomIds[i] const Availabilitydata = await AvailResponse.json(); availableroomsArray.push(Availabilitydata); app.get("/api/availability", (req, res) => { res.json({ indicateur: availableroomsA ...

Tips for adjusting the border color of a MUI Select field

https://i.stack.imgur.com/rQOdg.png This MUI select box changes color from blue to black based on selection. The challenge is to customize the text and border color to white (currently set as blue). Any suggestions on how to achieve this? ...

Designing a Custom Wordpress Extension and Integrating External Scripts

As I dive into the world of WordPress plugin development, I'm seeking guidance from the codex to enhance my skills. Currently, I have a basic plugin that loads a javascript file from a CDN and is supposed to display tooltips. However, I'm facing ...

Executing multiple JQuery post requests simultaneously

I am currently working with three functions, each of which posts to a specific PHP page to retrieve data. However, since each PHP script requires some processing time, there is a delay in fetching the data. function nb1() { $.post("p1.php", { ...

"Production environment encounters issues with react helper imports, whereas development environment has no trouble with

I have a JavaScript file named "globalHelper.js" which looks like this: exports.myMethod = (data) => { // method implementation here } exports.myOtherMethod = () => { ... } and so forth... When I want to use my Helper in other files, I import it ...

What is the best way to trigger multiple actions from a single form in Struts 1?

Seeking assistance on how to call multiple actions from a single JSP without using ajax. I have attempted various methods, but they don't meet the standards. Can you provide guidance on calling multiple actions without ajax? <html:form action="ins ...

Add the hue value from Hue into the Chromajs HSL state value

My objective is to dynamically change the background color of a div based on user input. I plan to assign the user's input as the value of the state key hue, and then set another state key called color to hold the HSL representation of the hue using C ...

Promise and Determination failing to produce results

const { GraphQLServer } = require('graphql-yoga'); const mongoose = require('mongoose'); mongoose.connect("mongodb://localhost/test1"); const Todo = mongoose.model('Todo',{ text: String, complete: Boolean }); const ...

The rc-form package in npm is issuing a Warning for the getFieldDecorator method when `defaultValue` is not being used as an option

Currently, I am on the rc-form 2.4.8 version and I am utilizing the getFieldDecorator method in my codebase. However, an issue has arisen: Warning: defaultValue is not a valid property for getFieldDecorator; the correct use is to set value, so please uti ...

Tips for effectively structuring material-ui Grid in rows

I am currently using the material-ui framework to create a form. Utilizing the Grid system, I want to achieve the following layout: <Grid container> <Grid item xs={4} /> <Grid item xs={4} /> <Grid item xs={4} /> </Gr ...

Is there a way for me to display a gif similar to 9GAG on my

I'm looking to implement a feature on my website that allows me to pause and play a gif, similar to the functionality on 9gag. Can anyone provide guidance on how I can achieve this? I understand that I need to use both .jpg and .gif files, but my at ...

Express: utilizing rawBody or buffer for a specific endpoint

I am looking to access the rawBody (buffer) specifically for a POST request on one route within my application. Currently, I have the following code snippet in my app.js: app.use(bodyParser.json({ verify: function(req, res, buf) { req.rawBody = buf; }})) ...

Changing all object values to true with React useState

In a certain file, I have defined an object with the following structure: export const items = { first: false, second: false, third: false } Within a component, I am using this object as shown below: import { items } from 'file'; const [el ...

Switch Between More and Less Text - Implement Smooth Transition on Shopify Using Javascript

I recently implemented a More/Less toggle button using resources from this website. The functionality is there, but I now want to add a smooth transition effect. When the user clicks on "read more," I would like the hidden content to gradually appear, and ...