Asp.Net】教你一步一步學習Ajax（二）使用POST方法

上一篇學習了如何在Ajax中使用GET方法來進行直的傳遞，下面我們來學習另一種傳值方法：POST。

關於GET和POST兩種方法的區別有一下幾種：

1.使用GET方法安全性很低，傳遞的值是通過地址來傳遞的，當然在Ajax中也不會出現地址。值得注意的是，瀏覽器地址是不支援中文的，如果傳遞的值是中文的話會出現亂碼，需要進行轉碼後才能正常傳值，而POST無需考慮這些問題。

2.GET方法只能用於一些小資料量的傳值，不能大於2KB；而POST方法的話理論上是沒有最大值限制的，這需要看伺服器的情況了。

使用POST也有兩種方式來傳遞值，一種是通過標頭檔來傳遞，一種是直接用send來發送。

一。通過標頭檔來進行傳值：

View Code

 1  var xmlhttprequest = new ActiveXObject("Microsoft.XMLHTTP");
 2         function getData() //通過標頭檔來傳值
 3         {
 4             xmlhttprequest.open("POST", "Handler1.ashx", true);
 5             xmlhttprequest.onreadystatechange = setValue;
 6             xmlhttprequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=gb2312");
 7             xmlhttprequest.setRequestHeader("User", document.getElementById("select").value);
 8             xmlhttprequest.send(null);
 9         }
10         function setValue() {
11             if (xmlhttprequest.ReadyState == 4 && xmlhttprequest.Status == 200) {
12                 document.getElementById("TextArea1").value = xmlhttprequest.responseText;//擷取傳過來的文本資料不是亂碼
13                 document.getElementById("TextArea2").value += xmlhttprequest.getResponseHeader("Detail");//擷取傳過來的標頭檔，為中文時是亂碼
14             }
15         }

後台傳資料也分為兩種，一個是通過標頭檔；一種就是普通的通過xmlhttprequest通訊來傳遞。

1.通過標頭檔傳遞：context.Response.AddHeader("Detail", ds.Tables[0].Rows[0][0].ToString());也就是相當於添加Detail屬性，給該屬性賦值。

擷取值也就是跟擷取屬性值類似的：string Result=xmlhttprequest.getResponseHeader("Detail");

2.普通通訊傳遞： context.Response.Write(ds.Tables[0].Rows[0][0].ToString());直接寫入就行了，當然，在寫入的時候可以根據需求寫成json格式或者XML格式。

擷取值為：string Result=xmlhttprequest.responseText;

二。通過send來傳遞值：

View Code

 1 function getDataBysend()//通過send來傳值
 2          {
 3             XmlhttpRequest.onreadystatechange = setDataBysend;
 4             XmlhttpRequest.open("POST", "Handler2.ashx", true);
 5             XmlhttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
 6             XmlhttpRequest.send("User=Test1&&index=2");
 7         }
 8         function setDataBysend() {
 9             if (XmlhttpRequest.readystate == 4 && XmlhttpRequest.status == 200) {
10                 document.getElementById("Data").value = XmlhttpRequest.responseText;
11             }
12         }

使用send時，多個參數值之間用&&來隔開，在後台擷取參數值為： 

string User = context.Request.Params["User"];
 int index=Convert.ToInt32(context.Request.Params["index"]);

後台發送資料與標頭檔一樣，在此不再重複。

文章寫得不好敬請見諒！

本人在使用Ajax時經常遇到問題，比如未能擷取到資料，介面操作無效果等。通過檢查代碼很難發現是哪出了問題，再者javascript代碼不能進行斷點調試。然而我使用的瀏覽器為第三方的，後來我使用了IE，因為IE瀏覽器有報錯的功能。如果介面出現有錯誤，在瀏覽器左下角有和警告圖示，雙擊即可知道是哪出了問題，慢慢觀察就可以解決問題了。由於以上javascript代碼是不能智能出現的，所以我懷疑大小寫可能會有問題，於是一個個嘗試，至少在我的環境下是能夠成功的，不知道大小寫是不是真的可以不區分。在我看來，javascript因為是指令碼語言，應該是沒關係的吧。若讀者知道的話，請告訴我一聲。

點此進入下載源碼。