寫在前面的話
我們在使用Ajax時,當我們向伺服器發送資料時,我們可以採用Get方式請求伺服器,也可以使用Post方式請求伺服器.那麼,我們什麼時候該採用Get方式,什麼時候該採用Post方式呢?
Get請求和Post請求的區別
1.使用Get請求時,參數在URL中顯示,而使用Post方式,則不會顯示出來
2.使用Get請求發送資料量小,Post請求發送資料量大
例子
頁面的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);} |
區別:
1.get請求需注意緩衝問題,post請求不需擔心這個問題
2.post請求必須設定Content-Type值為application/x-form-www-urlencoded
3.發送請求時,因為get請求的參數都在url裡,所以send函數發送的參數為null,而post請求在使用send方法時,卻需賦予其參數
對於用戶端代碼中都請求的server.aspx,我們來看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("姓名:'" + 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按鈕.
從請求的url可以看出,get請求是帶著參數的,post請求的url則不帶.
因為訪問的是同一個伺服器,所以從伺服器擷取的資訊都是一致的.但是用戶端發送的卻不一樣了.
從cache可以看出,get請求在發送後,即被緩衝,而post請求時 never cached.
|
Query String |
Get請求 |
|
Post請求 |
|
因為get請求的參數是在url中的,所以Query String中是有值的.而post請求則沒有.
在Post Data裡,因為get請求的字串是在url中附帶的,所以Post Data中無資料.
|
Content(從伺服器擷取的資料) |
Get請求 |
|
Post請求 |
|
從伺服器擷取的內容都是一致的.
|
|
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=zhangsanxmlHttp.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請求在發送同一段資料時的區別.