b/S Mode (synchronous) Ajax Technology (asynchronous)

synchronization (synchronization), which is the most common Click-refresh mode, points to a connection or submits a form, and then the entire page is refreshed.

Asynchronous (asynchrony), the current hot Ajax is a typical example, the submission request return object is not visible layer, and then use JS based on the return data, change the current page display, such as Google Map ....

 GET

The most common HTTP request, the normal Internet browsing page is get. The get mode parameter request is immediately followed by the URL, starting with a question mark. (JS is obtained with Window.location.search). Parameters can be encoded with encodeuricomponent, using the following methods:


var enparam = encodeuricomponent (param);

The URL supports only about 2K of length, that is, 2048 characters; When Ajax requests using get are cached, the resulting page is not correct, and the general method adds the random parameter value; ajax.send (null).

POST

used when submitting data to the server.

The values in the form form need to be taken out first to be converted to strings, concatenated with the & symbol (same as get arguments), commit data 2GB; using Ajax.setrequestheader (' Content-type ', ' application/ X-www-form-urlencoded '), which handles the submitted string, Ajax.send (strings), which represents what needs to be committed in the form, such as a=1&b=2 a string like this.

Synchronous vs. Asynchronous:

In the Ajax.open method, the 3rd parameter is set to synchronous or asynchronous. Prototype such as JS class library is generally default to asynchronous, that is set to true. First of all, in the case of synchronization, JS will wait for the request to return, get status. You do not need the onReadyStateChange event handler function. Asynchronous, however, requires onreadystatechange event handling, and a value of 4 correctly handles the following.

(Note: Ajax in this article represents the XMLHTTP request object.) ）

1//Synchronous Transfer Mode
2
3functionRequestbyget (nproducttemp,ncountrytemp)
4 {
5    varXMLHTTP
6
7    if(window. XMLHttpRequest)
8    {
9          //Isie = false;
TenXMLHTTP=   NewXMLHttpRequest ();
One    }
A    Else if(window. ActiveXObject)
-    {
-         //Isie = true;
the XMLHTTP=   NewActiveXObject ("Microsoft.XMLHTTP");
-    }
-
-    //Web page location.
+    varURL="http://www.baidu.com/;
-Xmlhttp.open ("GET", URL, false);
+//xmlhttp. setRequestHeader ("Content-Type","text/html; charset=shift_jis ")
A Xmlhttp.send (NULL);
at    varresult=Xmlhttp.status;
-
-    //OK
-    if(Result== $)
-    {
-document.getElementById ("Div_rightbarbody"). InnerHTML=Xmlhttp.responsetext;
in    }
-XMLHTTP= NULL;
to}
+
-
the//Asynchronous Transfer Mode
*varXMLHTTP
$
Panax NotoginsengfunctionRequestbyget (nproducttemp,ncountrytemp)
-{
the    if(window. XMLHttpRequest)
+    {
A         //Isie = false;
the XMLHTTP=   NewXMLHttpRequest ();
+    }
-    Else if(window. ActiveXObject)
$ {
$         //Isie = true;
-XMLHTTP=   NewActiveXObject ("Microsoft.XMLHTTP");
-    }
the
-    //Web page location.
Wuyi     varURL="http://www.baidu.com/";
theXmlhttp.open ("GET", URLs,true);
- Xmlhttp.onreadystatechange=Handleresponse;
Wu    //XMLHTTP. setRequestHeader ("Content-type", "text/html; Charset=utf-8")
-Xmlhttp.send (NULL);
About}
$
-functionHandleresponse ()
-{
-    if(Xmlhttp.readystate== 4 &&Xmlhttp.status== $)
A    {
+document.getElementById ("Div_rightbarbody"). InnerHTML=Xmlhttp.responsetext;
the XMLHTTP= NULL;
-    }
$}
the

Summarize:

Get is a request to fetch data to the server, and post is a request to submit data to the server
Get is to get information, not modify information, like database query function, data will not be modified
The parameters of the GET request are passed after the URL, the requested data is appended to the URL, the URL is separated by the%xx, the parameters are concatenated with the & number, and the XX in the letter is ASCII in 16 notation, if the data is in English letters/numbers, if it is a space , convert to +, and if it is Chinese/other characters, encrypt the string directly with BASE64.
The data for a get transfer has a size limit, because get is submitting data through a URL, so the amount of data that get can commit is directly related to the length of the URL, and different browsers have different limits on the length of the URL.
Get request data will be cached by the browser, the user name and password will appear in plaintext on the URL, others can find historical browsing records, the data is not very safe. On the server side, use Request.QueryString to get the data submitted by the Get method
The POST request is sent to the Web server as the actual content of the HTTP message, the data is placed within the HTML header, and the post does not restrict the submitted data. Post is safer than get, when the data is in Chinese or not sensitive data, then use GET, because use GET, parameters will be displayed in the address, for sensitive data and not Chinese characters of data, then use post
Post represents a request that may modify resources on the server, and the data submitted by post can only be obtained by using Request.Form on the server side.

Issues that are submitted using the Get method:

1. How to create a XMLHttpRequest object that can run in most browsers.
2. There is a cache problem with get requests
3. Chinese garbled problem

among them, the first question, in theXMLHttpRequest Object Explanation"has been resolved in the article;

For the second problem, the reason is:

A GET request accesses the cache every time, to see if there is a matching URL, and if so, returns the URL in the cache and, if not, makes a request to the server.

Solution:

1. Add a dynamic change parameter to the URL in order to each access a different URL, so that each time a new request is made to the server.

For the third problem, we first look at the cause of garbled:

XMLHTTP the data returned by default is Uft-8, if the client page is gb2312 or other encoding, it will produce garbled

Solution:

1. If the client is gb2312, specify the output stream encoding at the time of output

2. Utf-8 encoding is used on both the client and server side

3. Be sure to encode the parameters using the encodeURIComponent method

Questions submitted using the Post method:

1. Use the Post method to pass the parameter's usage :

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

parameters are sent with the Send method, such as send (data)., the server-side character set takes Request.setcharacterencoding ("UTF-8"); Do client HTML encoding with server-side request.setcharacterencoding ("UTF-8"); You need to use Request.form[data] when retrieving parameters from the server side.

2. For the request is the form of key-value to pass data, you can use the Post method, for complex parameters can be considered using JSON or XML to pass.

3. Note that the contents of the setting Content-type are application/x-www-form-urlencoded, which is set to ensure that the server knows that there are parameter variables in the entity.

4. Select the appropriate method to handle the response of the server.

The next article will introduce the Ajax asynchronous binding pseudo-static request data back to the state processing business.

b/S Mode (synchronous) Ajax Technology (asynchronous)