ajax學習小結

ajax學習小結

一、Ajax
    Asynchronous JavaScript And XML = 異步的 JavaScript 及 XML。
    
    目的：使得整個頁面不刷新也能出現效果。沒有後退按鈕。

二、XMLHttprequest(由瀏覽器內核創建)
    方法：
        open("get/post", "URL");
        send();
    
    屬性：
        readyState         客戶端請求就緒狀態碼
        status            服務器響應狀態碼
        responseText    響應的文本內容
        responseXML        響應的XML文檔對象(一般不用)
        
    事件處理器：
        onreadystatechange
    
    示例代碼：
    <script type="text/javascript">
        // 方式1
        function ckName() {
            // 獲取用戶名對象
            var name = document.getElementsByTagName("input")[0];
            // 創建XMLHttpRequest對象
            var xhr = getXMLHttpRequest();
            // 處理響應結果，創建回調函數，根據響應狀態動態更新頁面
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) { // 說明客戶端請求一切正常
                    if (xhr.status == 200) { // 說明服務器響應一切正常
                        // alert(xhr.responseText); // 得到響應結果
                        var msg = document.getElementById("msg");
                        if (xhr.responseText == "true") {
                            // msg.innerText = "用戶名已存在";
                            msg.innerHTML = "<font color='red'>該用戶名已存在</font>";
                        } else {
                            msg.innerHTML = "<font color='green'>該用戶名可以使用</font>";
                        }
                    }
                }
            }            
            // 建立一個連接
            xhr.open("get", "${pageContext.request.contextPath }/servlet/ckNameServlet?name=" + name.value);
            // 發送請求
            xhr.send(null);
        }
        
        // 方式2
        window.onload = function() {
            var nameElement = document.getElementsByName("userName")[0];
            nameElement.onblur = function() {
                var name = this.value; // this等價於nameElement
                
                // 創建XMLHttpRequest對象
                var xhr = getXMLHttpRequest();
                // 處理響應結果，創建回調函數，根據響應狀態動態更新頁面
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4) { // 說明客戶端請求一切正常
                        if (xhr.status == 200) { // 說明服務器響應一切正常
                            // alert(xhr.responseText); // 得到響應結果
                            var msg = document.getElementById("msg");
                            if (xhr.responseText == "true") {
                                // msg.innerText = "該用戶名已存在";
                                msg.innerHTML = "<font color='red'>該用戶名已存在</font>";
                            } else {
                                msg.innerHTML = "<font color='green'>該用戶名可以使用</font>";
                            }
                        }
                    }
                }            
                // 建立一個連接
                xhr.open("get", "${pageContext.request.contextPath }/servlet/ckNameServlet?name=" + name + "&time=" + new Date().getTime());
                // 發送請求
                xhr.send(null);
            }
        }
    </script>
        
三、使用Ajax
    1. 確定使用什麼事件調用什麼方法
    2. 步驟：
        獲取XMLHttpRequest對象
        處理響應結果
        建立一個連接
        發送請求