Ajax中請求方式（GET/POST）之POST方式

 

本人最近工作不太忙抽點時間簡單學一下Ajax，特此借鑒前輩經驗。

 

文章來源：http://www.cnblogs.com/oneword/archive/2011/06/04/2072593.html

寫在前面的話:

XMLHttpRequest對象的open方法的第一個參數為request-type,取值可以為get或post.本篇介紹post請求.

使用post方式時,瀏覽器會把各表單中欄位元素及其資料作為Http訊息的實體內容發送給Web伺服器.

使用post方式時,要注意設定Content-Type的內容為application/x-www-form-urlencoded,設定此內容是為了確保伺服器知道實體中有參數變數.

使用post方式時,參數是隨著send方法發送出去的,如send(data).

使用post方式時,伺服器端擷取參數時,需要使用Request.Form[data].

例子

用戶端HTML代碼不變,js代碼如下:

function btn_click() {    //擷取參數    var username = document.getElementById("txt_username").value;    var age = document.getElementById("txt_age").value;    //設定字串參數,並進行編碼    var args = "username=" + encodeURIComponent(username) + "&age=" + encodeURIComponent(age);    //建立XMLHttpRequest對象    var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");    //配置串連及方式    //使用post方式不用擔心緩衝問題    xmlHttp.open("post", "post.aspx", true);    //設定Content-Type類型為aapplication/x-www-form-urlencoded,以告知伺服器實體中有參數    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;        }    }    //發送參數    xmlHttp.send(args);} 

伺服器端代碼:

protected void Page_Load(object sender, EventArgs e){    Response.Clear();    //使用Request.Form來擷取資料    string username = Request.Form["username"];    int age = int.Parse(Request.Form["age"]);    Response.Write("姓名:'" + username + "'<br/>年齡:" + age + "<br/>時間:'" + DateTime.Now.ToString() + "'");    Response.End();}

現在,我們仍然輸入張三,30這兩條資料,然後工具 + 生產力檢查下,看到底發送了什麼.

OverView:

發送的HTTP Header:

擷取的HTTP Header

緩衝:(此處可以看出,post請求是不會被換緩衝的)

Post的內容:(在get請求時,資料是通過url發送的)

小結:

本片介紹了post是如何使用的.隨後的文章,我們會對get請求與post請求做個比較,究竟什麼時候適合get請求,什麼時候適合post請求呢.

 

本人最近工作不太忙抽點時間簡單學一下Ajax，特此借鑒前輩經驗。

 

文章來源：http://www.cnblogs.com/oneword/archive/2011/06/04/2072593.html

寫在前面的話:

XMLHttpRequest對象的open方法的第一個參數為request-type,取值可以為get或post.本篇介紹post請求.

使用post方式時,瀏覽器會把各表單中欄位元素及其資料作為Http訊息的實體內容發送給Web伺服器.

使用post方式時,要注意設定Content-Type的內容為application/x-www-form-urlencoded,設定此內容是為了確保伺服器知道實體中有參數變數.

使用post方式時,參數是隨著send方法發送出去的,如send(data).

使用post方式時,伺服器端擷取參數時,需要使用Request.Form[data].

例子

用戶端HTML代碼不變,js代碼如下:

function btn_click() {    //擷取參數    var username = document.getElementById("txt_username").value;    var age = document.getElementById("txt_age").value;    //設定字串參數,並進行編碼    var args = "username=" + encodeURIComponent(username) + "&age=" + encodeURIComponent(age);    //建立XMLHttpRequest對象    var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");    //配置串連及方式    //使用post方式不用擔心緩衝問題    xmlHttp.open("post", "post.aspx", true);    //設定Content-Type類型為aapplication/x-www-form-urlencoded,以告知伺服器實體中有參數    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;        }    }    //發送參數    xmlHttp.send(args);} 

伺服器端代碼:

protected void Page_Load(object sender, EventArgs e){    Response.Clear();    //使用Request.Form來擷取資料    string username = Request.Form["username"];    int age = int.Parse(Request.Form["age"]);    Response.Write("姓名:'" + username + "'<br/>年齡:" + age + "<br/>時間:'" + DateTime.Now.ToString() + "'");    Response.End();}

現在,我們仍然輸入張三,30這兩條資料,然後工具 + 生產力檢查下,看到底發送了什麼.

OverView:

發送的HTTP Header:

擷取的HTTP Header

緩衝:(此處可以看出,post請求是不會被換緩衝的)

Post的內容:(在get請求時,資料是通過url發送的)

小結:

本片介紹了post是如何使用的.隨後的文章,我們會對get請求與post請求做個比較,究竟什麼時候適合get請求,什麼時候適合post請求呢.