jQuery Study Notes - Ajax Operation (3) - Process Processing

Observation function

The ajaxStart and ajaxStop functions can be used as observation functions, and we can use the callback function of the observation function to perform corresponding processing.

The callback function of ajaxStart is triggered when the Ajax request starts and no other transmission has been made.
When the last active request terminates, the callback function registered through ajaxStop is executed.
Since the observation function is global, it needs to be called using $(document). We test the two functions by using the Ajax method to obtain an image example:
The current page is:

<div></div>
<button>load</button>

Copy after login

The content of test.html in the same directory is:

<img src="avatar.jpg" />

Copy after login

Want to load an image after clicking the button:

 $('button').click(function() {
  $('div').load('test.html');
 });

Copy after login

At this point we can use the ajaxStart and ajaxStop functions to add prompts:

 $(document).ajaxStart(function() {//
  alert('load a picture');
 }).ajaxStop(function() {
  alert('show a picture');
 });
 $('button').click(function() {
  $('div').load('test.html');
 });

Copy after login

After clicking the button at this time, it will prompt load a picture before loading the image, and show a picture after loading.

Error handling

The most commonly used method is the global ajaxError method. Take the above example as an example. If we send a data request to a page that does not exist:

 $(document).ajaxError(function() {//
  alert('load failed!');
 });
 $('button').click(function() {
  $('div').load('noexsited.html');
 });

Copy after login

After clicking the button at this time:

For non-load methods, you can also use the fail method for concatenation processing:

 $('button').click(function() {
  $.get('noexsited.html', function(data) {

  }).fail(function(jqXHR) {
   alert('status is ' + jqXHR.status);
  });
 });

Copy after login