The practice of Ajax synchronous and asynchronous

Written in front: all test examples in this article are based on Mac Chrome, Firefox and Safari.

Sync Request

Synchronous request, in fact, is to tell the JS engine: you first to deal with my this to do other things! So synchronization does not need to wait, after send () directly to the responsetext to take the data is good.

  
 

   
  

  
function req() {
   
  

  
 var xhr = new XMLHttpRequest();
   
  

  
 xhr.open(‘get‘, ‘./data.json‘,false);
   
  

  
 xhr.send();
   
  

  
 console.log(xhr.responseText);
   
  

  
}
   
  

  
req();
  
 

Note: When synchronizing requests, each browser will be prompted that the synchronization method is not recommended because it affects the main thread. The exact words are: synchronous XMLHttpRequest on the main thread is deprecated because of it detrimental effects to the end user ' s exper Ience. For more help, check http://xhr.spec.whatwg.org/.

Asynchronous request

An asynchronous request is itself (a XMLHttpRequest object) binding an event first, tell the JS engine to say: I have a request here ha, the man has the time to help me to deal with, finished to help me to handle the callback also.

  
 

   
  

  
function req() {
   
  

  
 var xhr = new XMLHttpRequest();
   
  

  
 xhr.onreadystatechange = function (e) {
   
  

  
    i F     ( xhr   readystate  ==    4    &&   xhr   status  ==    200  )    {  
   
  

  
 console.log(xhr.responseText);
   
  

  
 }
   
  

  
 }
   
  

  
 xhr.open(‘get‘, ‘./data.json‘);
   
  

  
 xhr.send();
   
  

  
}
  
 

What happens when I sync with callbacks?!

Some time ago because the XMLHttpRequest object found MDN, which has prompted developers, if the use of synchronous request, then do not use onreadystatechange to do the binding, it is clear that you are synchronized, there is no need to bind it. I mistakenly operation (hand cheap), the amount ....

  
 

   
  

  
function req() {
   
  

  
 var xhr = new XMLHttpRequest();
   
  

  
 xhr.onreadystatechange = function (e) {
   
  

  
 //console.log(xhr.readyState);
   
  

  
    i F     ( xhr   readystate  ==    4    &&   xhr   status  ==    200  )    {  
   
  

  
 console.log(xhr.responseText);
   
  

  
 }
   
  

  
 }
   
  

  
 xhr.open(‘get‘, ‘./data.json‘,false);
   
  

  
 xhr.send();
   
  

  
 console.log(xhr.responseText);
   
  

  
}
  
 

The result is really output .... What's the situation? The engine still didn't forget to check the next tune ...
Remove the line4 comment and find that two states are printed, 1 (The Send () method has not been called), and 4 (Request end).
Uncomment the LINE11 to verify that the order of execution is request-callback-synchronous (that is, Line11 here).

Since the callback was executed, why is the state only 1 and 4?

There is a sentence when viewing the MDN: If the request is asynchronous (which is the default), this method returns as soon as the request is sent. If the request is synchronous, this method doesn ' t return until the response have arrived.
That is, after the send call, if the request is asynchronous, it returns immediately after the call, and if the request is synchronous, it waits until the request is complete and then returns. This also explains why there are only 1 and 42 states in the above synchronization request.
Wordy so much, pure nothing blind bb, a word, as little as possible with synchronization, with synchronization with event binding.

Try to perform the synchronization request in the child process:

The original script should read:

  
 

   
  

  
var w=new Worker(‘./worker.js‘);
   
  

  
w.onmessage=function(e){
   
  

  
 console.log(e.data);
   
  

  
}
  
 

New script File Worker.js

  
 

   
  

  
function req() {
   
  

  
 var xhr = new XMLHttpRequest();
   
  

  
 xhr.open(‘get‘, ‘./data.json‘,false);
   
  

  
 xhr.send();
   
  

  
 postMessage(xhr.responseText);
   
  

  
}
   
  

  
req();
  
 

At this point the browser no longer prompts the above said synchronous XMLHttpRequest on the main thread is deprecated because of it detrimental effects to the end US Er ' s experience. For more help, check http://xhr.spec.whatwg.org/.

From for notes (Wiz)

The practice of Ajax synchronous and asynchronous