Ajax中Get和Post兩種傳值方式的異同

當我們不通過重新加載頁面，用Ajax訪問服務器的時候，有兩個選擇可以將請求信息傳送到服務器上。這兩個選擇分別是GET和POST。

在把請求信息發送到服務器上以加載新的頁面時，這兩個選擇有兩個不同之處。第一個區別是你是請求了信息的一小部分而不是整個頁面。第二個區別也是最明顯的區別是由於Ajax請求不會出現在地址欄中，因此當發送請求時，在訪問者的屏幕上是看不出什么異同的。使用GET生成調用不會暴露域和它們的值，使用POST也不會暴露。因此，我們要怎樣在這兩者之間作出選擇呢?

初學者可能犯的一個錯誤是對於大多數的調用都使用GET命令，僅僅因為這一命令相對而言更容易編寫。GET與POST調用之間最顯著的差異是當發出加載新頁面請求時，GET調用對於同樣數量的數據有着相同的限制。唯一的區別是你處理的少量的Ajax請求數據，而你並不想通過這種長度運行的限制來完成頁面的加載。初學者可能會在少數情況下，如他們確實需要傳送更多信息時，使用POST。

當我們有大量數據要傳送時最好的辦法是一次發出多個只傳遞少量信息的Ajax調用時。如果你正用一個Ajax調用發送大量數據，那么最好是結束這種做法，因為這樣做並不能節約時間。

因此，需要傳送大量數據能成為我們在GET和POST之間猶豫不決的理由嗎?這兩個方法都是為不同的目的而設計的，兩者的不同也在於其使用目的。這一說法不僅適用於GET和POST的使用，也適用於其他的方法。

GET的目的就如同其名字一樣是用於獲取信息的。它旨在顯示出頁面上你要閱讀的信息。瀏覽器會緩沖GET請求的執行結果，如果同樣的GET請求再次發出，瀏覽器就會顯示緩沖的結果而不是重新運行整個請求。這一流程不同於瀏覽器的處理過程，但是它是有意設計成這樣以使GET調用更有效率。GET調用會檢索要顯示在頁面中的數據，數據不會在服務器上被更改，因此重新請求相同數據的時候會得到相同的結果。

POST方法應該用於你需要更新服務器信息的地方。如某調用要更改保存在服務器上的數據，而從兩個同樣的POST調用返回的結果或許會完全不同，因為第二個POST調用的值與第一個的值不相同，這是由於第一個調用已經更新了其中一些值。POST調用通常會從服務器上獲取響應而不是保持前一個響應的緩沖。

因此，不要用數據的量來決定是要選擇GET還是POST，而應該按照目的在兩者間作出選擇。如果調用是要檢索服務器上的數據則使用GET。如果要檢索的值會隨時間和更新進程的改變而改變則要在GET調用中添加一個當前時間參數，這樣后面的調用才不會使用先前的不正確的緩沖。如果調用是向服務器上發送任意數據，就可以使用POST。

事實上，我們不應該不僅僅只將這個標准作為選擇怎樣使用GET和POST調用的標准，在處理頁面處理形式的時候也可以將它作為取舍這兩個調用的標准。

Get 與 Post 的區別

Ajax中我們經常用到get和post請求.那么什么時候用get請求,什么時候用post方式請求呢? 在做回答前我們首先要了解get和post的區別。

1. get是把參數數據隊列加到提交表單的ACTION屬性所指的URL中，值和表單內各個字段一一對應，在URL中可以看到。post是通過HTTP post機制，將表單內各個字段與其內容放置在HTML HEADER內一起傳送到ACTION屬性所指的URL地址。用戶看不到這個過程。
2. 對於get方式，服務器端用Request.QueryString獲取變量的值，對於post方式，服務器端用Request.Form獲取提交的數據。兩種方式的參數都可以用Request來獲得。
3. get傳送的數據量較小，不能大於2KB。post傳送的數據量較大，一般被默認為不受限制。但理論上，因服務器的不同而異。
4. get安全性非常低，post安全性較高。
5. <form method="get" action="a.asp?b=b">跟<form method="get" action="a.asp">是一樣的，也就是說，method為get時action頁面后邊帶的參數列表會被忽視；而<form method="post" action="a.asp?b=b">跟<form method="post" action="a.asp">是不一樣的。

另外 Get請求有如下特性：它會將數據添加到URL中，通過這種方式傳遞到服務器，通常利用一個問號？代表URL地址的結尾與數據參數的開端，后面的參數每一個數據參數以“名稱=值”的形式出現，參數與參數之間利用一個連接符&來區分。 Post請求有如下特性：數據是放在HTTP主體中的，其組織方式不只一種，有&連接方式，也有分割符方式，可隱藏參數，傳遞大批數據，比較方便。

通過以上的說明，現在我們大致了解了什么時候用get什么時候用post方式了吧，對!當我們在提交表單的時候我們通常用post方式，當我們要傳送一個較大的數據文件時，需要用post。當傳遞的值只需用參數方式(這個值不大於2KB)的時候，用get方式即可。

現在我們再看看通過URL發送請求時，get方式和post方式的區別。用下面的例子可以很容易的看到同樣的數據通過GET和POST來發送的區別，發送的數據是 username=張三。

GET 方式，瀏覽器鍵入 http://localhost?username=張三

1	GET /?username=%E5%BC%A0%E4%B8%89 HTTP/1.1

2	Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, */*

3	Accept-Language: zh-cn

4	Accept-Encoding: gzip, deflate

5	User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322)

6	Host: localhost

7	Connection: Keep-Alive

POST 方式：

01	POST / HTTP/1.1

02	Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, */*

03	Accept-Language: zh-cn

04	Content-Type: application/x-www-form-urlencoded

05	Accept-Encoding: gzip, deflate

06	User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322)

07	Host: localhost

08	Content-Length: 28

09	Connection: Keep-Alive

10	username=%E5%BC%A0%E4%B8%89

區別就是一個在 URL 請求里面附帶了表單參數和值, 一個是在 HTTP 請求的消息實體中。

比較一下上面的兩段文字, 我們會發現 GET 方式把表單內容放在前面的請求頭中, 而 POST 則把這些內容放在請求的主體中了, 同時 POST 中把請求的 Content-Type 頭設置為 application/x-www-form-urlencoded. 而發送的正文都是一樣的, 可以這樣來構造一個表單提交正文: encodeURIComponent(arg1)=encodeURIComponent(value1)&encodeURIComponent(arg2)=encodeURIComponent(value2)&.....

注: encodeURIComponent 返回一個包含了 charstring 內容的新的 String 對象（Unicode 格式）， 所有空格、標點、重音符號以及其他非 ASCII 字符都用 %xx 編碼代替，其中 xx 等於表示該字符的十六進制數。 例如，空格返回的是 "%20" 。 字符的值大於 255 的用 %uxxxx 格式存儲。參見 JavaScript 的 encodeURIComponent() 方法.

在了解了上面的內容后我們現在用ajax的XMLHttpRequest對象向服務器分別用GET和POST方式發送一些數據。

GET 方式

1	var postContent ="name=" + encodeURIComponent("xiaocheng") + "&email="

2	+ encodeURIComponent("[e-mail]");

3	xmlhttp.open("GET", "somepage" + "?" + postContent, true);

4	xmlhttp.send(null);

POST 方式

1	var postContent ="name=" + encodeURIComponent("xiaocheng") + "&email="

2	+ encodeURIComponent("[e-mail]");

3	xmlhttp.open("POST", "somepage", true);

4	xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

5	//xmlhttp.setRequestHeader("Content-Type", "text/xml"); //如果發送的是一個xml文件

6	xmlhttp.send(postContent);

get方式

get方式是最為常見的，一般實現用戶登錄，修改密碼用的都是get方式。

新建一html文檔，body標簽內容如下：

1	<body style="text-align: center">

2	<input type ="text" id ="txt" />

3

<br />

4	<input type ="button" value ="get方式回調"  onclick ="get()" />

5

</body>

js代碼文件

01	var xhr=getXHR();//獲得xmlhttprequest對象,getXHR函數的具體實現這里不給出，因為非常簡單

02	function get()

03

{

04	var str=document.getElementById ("txt").value;

05	var url="PageAjax.aspx?argument="+escape(str);//編碼str

06	xhr.open("get",url,true);

07	xhr.onreadystatechange=renew;

08	xhr.send(null);//不發送任何內容,因為url中包含了參數數據

09

}

10	function renew()

11

{

12	if (xhr.readystate==4)

13

{

14	if (xhr.status==200)

15

{

16	var response=xhr.responsetext;

17	var res=response.split('\n');

18	alert(res[0]);

19

}

20

}

21

}

服務器端PageAjax.aspx.cs文件代碼如下

1	protected void Page_Load(object sender, EventArgs e)

2

{

3	if (Request["argument"] != null)

4

{

5	string res ="成功實現post方式回調！傳入的參數是："+ Request["argument"].ToString()+"\n";

6	Response.Write(res);

7

}

8

}

到此一個簡單的get方式回調完成。

post方式

由於get方式每次都要傳入參數到url地址上，像用戶名，密碼之類的參數由於字符比較少，完全可以考慮這中傳遞方式，但是當有很多參數、並且參數的字符串值很長時（比如博客，你不可能把整篇博客的內容都以參數的方式傳遞到url上），這種方式就不好了，由於有了post方式的出現。

新建一html文檔，body標簽內容如下：

1	<textarea id="TextArea1" style="width: 323px; height: 76px"></textarea>

2

<br />

3	<input id="Button1" type="button" value="post方式回調" onclick="post()"/>

js代碼文件

01	var xhr=getXHR();//獲得xmlhttprequest對象,getXHR函數的具體實現這里不給出，因為非常簡單

02	function post()

03

{

04	var str=document.getElementById ("TextArea1").value;

05	var poststr="arg="+str;

06	var url="PageAjax.aspx?time="+new Date();//加一時間戳,放置發回的數據是服務器緩存的數據

07	xhr.open("post",url,true);

08	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //告訴服務器發送的是文本

09	//xhr.setRequestHeader("Content-Type", "text/xml"); //告訴服務器發送的是一個xml文件

10	xhr.onreadystatechange=update;

11	xhr.send(poststr);//發送poststr數據到服務器

12

}

13	function update()

14

{

15	if (xhr.readystate==4)

16

{

17	if (xhr.status==200)

18

{

19	var response=xhr.responsetext;

20	var res=response.split('\n');

21	alert(res[0]);

22

}

23

}

24

}

服務器端PageAjax.aspx.cs文件代碼如下

1	protected void Page_Load(object sender, EventArgs e)

2

{

3	if (Request["arg"] != null)

4

{

5	string res = "成功實現get方式回調！傳入的參數是：" + Request["arg"].ToString() + "\n";

6	Response.Write(res);

7

}

8

}

到此一個簡單的post方式回調完成。

Get 與 Post 的代碼編寫上的區別

view source

print ?

01

.......

02	function createQueryString(){

03	var firstName = document.getElementById("firstName").value;

04	var secName = document.getElementById("secName").value;

05

06	var querystring="firstName="+firstName+"&secName="+secName;

07

}

08

09

10

//GET方式

11	function doRequestUsingGET(){

12	createXMLHttpRequest();

13	var queryString = "test.php?";

14	queryString= queryString + createQueryString()+"&timstamp="+newDate().getTime();

15	Ajax.onreadystatechange=handleStateChange;

16	Ajax.open("GET",queryString,true);

17	Ajax.send(null);

18

19

}

20

21

//POST方式

22	function doRequestUsingPOST(){

23	createXMLHttpRequest();

24

25	/* 注意以下代碼與GET方式的區別 */

26	var url= "test.php?timstamp="+new Date().getTime();

27	// POST 需要定義發送的字符串

28	var queryString=createQueryString();

29	Ajax.open("POST",url,true);

30	Ajax.onreadystatechange=handleStateChange;

31	// POST 需要設置請求頭部

32	Ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

33	// 參數不為 null

34	Ajax.send(queryString);

35

36

}

37

38	function handleStateChange(){

39	if(Ajax.readyState==4){

40	if(Ajax.status==200){ .......}   //成功數據其它數據

41

}

42

43

}

44

......