The difference between a GET request and a POST request in Ajax

Source: Internet
Author: User

Write it in front.

When we use Ajax, when we send data to the server, we can request the server using GET, or we can use post to request the server. So, when should we adopt the Get method, when should we use the Post method?

The difference between a GET request and a POST request

1. When a GET request is used, the parameter is displayed in the URL and the Post method is not displayed

2. Small amount of data sent using GET request, large amount of data sent by POST request

Example

HTML code for the page:

 
  

Difference:

GET request POST request
Client foot
This
Generation
Code
function Btn_get_click () {    var xmlHttp = window. XMLHttpRequest?         New XMLHttpRequest (): New ActiveXObject ("Microsoft.XMLHTTP");    var username = document.getElementById ("Txt_username"). Value;    var age = document.getElementById ("Txt_age"). Value;    Add parameters in order to access different URLs each time to avoid caching problems    Xmlhttp.open ("Get", "server.aspx?username=" + encodeuricomponent (username)        + " &age= "+ encodeuricomponent (age) +" &random= "+ math.random ());    Xmlhttp.onreadystatechange = function () {        if (xmlhttp.readystate = = 4 && Xmlhttp.status = =) {            documen T.getelementbyid ("Result"). InnerHTML = Xmlhttp.responsetext;        }    }    Send request, parameter is null    xmlhttp.send (null);}
function Btn_post_click () {    var xmlHttp = window. XMLHttpRequest?        New XMLHttpRequest (): New ActiveXObject ("Microsoft.XMLHTTP");    var username = document.getElementById ("Txt_username"). Value;    var age = document.getElementById ("Txt_age"). Value;                var data = "Username=" + encodeuricomponent (username)        + "&age=" + encodeuricomponent (age);    Don't worry about caching problems    Xmlhttp.open ("Post", "server.aspx", true);    Must be set, otherwise the server side cannot receive the parameter    xmlhttp.setrequestheader ("Content-type", "application/x-www-form-urlencoded");    Xmlhttp.onreadystatechange = function () {        if (xmlhttp.readystate = = 4 && Xmlhttp.status = =) {            docum Ent.getelementbyid ("Result"). InnerHTML = Xmlhttp.responsetext;        }    }    Send the request to data    xmlhttp.send;}

Difference:

1.get requests need to be aware of caching issues, post requests do not need to worry about this issue

2.post request must be set Content-type value to application/x-form-www-urlencoded

3. When sending a request, the Send function sends a NULL parameter because the GET request's parameters are in the URL, and the POST request uses the Send method, but it needs to give its argument

For the server.aspx that are requested in the client code, let's look at the code in Server.aspx.cs:

protected void Page_Load (object sender, EventArgs e) {    string username = string. Empty;    int age = 0;    if (Request.HttpMethod.ToUpper (). Equals ("GET"))    {        username = request.querystring["username"];        age = Int. Parse (request.querystring["age"]);    }    else    {        username = request.form["username"];        age = Int. Parse (request.form["age"]);    }    Response.Clear ();    Response.Write ("Name: '" + username + "' <br/> Age:" + ages + "<br/> time: '" + DateTime.Now.ToString () + "'");    Response.End ();}

Here, we find the difference between the GET request and the POST request on the server side:

When a client uses a GET request, the server side uses Request.QueryString to get the parameters, and when the client uses the POST request, the server side uses Request.Form to get the parameters.

With regard to server-side fetch data, we can also use a common way to get parameters that is request["username"], but there is a problem with this method, which we will then be speaking about.

Below, we use HttpWatch to see what the client sends and what it receives when the request is sent using GET and post.

Do not care about the time difference between get requests and post requests, because it is the Get button and the Post button that are pressed at different times.

Overview
GET request
POST request

As can be seen from the URL of the request, the GET request is taken with parameters, and the URL of the POST request is not.

Header
GET request
POST request

Because the same server is being accessed, the information obtained from the server is consistent. But the client sends a different message.

Header
GET request
POST request

As you can see from the cache, a GET request is cached after it is sent, and the POST request is never cached.

query String
GET request
post Request

Because the parameters of the GET request are in the URL, there is a value in the query string. The POST request does not have a.

POST Data
GET request
POST request

In post data, because the GET request string is included in the URL, there is no data in post.

Content (data obtained from the server)
GET request
POST request

The content obtained from the server is consistent.

Stream
GET request Sent to the server

get/ajaxweb/article7/server.aspx?username=%e5%bc%a0%e4%b8%89&age=33&random=0.34838340505348675 HTTP/1.1
Accept: */*
Accept-language:zh-cn
Referer:http://localhost/ajaxweb/article7/ajax.htm
Accept-encoding:gzip, deflate
user-agent:mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2; trident/4.0; mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1);. NET CLR 1.1.4322;. NET CLR 2.0.50727;. NET CLR 3.0.04506.648;. NET CLR 3.5.21022; infopath.2;. net4.0c;. NET4.0E)
Host:localhost
Connection:keep-alive

retrieved from server

http/1.1 OK
Date:sun, June 15:36:27 G MT
server:microsoft-iis/6.0
x-powered-by:asp.net
x-aspnet-version:4.0.30319
Cache-control:private
content-type:text/html; charset=utf-8
content-length:60

Pu name Name: ' Liao incrementally 笁 ' <br/> qian pinch satin:33<br/> ã Fall time: ' 2011-6-5 23:36:27 '

POST request

post/ajaxweb/article7/server.aspx http/1.1
Accept: */*
Accept-language sent to the server: ZH-CN
referer: http://localhost/ajaxweb/article7/ajax.htm
content-type:application/ x-www-form-urlencoded
Accept-encoding:gzip, deflate
user-agent:mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2; trident/4.0; mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1);. NET CLR 1.1.4322;. NET CLR 2.0.50727;. NET CLR 3.0.04506.648;. NET CLR 3.5.21022; infopath.2;. net4.0c;. net4.0e)
Host:localhost
content-length:34
connection:keep-alive
Cache-control:no-cache

username=%e5%bc%a0%e4%b8%89&age=33

Obtained from the server

http/1.1 OK
Date:sun, June 15:47:39 GMT
server:microsoft-iis/6.0
X-powered-by:asp.net
x-aspnet-version:4.0.30319
Cache-control:private
content-type:text/html; Charset=utf-8
Content-length:60

PU name Name: ' Liao incrementally 笁 ' <br/> qian pinch satin:33<br/> ã Fallen time: ' 2011-6-5 23:47:39 '

Compare the URL of the GET request with the parameter, the URL of the post request without parameters. The POST request is not cached.

Now, let's consider another question:

As we said just now, when the server accepts parameters, it can take a common method, namely: request["username"] to accept the parameters of the Get and post requests sent by this way, then we do a test, set the Content-type in the GET request, And the Send method also sends Username=zhangsan, let's see what value the server is returning? Modify the server code as follows:

protected void Page_Load (object sender, EventArgs e) {    string username = string. Empty;    int age = 0;    Username = request["username"];    age = Int. Parse (request["age"]);    Response.Clear ();    Response.Write ("Name: '" + username + "' <br/> Age:" + ages + "<br/> time: '" + DateTime.Now.ToString () + "'");    Response.End ();}

In the client, modify the Btn_get_click () method as follows:

Enter Zhang San directly as the value of the username parameter Xmlhttp.open ("Get", "server.aspx?username=" + encodeURIComponent ("Zhang San")    + "&age=" + encodeURIComponent (age) + "&random=" + math.random ());//Add content-type information to the GET request Xmlhttp.setrequestheader (" Content-type "," application/x-www-form-urlencoded ");//Send request with username=zhangsanxmlhttp.send (username =" Zhangsan ");

Test the code, and the result is "Zhang San".

Again, immediately after the code, we'll do another test, modify the POST request, add a username parameter to the URL of the open method, and the value is Zhangsan.

Xmlhttp.open ("Post", "Server.aspx?username=zhangsan", true);

At this point, let's run the project again, what is the result of the server return? At this point we find that the result is Zhangsan.

When we put parameters in both the URL and the data of the Send method while we were in the Get and POST request, why was the parameter value in the URL always obtained?

A: When using request, it iterates through the querystring,form,servervariable, and if it finds data that meets the requirements, it stops searching backwards. So, The username we get in the example above are actually username values in the URL.

When to use a GET request and when to use a POST request

The purpose of the GET request is to give the server some parameters to get the list from the server. For example: list.aspx?page=1, which means getting the first page of data

The purpose of a POST request is to send some parameters to the server, such as the contents of a form.

The following uses an instance to represent the difference between a GET request and a POST request when sending the same piece of data.

The difference between a GET request and a POST request in Ajax

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.