Get請求

寫在前面的話

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里,所以此處發送nullxmlHttp.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.對于中文亂碼問題,我們會再寫一篇文章來介紹這個問題.