Ajax中Get請求與Post請求的區別

時間  2019-12-13
標籤 ajax 請求 post 區別 欄目 Ajax 简体版
原文   原文鏈接

Get請求和Post請求的區別

1.使用Get請求時,參數在URL中顯示,而使用Post方式,則不會顯示出來css

2.使用Get請求發送數據量小,Post請求發送數據量大html

例子

頁面的HTML代碼:緩存

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        *
        {
            margin:8px;
        }
    </style>
</head>
<body>
    <label for="txt_username">
        姓名:</label>
    <input type="text" id="txt_username" />
    <br />
    <label for="txt_age">
        年齡:</label>
    <input type="text" id="txt_age" />
    <br />
    <input type="button" value="GET" id="btn_get" onclick="btn_get_click();" />
    <input type="button" value="POST" id="btn_post" onclick="btn_post_click();" />
    <div id="result">
    </div>
</body>
</html>

區別:服務器

  Get請求 Post請求
客戶端腳
本
代
碼		 
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;

    //添加參數,以求每次訪問不一樣的url,以免緩存問題
    xmlHttp.open("get", "Server.aspx?username=" + encodeURIComponent(username)
        + "&age=" + encodeURIComponent(age) + "&random=" + Math.random());

    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            document.getElementById("result").innerHTML = xmlHttp.responseText;
        }
    }

    //發送請求,參數爲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);

    //不用擔憂緩存問題
    xmlHttp.open("post", "Server.aspx", true);

    //必須設置,不然服務器端收不到參數
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            document.getElementById("result").innerHTML = xmlHttp.responseText;
        }
    }

    //發送請求,要data數據
    xmlHttp.send(data);
}

區別:app

1.get請求需注意緩存問題,post請求不需擔憂這個問題dom

2.post請求必須設置Content-Type值爲application/x-form-www-urlencodedide

3.發送請求時,由於get請求的參數都在url裏,因此send函數發送的參數爲null,而post請求在使用send方法時,卻需賦予其參數函數

對於客戶端代碼中都請求的server.aspx,咱們來看server.aspx.cs中的代碼:post

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("姓名:'" + username + "'<br/>年齡:" + age + "<br/>時間:'" + DateTime.Now.ToString() + "'");

    Response.End();
}

此處,咱們發現了get請求和post請求在服務器端的區別:測試

在客戶端使用get請求時,服務器端使用Request.QueryString來獲取參數,而客戶端使用post請求時,服務器端使用Request.Form來獲取參數.

關於服務器端獲取數據,咱們還可使用一個通用的獲取參數的方式即Request["username"],可是此方法存在一個問題,咱們隨後來說.

下面,咱們使用HttpWatch來看下,當使用get和post方式發送請求時,客戶端究竟發送了什麼,收到了什麼.

對於get請求和post請求中的時間差,請不要在乎,由於是在不一樣時間按下的get按鈕和post按鈕.

  OverView
Get請求 image
Post請求 image

從請求的url能夠看出,get請求是帶着參數的,post請求的url則不帶.

  Header
Get請求 image
Post請求 image

由於訪問的是同一個服務器,因此從服務器獲取的信息都是一致的.可是客戶端發送的卻不同了.

  Header
Get請求 image
Post請求 image

從cache能夠看出,get請求在發送後,即被緩存,而post請求時 never cached.

  Query String
Get請求 image
Post請求 image

由於get請求的參數是在url中的,因此Query String中是有值的.而post請求則沒有.

  POST Data
Get請求 image
Post請求 image

在Post Data裏,由於get請求的字符串是在url中附帶的,因此Post Data中無數據.

  Content(從服務器獲取的數據)
Get請求 image
Post請求 image

從服務器獲取的內容都是一致的.

    Stream
Get請求 發送給服務器的

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
從服務器獲取的

HTTP/1.1 200 OK
Date: Sun, 05 Jun 2011 15:36:27 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

濮撳悕:'寮犱笁'<br/>騫撮緞:33<br/>鏃墮棿:'2011-6-5 23:36:27'
Post請求 發送給服務器的

POST /AjaxWeb/Article7/Server.aspx HTTP/1.1
Accept: */*
Accept-Language: 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
從服務器獲取的

HTTP/1.1 200 OK
Date: Sun, 05 Jun 2011 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

濮撳悕:'寮犱笁'<br/>騫撮緞:33<br/>鏃墮棿:'2011-6-5 23:47:39'

比較一下,get請求的url帶參數,post請求的url不帶參數.post請求是不會被緩存的.

如今,咱們來思考另外一個問題:

剛纔咱們說過,服務器在接受參數時,能夠採用一個通用的方法,即:Request["username"]來接受參數此方式能夠接受get和post請求發送的參數,那麼,咱們作個測試,在get請求中設置Content-Type,而且send方法中也發送了username=zhangsan,咱們看看服務器到底是返回什麼值呢?修改服務器代碼以下:

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("姓名:'" + username + "'<br/>年齡:" + age + "<br/>時間:'" + DateTime.Now.ToString() + "'");

    Response.End();
}

客戶端中,修改btn_get_click()方法以下:

//直接輸入張三做爲username參數的值
xmlHttp.open("get", "Server.aspx?username=" + encodeURIComponent("張三")
    + "&age=" + encodeURIComponent(age) + "&random=" + Math.random());

//在get請求中添加Content-Type信息
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

...

//發送請求,並附帶username=zhangsan
xmlHttp.send(username = "zhangsan");

測試代碼,結果輸出的是"張三".

一樣,緊接上面的代碼,咱們再來作另外一個測試,修改post請求,給open方法的url加一個username參數,值爲zhangsan.

xmlHttp.open("post", "Server.aspx?username=zhangsan", true);

此時,咱們再來運行項目,服務器返回的結果是什麼呢?此時咱們發現出現的結果是zhangsan.

當咱們在get和post請求時,同時在url中、send方法的data中都放置了參數,爲何獲取的老是url中的參數值呢?

答:在使用Request時,其會從QueryString,Form,ServerVariable中遍歷一番,若是發現符合要求的數據,那麼就會中止向後搜尋.因此,咱們上例中獲取的username實際上都是url中的username值.

什麼時候使用Get請求,什麼時候使用Post請求

Get請求的目的是給予服務器一些參數,以便從服務器獲取列表.例如:list.aspx?page=1,表示獲取第一頁的數據

Post請求的目的是向服務器發送一些參數,例如form中的內容.

下面使用實例來表示Get請求和Post請求在發送同一段數據時的區別.

 

轉摘：http://www.cnblogs.com/oneword/archive/2011/06/06/2073533.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程