How to implement multiple AJAX requests using JQUERY

The editor below will share with you an example of using JQUERY to implement multiple AJAX request waiting. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor and take a look.

Preface Usually, jQuery’s function ajax makes Ajax calls. Function ajax can only make an Ajax call. When the Ajax call is successful, the callback function is executed. Optionally, call another callback function when the Ajax call returns an error.

However, this feature cannot make multiple Ajax requests and register callback functions based on the results of these requests.

One situation is when a web page makes multiple Ajax requests to collect data on different parts of the page when user interaction is disabled.

This page will only allow user interaction after the page has obtained all data. This article introduces a method provided by jQuery to register callback functions based on multiple Ajax requests.

This method is based on the concept of Deferred objects. Related code First, there are two ASP.NET Web API functions in the background to accept server Ajax calls.

The code is as follows:

Background reception

ajax request code

To make a single Ajax call, you can use jQuery's ajax function. On the front is a simple example:

ajax call example Success and error callback functions are waiting for a single Ajax call. The jQuery library provides a way to make any callback function wait for multiple Ajax calls. This method is based on an object called a Deferred. Deferred objects can register callback functions based on whether the Deferred object is resolved or rejected.

The following is an example of a Deferred

Deferred example Note that Deferred objects can be chained. The following is an example of a chain of Deferred objects.

#The Deferred object has a method called promise. It returns a Promise object. Promise objects expose a subset of Deferred methods to prevent their state from being changed.

This means preventing Deferred objects from being manually resolved or rejected.

Promise objects expose the following Deferred methods: then, done, fail, always, pipe, progress, state, and promise.

It does not expose the following Deferred methods: resolve, reject, notify, resolveWith, rejectWith and notifyWith. The promise object can be thought of as a Deferred object, which cannot change the state manually.

jQuery's ajax function returns a jqXHR object.

There are two important facts about this jqXHR object.

First of all, a jqXHR object is a superset of the XMLHTTPRequest object.

For example, a jqXHR object can query the status of the XMLHTTPRequest by referencing its readyState property.

If its readyState is 4, the Ajax request is completed.

Secondly, a jqXHR object implements the Promise interface and exposes all Promise methods.

Basically, a jqXHR object can be treated as a Promise object.

For example, the done method can be used as the success callback function of the jqXHR object.

The jQuery library provides a function called when, which accepts multiple Deferred objects and returns a Promise object.

When all Deferred objects are resolved, the returned Promise object will be resolved. When any Deferred object is rejected, it will be rejected.

The Deferred object passed to the function when can be a Deferred object, a Promise object or a jqXHR object.

The following is a code example to wait for multiple Ajax requests

First, two variables are stored returned from two jQuery Ajax calls jqXHR object.

Then pass the two objects to the function when. The returned Promise object when is linked to the function then.

The function then adds a handler to the Promise object.

The first parameter of the then function is a success function, which is called when the Promise succeeds.

The second parameter of the then function is the failure function called when the Promise is rejected.

The failure function checks the status of each Ajax call. If the Ajax call does not complete, it will abort. Note that since the page has been executed and closed, the failing function still has access to the out-of-scope variables j1 and j2.

This is because JavaScript is turned off. Closures are inner functions that allow access to variables in the outer function even if the outer function is closed. In other words, inner functions can maintain the environment in which they were first defined.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use webpack to package files

Detailed introduction to the proxy mode (Proxy) in ES6

Detailed introduction to building webpack

Detailed introduction in Vue $attrs attribute

The above is the detailed content of How to implement multiple AJAX requests using JQUERY. For more information, please follow other related articles on the PHP Chinese website!