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

 

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

文章來源：http://www.cnblogs.com/oneword/archive/2011/06/04/2072585.html寫在前面的話

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

get請求的目的,主要是為了擷取資料.雖然get請求可以傳遞資料,但傳遞資料的目的是為了告訴伺服器,給我們什麼內容.

使用get請求時,參數都是隨url進行傳遞的.

使用get請求時,容易被緩衝,需注意緩衝問題.

使用get請求時,伺服器端請使用Request.QueryString[data]來擷取資料.

發現的問題

我們在《完整的Ajax執行個體》一文中使用的就是get請求,當時遇到以下問題:

1. 如何建立在大部分瀏覽器中都能啟動並執行XMLHttpRequest對象.
2. 使用get請求時存在緩衝問題
3. 中文亂碼問題

其中,第一個問題,在《XMLHttpRequest對象》一文中已經解決;

對於第二個問題,產生的原因是:

get請求會每次訪問緩衝,看其中是否有匹配的url,如果有,則返回緩衝中的url,如果沒有,則向伺服器發出請求.

解決方案:

1.在url上加個動態變化參數,以求每次訪問的是不同的url,這樣每次都會向伺服器發出新的請求.

對於第三個問題,我們首先來看下產生亂碼的原因:

xmlHttp返回的資料預設是uft-8,如果用戶端頁面是gb2312或其他編碼,就會產生亂碼

解決方案:

1.若用戶端是gb2312,則在輸出時,指定輸出資料流編碼

2.用戶端和伺服器端都使用utf-8編碼

3.務必使用encodeURIComponent方法對參數進行編碼

注意看例子:

例子

頁面HTML檔案沒有變化,變化的知識js代碼,代碼如下:

<script type="text/javascript">    function btn_click() {       //建立XMLHttpRequest對象        var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");       //擷取值        var username = document.getElementById("txt_username").value;       var age = document.getElementById("txt_age").value;       //配置XMLHttpRequest對象        //使用encodeURIComponent方法,對擷取的參數進行編碼       //添加參數,以求每次訪問不同的url,以避免緩衝問題        xmlHttp.open("get", "Get.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;            }       }        //發送請求,因為參數都在URL裡,所以此處發送null        xmlHttp.send(null);    }</script>

伺服器端:

protected void Page_Load(object sender, EventArgs e){    Response.Clear();    string username = Request.QueryString["username"];    string age = Request.QueryString["age"];    Response.Write("姓名:'" + username + "'<br/>年齡:" + age + "<br/>時間:'" + DateTime.Now.ToString() + "'");    Response.End();}

運行程式,我們發現已經使用漢字也不會出現亂碼了,現在我們使用工具來看一下我們此次訪問產生了哪些頭資訊:

我們同時也看一下擷取了哪些資訊?

我們再來看緩衝中的資訊:

Query String資訊

伺服器傳輸過來的內容:

注意:

1.要注意避免緩衝的問題,而使用動態url參數是個不錯的選擇.

2.使用open發出get請求時,伺服器端是採用Request.QueryString的方式擷取參數的.

3.對於中文亂碼問題,我們會再寫一篇文章來介紹這個問題.

 

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

文章來源：http://www.cnblogs.com/oneword/archive/2011/06/04/2072585.html寫在前面的話

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

get請求的目的,主要是為了擷取資料.雖然get請求可以傳遞資料,但傳遞資料的目的是為了告訴伺服器,給我們什麼內容.

使用get請求時,參數都是隨url進行傳遞的.

使用get請求時,容易被緩衝,需注意緩衝問題.

使用get請求時,伺服器端請使用Request.QueryString[data]來擷取資料.

發現的問題

我們在《完整的Ajax執行個體》一文中使用的就是get請求,當時遇到以下問題:

1. 如何建立在大部分瀏覽器中都能啟動並執行XMLHttpRequest對象.
2. 使用get請求時存在緩衝問題
3. 中文亂碼問題

其中,第一個問題,在《XMLHttpRequest對象》一文中已經解決;

對於第二個問題,產生的原因是:

get請求會每次訪問緩衝,看其中是否有匹配的url,如果有,則返回緩衝中的url,如果沒有,則向伺服器發出請求.

解決方案:

1.在url上加個動態變化參數,以求每次訪問的是不同的url,這樣每次都會向伺服器發出新的請求.

對於第三個問題,我們首先來看下產生亂碼的原因:

xmlHttp返回的資料預設是uft-8,如果用戶端頁面是gb2312或其他編碼,就會產生亂碼

解決方案:

1.若用戶端是gb2312,則在輸出時,指定輸出資料流編碼

2.用戶端和伺服器端都使用utf-8編碼

3.務必使用encodeURIComponent方法對參數進行編碼

注意看例子:

例子

頁面HTML檔案沒有變化,變化的知識js代碼,代碼如下:

<script type="text/javascript">    function btn_click() {       //建立XMLHttpRequest對象        var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");       //擷取值        var username = document.getElementById("txt_username").value;       var age = document.getElementById("txt_age").value;       //配置XMLHttpRequest對象        //使用encodeURIComponent方法,對擷取的參數進行編碼       //添加參數,以求每次訪問不同的url,以避免緩衝問題        xmlHttp.open("get", "Get.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;            }       }        //發送請求,因為參數都在URL裡,所以此處發送null        xmlHttp.send(null);    }</script>

伺服器端:

protected void Page_Load(object sender, EventArgs e){    Response.Clear();    string username = Request.QueryString["username"];    string age = Request.QueryString["age"];    Response.Write("姓名:'" + username + "'<br/>年齡:" + age + "<br/>時間:'" + DateTime.Now.ToString() + "'");    Response.End();}

運行程式,我們發現已經使用漢字也不會出現亂碼了,現在我們使用工具來看一下我們此次訪問產生了哪些頭資訊:

我們同時也看一下擷取了哪些資訊?

我們再來看緩衝中的資訊:

Query String資訊

伺服器傳輸過來的內容:

注意:

1.要注意避免緩衝的問題,而使用動態url參數是個不錯的選擇.

2.使用open發出get請求時,伺服器端是採用Request.QueryString的方式擷取參數的.

3.對於中文亂碼問題,我們會再寫一篇文章來介紹這個問題.