B/S mode (synchronous) AJAX technology (asynchronous), ajax asynchronous

B/S mode (synchronous) AJAX technology (asynchronous), ajax asynchronous

Synchronization(Synchronization) is the most common click-refresh mode. click a connection or submit a form, and the entire page is refreshed.

Asynchronous(Asynchrony). Currently, AJAX is a typical example. When a request is submitted, the returned object is an invisible layer. Then, use js to change the display of the current page based on the returned data, for example, google map ....

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 about 2 k in length, that is, 2048 characters. When AJAX requests are made using GET, the cached page may not appear correctly. Generally, the random parameter value is added. ajax. send (null ).

POST

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). Submit 2 GB of data volume. Use ajax. setRequestHeader ('content-type', 'application/x-www-form-urlencoded') to process the submitted string. ajax. send (strings). This strings indicates the content to be submitted in form, for example, a = 1 & B = 2.

Synchronous and asynchronous:

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.

(Note: ajax in the text indicates the XMLHTTP request object .)

 

 

1 // Synchronous Transmission Mode
2
3 function RequestByGet (nProducttemp, nCountrytemp)
4 {
5 var xmlhttp
6
7 if (window. XMLHttpRequest)
8 {
9 // isIE = false;
10 xmlhttp = new XMLHttpRequest ();
11}
12 else if (window. ActiveXObject)
13 {
14 // isIE = true;
15 xmlhttp = new ActiveXObject ("Microsoft. XMLHTTP ");
16}
17
18 // Web page location.
19 var URL = "http://www.baidu.com /;
20 xmlhttp. open ("GET", URL, false );
21 // xmlhttp. SetRequestHeader ("Content-Type", "text/html; charset = Shift_JIS ")
22 xmlhttp. send (null );
23 var result = xmlhttp. status;
24
25 // OK
26 if (result = 200)
27 {
28 document. getElementById ("div_RightBarBody"). innerHTML = xmlhttp. responseText;
29}
30 xmlhttp = null;
31}
32
33
34 // asynchronous transmission mode
35 var xmlhttp
36
37 function RequestByGet (nProducttemp, nCountrytemp)
38 {
39 if (window. XMLHttpRequest)
40 {
41 // isIE = false;
42 xmlhttp = new XMLHttpRequest ();
43}
44 else if (window. ActiveXObject)
45 {
46 // isIE = true;
47 xmlhttp = new ActiveXObject ("Microsoft. XMLHTTP ");
48}
49
50 // Web page location.
51 var URL = "http://www.baidu.com /";
52 xmlhttp. open ("GET", URL, true );
53 xmlhttp. onreadystatechange = handleResponse;
54 // xmlhttp. SetRequestHeader ("Content-Type", "text/html; charset = UTF-8 ")
55 xmlhttp. send (null );
56}
57
58 function handleResponse ()
59 {
60 if (xmlhttp. readyState = 4 & xmlhttp. status = 200)
61 {
62 document. getElementById ("div_RightBarBody"). innerHTML = xmlhttp. responseText;
63 xmlhttp = null;
64}
65}
66

 

Summary:

Get is a type of request to fetch data from the server, while Post is a type of request to submit data to the server.
Get is used to obtain information, rather than modify information. Similar to the database query function, data is not modified.
The Get request parameters are transmitted after the url, and the request data is attached to the URL? Separated URL and transmitted data. parameters are connected with ampersands (&). XX in % XX represents the ASCII value in hexadecimal notation. If the data is an English letter or number, it is sent as is, if it is a space, convert it to +. If it is a Chinese character or other character, the string is encrypted using base64.
The size of data transmitted by Get is limited. Because GET submits data through a URL, the amount of data that can be submitted by GET is directly related to the URL length, different browsers have different restrictions on the URL length.
The GET request data will be cached by the browser, and the user name and password will appear in the URL in plain text. Others can check the historical browsing records, which is not safe. On the server side, Request. QueryString is used to obtain the data submitted in Get mode.
THE Post request is sent to the web server as the actual content of the http message, and the data is placed in the HTML Header for submission. There is no limit on the submitted data for Post. Post is safer than Get. when the data is Chinese or non-sensitive data, use get. Because get is used, the parameters are displayed at the address. for sensitive data and data that is not Chinese characters, post
POST indicates a Request that may modify resources on the server. on the server side, data submitted in Post mode can only be obtained using Request. Form.

Issues submitted using get:

The first problem has been solved in the XMLHttpRequest object explanation;

The reason for the second problem is:

Each time a get request accesses the cache, it checks whether there are matching URLs. If yes, it returns the cached url. If no, it sends a request to the server.

Solution:

1. Add a dynamic parameter to the url so that different URLs are accessed each time, so that a new request is sent to the server each time.

For the third question, let's first look at the cause of Garbled text:

The data returned by xmlHttp is a uft-8 by default. If the client page is gb2312 or another encoding, garbled characters are generated.

Solution:

1. If the client is gb2312, specify the output stream encoding during output.

2. Both the client and server use UTF-8 encoding.

3. Use the encodeURIComponent method to encode the parameters.

Post:

1. Use the POST method to pass parameters:

The browser sends the field elements and data in each form to the Web server as the entity content of the Http message.

Parameters are sent along with the send method, such as send (data). The server-side character set is set using the request. setCharacterEncoding ("UTF-8"); statement. Make the client HTML encoding and server side request. setCharacterEncoding ("UTF-8"); consistent. When the server side obtains parameters, you need to use Request. Form [data].

2. for data transmission in the form of a key-value pair, the POST method can be used. For complex parameters, the JSON or XML method can be used for data transmission.

3. Set Content-Type to application/x-www-form-urlencoded to ensure that the server knows that there are parameter variables in the object.

4. select an appropriate method to process the server response.

Next, we will introduce how ajax Asynchronously processes services based on the returned state of pseudo-static request data.

Methods In AJAX and differences in synchronous Asynchronization

Synchronous interaction is the most common click-refresh mode. When you click a connection or submit a form, the entire page is refreshed for Asynchronous interaction. Currently, AJAX is a typical example, when a request is submitted, the returned object is an invisible layer. Then, use javascripts to change the display of the current page based on the returned data. For example, google map

[Tutorial] Is this program synchronous or asynchronous in Socket?

In fact, you can find some information online. The key is understanding.

For example: Normal B/S mode (synchronous) AJAX technology (asynchronous)
Synchronization: submit a request, wait for the server to process, and return the result. The client browser cannot do anything during this period.
Asynchronous: requests are triggered through events-> server processing (this is what the browser can do)-> processing is complete

There are explanations on the first floor:
It is synchronous. The server keeps listening and processes the received information.
Asynchronous processing is time-sharing.

Classic interpretation 1:
Synchronization refers to the communication mode in which the sender sends a packet only after the receiver sends a response.
Asynchronous means that the sender sends the next packet instead of sending the response from the receiver.

Classic 2:
Synchronization: submit a request, wait for the server to process, and return the result. The client browser cannot do anything during this period.
Asynchronous: requests are triggered through events-> server processing (this is what the browser can do)-> processing is complete

Classic funny explanation:
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.