Ajax學習 - kissazi2－IT工程師數位筆記本

文章出處

以前，當我們點擊了一個按鈕，向服務器請求數據的時候，通常會有這么一個流程。瀏覽器向服務器發送Http請求→服務器返回整個頁面→瀏覽器將原先的整個頁面替換成新的頁面。這樣子做當然沒有什么問題，但是比如在看土豆的視頻的時候，想看一下下方的評論，不過癮，想再看下一頁的評論，這時候瀏覽器會向服務器發請求，要是正在看視頻的時候整個頁面重新加載，視頻重加載一次，那簡直不可饒恕。所以就產生了Ajax這種技術，用來進行頁面的局部刷新，省的每次更新界面都得重新下載一個完整的界面。Ajax（Asynchronous JavaScript and XML，異步JavaScript和XML）是一種進行頁面局部異步刷新的技術。用AJAX向服務器發送請求和獲得服務器返回的數據并且更新到界面中，不是整個頁面刷新，而是在HTML頁面中使用JavaScript創建XMLHTTPRequest對象來向服務器發出請求以及獲得返回的數據，就像JavaScript版的WebClient一樣，在頁面中由XMLHTTPRequest來發出Http請求和獲得服務器的返回數據，這樣頁面就不會整個刷新了。

下面我們將用一個小例子來體驗一下Ajax的神奇。我們將會做一個向服務器獲取時間的小頁面，這個東西將通過XmlHTTPRequest向服務器發送請求。

瀏覽器端的Ajax請求代碼

<script type="text/javascript">
        function btnClick() {
             var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //創建XMLHTTP對象
            if (!xmlHttp) {                                        //判斷xmlHttp對象是否創建成功
                alert("創建xmlHttp對象異常!");
                return false;
            }
            xmlHttp.open("POST", "GetDate.ashx?ts=" + encodeURI("哈哈"), false); //準備向服務器的GetDate發出post請求
            //XMLHTTP默認（也推薦）不是同步請求的，也就是open方法并不等服務器響應數據才返回，而是監聽服務器
            //返回的數據，因此需要監聽onreadystatechange事件。
            xmlHttp.onreadystatechange = function () {
                if (xmlHttp.readyState == 4) {
                    if (xmlHttp.status == 200) {//如果狀態碼為200則是成功
                        alert(xmlHttp.responseText);//responseText是服務器返回的文本
                        document.getElementById("Text1").value = xmlHttp.responseText;
                    }
                    else {
                        alert("Ajax服務器錯誤");
                    }
                }
            }
            xmlHttp.send();
        }
    
    </script>

在這段代碼中，我們做了一下幾件事情：1、創建一個XmlHttpRequest對象用來處理Ajax請求。2、我們調用XmlHttpRequest.open()方法準備Ajax請求，傳進去的參數主要是選擇請求的方法和請求的URL。3、我們將XmlHttpRequest.onreadystatechange綁定上我們自己的處理函數，主要就是判斷返回的消息是否正確，如果正確，那么從返回的消息中提取我們需要的信息并綁定到指定的控件上。4、向服務器發起請求。

其實這個過程有點像數據庫的查詢（執行）過程。數據庫的查詢要經歷這么幾個步驟，首先建立數據庫的連接，通常是通過指定的數據庫連接字符串進行數據庫的匹配，再次就是進行查詢操作，最后操作完成后對查詢的結果進行處理。

服務器端代碼

我們在Vs2010中創建一個WebApplication，并創建一個GetDate.Ashx來處理客戶端的請求。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace testAjax
{
    /// <summary>
    /// GetDate 的摘要說明
    /// </summary>
    public class GetDate : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            string time = context.Request["ts"];
            context.Response.ContentType = "text/plain";
            context.Response.Write(DateTime.Now.ToString() + time);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

這個一般處理程序其實就做一件事情，就是將服務器上面的時間發送給客戶端。

補充說明：

1、前面我們定義了Ajax的同步請求，如果我們發送異步請求，那么在請求過程中javascript代碼會繼續執行，這時可以通過readyState屬性判斷請求的狀態（即上文xmlHttp.readyState==4處的代碼），當readyState = 4時，表示收到全部響應數據，屬性值的定義如下：

readyState值	描述
0	未初始化；尚未調用open()方法
1	啟動；尚未調用send()方法
2	已發送；但尚未收到響應
3	接收；已經收到部分響應數據
4	完成；收到全部響應數據