最基本的Ajax簡述

一個html頁面,向其中添加一個<script></script>以及頁面上一個按鈕，連個文字框，內容如下：

 

<script type="text/javascript" language="javascript">
        var xmlHttp = false;
        try
        {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e)
        {
            try
            {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e2)
            {
                xmlHttp = false;
            }
        }
        if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
            xmlHttp = new XMLHttpRequest();
        }
        /*以上經過多次的try...catch主要是不同的瀏覽器中建立XMLHttpRequest對象的方法不同，
            所以要通過"試"的方法找到適合瀏覽器的方法*/

        function callServer() {
            var name = document.getElementById("txtSend").value;
            var url = "Default.aspx?msg=" + escape(name);
            xmlHttp.open("GET", url, true);//true為非同步資料發送
            xmlHttp.onreadystatechange = showMessage;
            xmlHttp.send(null);
        }

        function showMessage() {
            if (xmlHttp.readyState == 4) {
                var response = xmlHttp.responseText;
                document.getElementById("txtShow").value = response;
            }
        }
    </script>

 

    ...

   <p>
        <input id="btnSubmit" type="button" value="Ajax按鈕" onclick="callServer()"/>
        <input id="txtSend" type="text" />
        <input id="txtShow" type="text" />
    </p>

 

 Default.aspx.cs

      ...

       Response.Write("Ajax發送過來的資料是:"+Request["msg"]);
        Response.End();

      ...

 

程式解釋：

   （1）、xmlHttp.open("GET",url,true)方法是XMLHttpRequest對象的方法，它有三個參數:

                   第一個參數表示通過什麼方式訪問url所指定的資源，主要有兩種"GET”和"POST”;

                   第二個參數表示所訪問的url地址;

                   第三個參數表示調用方式，true為非同步呼叫，false為同步調用;

            非同步呼叫是ajax的關鍵，open方法訪問url資源是，需要一定的時間，但系統並不會等待open方法執行完畢後再繼續向下執行。  也  就是說，當open方法在訪問url資源的時候，瀏覽器並不是一直處於“等待”狀態，使用者依然可以在瀏覽器上執行其他javascript程式。

 

  （2）、由於是非同步呼叫，所以使用者並不知道open方法什麼時候才能將url資源內容擷取完畢，所以對於非同步方法呼叫，通常使用觸發事件來通知使用者程式。

            onreadystatechange就是通知使用者open方法已經將url資源內容擷取完畢了的觸發事件；在此程式碼中，程式觸發的事件函數是showMessage()；

 

  （3）、在showMessage函數中，xmlHttp.readyState==4表示XMLHttpRequest對象當前的狀態，只有狀態為4時，才可以擷取到伺服器Response（應答）回來的內容。

 

   （4）、responseText是XMLHttpRequest對象的一個屬性，記錄著此次Web請求所反饋的常值內容，這裡簡單使用了responseText屬性。

         Ajax中常用的是responseXML屬性，要求url資源返回的是一個XML的文檔流結構，在網頁DOM中對XML文檔有多種預設的處理方式，javascript中也有用於XML處理的對象，可以方便程式的後期處理。