今天在進行JavaScript-Ajax對網頁實時監測時，學習到了XMLHttpRequest類

首先上案例

註冊介面

註冊功能除了將資料接受用servlet儲存進資料庫外，還應當對使用者進行約束和要求。

如果只是簡單的將一整篇滿滿的表格填滿後，點選提交，使用者資料的完整性和安全性就無法得到保障。比如說賬號不能重複，密碼必須有字母和數字，密碼和確認密碼必須相同，電話號碼為11位數字等等。

所以JavaScript就是最好的“監視哨兵”。

其中最簡單的就是每個<input>標籤下輸入格式的限制了，因為HTML已經提供了pattern屬性。

其次是密碼和確認密碼

function validata(){
    var pw1 = document.getElementById("pw1").value;
    var pw2 = document.getElementById("pw2").value;
    if(pw1 == pw2) {
    document.getElementById("tishi").innerHTML="<font color='green'>兩次密碼相同</font>";
    document.getElementById("submit").disabled = false;
    }
    
 
else {
    document.getElementById("tishi").innerHTML="<font color='red'>兩次密碼不相同</font>";
    document.getElementById("submit").disabled = true;
    }
}

validata()的js方法對id為“tishi”的<span>標籤進行innerHTML輸出，並限制提交按鈕。(document.getElementById("").innerHTML="")

第三——也是今天的重點：使用Ajax

function
 
 checkUsername(){
    var username=document.getElementById("username").value;
    if(username==null||username==""){
        document.getElementById("yonghuming").innerHTML="<font color='red'>使用者名稱不能為空</font>";
        document.getElementById("submit").disabled = false;
    }
    else{
        var xhr=new XMLHttpRequest();
        var url="CheckNameWithAjax?username="+username;
        xhr.open("post",url,true);
        xhr.send();
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4 && xhr.status==200){
                var resText=xhr.responseText;
                if(resText=="true"){
                    document.getElementById("CheckUsername").innerHTML="<font color='green'>該使用者名稱可用</font>";
                }
                else{
                    document.getElementById("CheckUsername").innerHTML="<font color='red'>該使用者名稱已存在</font>";
                }
            }
        }
    }
}

我們需要在使用者編輯完使用者名稱後直接給出格式問題，那麼就需要在<input name="username">中新增屬性——onbulr="checkUsername()"         onbulr屬性是使用者將焦點移開此輸入框後執行引號內的js方法。

XMLHttpRequest()類提供的方法有

open(method, url, async, username, password)

send(body)

簡單的知識點均來自XML DOM - XMLHttpRequest 物件 (w3school.com.cn)