一個簡單的Ajax請求例子

Web開發者發表於2011-12-24

　　Ajax不是一種新的程式語言，而是一種用於建立更好更快以及互動性更強的Web應用程式的技術。通過Ajax，您可以使用 JavaScript的XMLHttpRequest物件來直接與伺服器進行通訊。您可以在不過載頁面的情況與 Web 伺服器交換資料。在本文的例子中，我們將演示當使用者向一個標準的HTML表單中輸入資料時網頁如何與web伺服器進行通訊。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>一個簡單的Ajax請求例子 - Admin10000.com </title>
    <script type="text/javascript">
        var xmlHttp;
        // 建立XMLHttpRequest物件
        function createXMLHttpRequest() {
            if (window.ActiveXObject) {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if (window.XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();
            }
        }
        // 整合url引數
        function createQueryString() {
            var name = document.getElementById("txtName").value;
            var sex = document.getElementById("txtSex").value;
            var birthday = document.getElementById("txtBirthday").value;
            var queryString = "Name=" + encodeURIComponent(name) + "&Sex=" + encodeURIComponent(sex) + "&Birthday=" + encodeURIComponent(birthday);
            return queryString;
        }
        // 按照Get方式傳遞引數
        function doRequestUsingGET() {
            createXMLHttpRequest();
            var queryString = "AjaxServer.ashx?";
            queryString = queryString + createQueryString() + "&timeStamp=" + new Date().getTime();
            xmlHttp.onreadystatechange = handleStateChange;
            xmlHttp.open("GET", queryString, true);
            xmlHttp.send(null);
        }
        // 按POST方式傳遞引數
        function doRequestUsingPOST() {
            createXMLHttpRequest();
            var url = "AjaxServer.ashx?timeStamp=" + new Date().getTime();
            var queryString = createQueryString();
            xmlHttp.open("POST", url, true);
            xmlHttp.onreadystatechange = handleStateChange;
            xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
            xmlHttp.send(queryString);
        }
        // 回撥函式
        function handleStateChange() {
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {
                    parseResults();
                }
            }
        }
        // 處理伺服器響應內容
        function parseResults() {
            var responseDiv = document.getElementById("serverResponse");
            if (responseDiv.hasChildNodes()) {
                responseDiv.removeChild(responseDiv.childNodes[0]);
            }
            var responseText = document.createTextNode(xmlHttp.responseText);
            responseDiv.appendChild(responseText);
        }
    </script>
</head>
<body>
    <form action="#">
    <h2>輸入你的名字,性別,生日：</h2>
    <table>
        <tr><td>名字：</td><td><input type="text" id="txtName" /></td></tr>
        <tr><td>性別：</td><td><input type="text" id="txtSex" /></td></tr>
        <tr><td>生日：</td><td><input type="text" id="txtBirthday" /></td>
        </tr>
    </table>
    <input type="button" value="用Get方式傳引數" onclick="doRequestUsingGET();"/>
    <br /><br />
    <input type="button" value="用POST方式傳引數" onclick="doRequestUsingPOST();"/>
    </form>
    <br />
    <h3>伺服器響應內容：</h3>
    <div id="serverResponse"></div>
</body>
</html>

下面來詳細說明下上例的每個JS函式的功能。
createXMLHttpRequest() 用來建立XMLHttpRequest物件。
因為IE把XMLHttpRequest實現為一個ActiveX物件，其他瀏覽器(FF/Safari/Opera)把它實現為一個本地JavaScript物件。由於存在這些差別，JavaScript程式碼中必須包含有關的邏輯。
createQueryString() 用來整理引數，將Ajax請求要傳遞的引數整理成一定的格式。
如果傳遞中文或非ASCII字元必須進行URL編碼，本例使用JS的encodeURIComponent()函式進行引數URL編碼。
doRequestUsingGET() 以HTTP GET方式向伺服器傳送請求，並且傳遞引數。
XMLHttpRequest物件的open()方法會指定將發出的請求。open()方法取3個引數：一個是指示所使用的方法(通常是GET或POST)的串；一個是表示目標資源URL的串；一個是Boolean值，只是請求是否是非同步的。
GET請求時，將傳遞的引數寫到open方法的url引數中，此時send方法的引數為null。
在某些情況下，有些瀏覽器會把多個XMLHttpRequest請求的結果快取在同一個URL。如果對每個請求的響應不同，這就會帶來不好的結果，把當前時間戳追加到URL的最後，就能確保URL的惟一性，從而避免瀏覽器快取結果。
本例伺服器端程式碼使用的是asp.net(c#)。
doRequestUsingPOST() 以HTTP POST方式向伺服器傳送請求，並且傳遞引數。 
確保open()中指定的方法是POST，需要設定Content-Type頭資訊，模擬HTTP POST方法傳送一個表單，這樣伺服器才會知道如何處理上傳的內容。設定頭資訊前必須先呼叫open方法。
必須使用send方法傳遞引數。引數的提交格式和GET方法中url的寫法一樣。
handleStateChange()  Ajax回撥函式。
對於XMLHttpRequest物件，onreadystatechange屬性儲存了回撥函式的指標。當XMLHttpRequest物件內部狀態發生變化時，就會呼叫這個回撥函式。
parseResults() 處理響應結果。
 

下載本例完整原始碼：一個簡單的Ajax請求例子 AjaxDemo

資源下載：XMLHttp物件中文參考手冊

相關文章