Jquery ajax request mode with prompt user is being processed please wait a moment

  • 2020-03-30 03:47:30
  • OfStack

When I first started using $.ajax(), I didn't distinguish between asynchronous and synchronous requests for ajax. I started using synchronous requests and ended up with a lot of problems, especially in terms of experience.
Asynchronous and synchronous:
Synchronization, which means that one program is executed before the next, is in blocking mode, a phenomenon that manifests itself in web pages where the browser locks the page (known as a page in suspended animation) and the user can't do anything else but wait for the current request to return data. With asynchronous requests, the page does not appear to be suspended animation.
Improve user experience:
When the user submits the data and waits for the result of the page to return, it takes time, sometimes the waiting time is relatively long. In order to improve the user experience, we usually give the message "processing in progress, please wait a moment! And so on. We can do this by setting the parameter beforeSend() under $.ajax(),
Eg:
HTML key code


<div id="warning"></div>

The key code in the js file


$.ajax(function(){
.
.
.
//Some parameters are omitted, but async and beforeSend are only given here
async: false, //Synchronous request, asynchronous by default (true)
beforeSend: function(){
$('#warning').text(' Processing in progress, please wait a moment! ');
}
});

Note that if you set async: false, $('#warning').text(' processing in progress, please wait! '); There is no effect on the page at all. If $('#warning').text(' is being processed, please wait! '); Alert (' test'); You will immediately see a pop-up before you send the request, indicating that beforeSend: is executed, but change to something like $('#warning').text(' is being processed, please wait! '); No prompt appears after the request is sent and the result is returned. I've been wondering about this for a long time, but I still don't know what the problem is.
If you change a synchronous request to an asynchronous request, the problem is gone,


beforeSend: function(){
$('#warning').text(' Processing in progress, please wait a moment! ');
}

It will be executed immediately.


Related articles: