What is the difference between synchronous and asynchronous HTTP requests?

The normal B/S mode is synchronization, while AJAX technology is asynchronous. Of course, XMLHttpReques has the synchronization option.

Synchronization: submit a request and wait for the server to process it. During this period, the client browser cannot do anything.

Asynchronous: the request is triggered by an event-> processed by the server (this is what the browser can do)-> processed.

Here is a vivid example:

Synchronization means that you ask me to go to dinner. When I hear it, I will go to dinner with you. If I don't hear it, you will not stop calling until I tell you to hear it.

Asynchronous mode means that you call me and then eat on your own. After receiving the message, I may leave immediately or wait until I get off work.

Therefore, if I want to invite you to dinner, I will use the synchronous method. If I want to invite you to dinner, I will use the asynchronous method, so that you can save money.

For another example, synchronous messages are sent asynchronously during calls.

Ajax open () method

Usage: open (http-method, url, async, userID, password)

The account and password are followed. the user name and password are required on the http page where anonymous access is prohibited.

In the ajax. open method, 3rd parameters are set to synchronous or asynchronous. Js class libraries such as prototype are generally asynchronous by default, that is, set to true. First, in the case of synchronization, js will wait for the request to return and get the status. Onreadystatechange event handler is not required. While asynchronous processing requires onreadystatechange event processing, and the value is 4, and then the following content is processed correctly.

First, let's look at the asynchronous processing method.

Async is a Boolean value. If it is an asynchronous communication method (true), the client will not wait for the server to respond; if it is a synchronous mode (false), the client will wait until the server returns a message before executing other operations. We need to specify the synchronization mode based on actual needs. In some pages, multiple requests may be sent, or even highly-intensive requests with organized and planned structures, the other will overwrite the previous one. In this case, you must specify the synchronization mode: Flase.

Request Method

GET

The most common HTTP request is GET. The GET request directly follows the URL and starts with a question mark. (Window. location. search is used in JS ). The parameters can be encoded using encodeURIComponent. Usage:

var EnParam = encodeURIComponent(param);

• The URL can only be 2 k in length, that is, 2048 characters;
• When AJAX requests are made using GET, the cached page may not appear correctly. Generally, the value of the random parameter is added to the method;
• Ajax. send (null ).

POST

It is used to submit data to the server.

• You need to extract and convert the values in the form into strings and connect them with the & Symbol (same as the GET parameter );
• The submitted data volume is 2 GB;
• Use ajax. setRequestHeader ('content-type', 'application/x-www-form-urlencoded') to process the submitted string;
• Ajax. send (strings), which indicates the content to be submitted in form, for example, a = 1 & amp; B = 2.

Program example

Synchronous Transmission Mode:

function RequestByGet(nProducttemp,nCountrytemp){    var xmlhttp    if (window.XMLHttpRequest)      {           //isIE   =   false;           xmlhttp   =   new   XMLHttpRequest();      }      else if (window.ActiveXObject)    {           //isIE   =   true;           xmlhttp   =   new   ActiveXObject("Microsoft.XMLHTTP");      }                     //Web page location.    var URL="http://www.baidu.com/;    xmlhttp.open("GET",URL, false);    //xmlhttp.SetRequestHeader("Content-Type","text/html; charset=Shift_JIS")    xmlhttp.send(null);    var result = xmlhttp.status;       //OK    if(result==200)    {        document.getElementById("div_RightBarBody").innerHTML=xmlhttp.responseText;    }    xmlhttp = null;}

Asynchronous transmission mode:

var xmlhttpfunction RequestByGet(nProducttemp,nCountrytemp){    if (window.XMLHttpRequest)      {           //isIE   =   false;           xmlhttp   =   new   XMLHttpRequest();      }      else if (window.ActiveXObject)    {           //isIE   =   true;           xmlhttp   =   new   ActiveXObject("Microsoft.XMLHTTP");      }                     //Web page location.    var URL="http://www.baidu.com/";    xmlhttp.open("GET",URL, true);    xmlhttp.onreadystatechange = handleResponse;    //xmlhttp.SetRequestHeader("Content-Type","text/html; charset=UTF-8")    xmlhttp.send(null);  }function handleResponse(){    if(xmlhttp.readyState == 4 && xmlhttp.status==200)    {        document.getElementById("div_RightBarBody").innerHTML=xmlhttp.responseText;        xmlhttp = null;    }}