使用ajax验证注册表单（判断用户名是否已注册），验证过程使用旋转加载图像，用户名被占用使用x，用户名可用使用√，以上三种情况分别用.thinking，.denied，.approved样式类显示样式，ajax根据服务器返回的解决判断input应该使用上面那一个样式类，其中thinking和denied都能显示图片，但是approved无法显示。

用户名验证中

用户名不可用

用户名可用（但.approved样式无法显示，仅显示无状态的input样式）

相关代码如下
HTML

    
        
        
        
        
    

    
        

            
Please register to access reviews:
            

                

                    Username:
                    
                
                

                    First Name:
                    
                
                

                    Last Name:
                    
                
                

                    Email:
                    
                
                

                    Favorite Genre:
                    
                        Action
                        Adventure
                        Comedy
                        Crime
                        Documentary
                        Drama
                        Horror
                        Musical
                        Romance
                        Sci-Fi/Fantasy
                        Suspense
                        Western
                    
                
                

                    Favorite Movie:
                    
                
                

                    Describe your movie tastes:
                    
                
                

                    
                    
                
            
        

    

CSS

body {
  background: url('../images/bgBody.png');
  font-family: Trebuchet MS, Verdana, Helvetica, Arial, san-serif;
  margin: 0;
  text-align: center;
}

#wrapper {
  background: url('../images/bgContent.jpg') 0 -2px;
  color: #ddd;
  height: 500px;
  margin: 0 auto;
  padding: 150px 180px 0 180px;
  position: relative;
  text-align: left;
  width: 440px;
}

ul { padding: 0; }
li { font-size: 12px; list-style: none; margin: 0 0 4px 0; }

label {
  float: left;
  margin: 4px 6px 0 0;
  text-align: right;
  width: 160px;
}

input { border: 2px solid #1E3755; padding: 0 2px; width: 216px; }
select { border: 2px solid #1E3755; width: 224px; }
textarea { border: 2px solid #1E3755; padding: 0 2px; width: 216px; }

#register { width: 100px; }
#username{
    background: #fff url("../images/status.gif") 202px 0 no-repeat;
    padding: 0 20px 0 2px;
    width: 198px;
}

#username.thinking {
    background-position: 202px -19px;
}
2
#username.approved {
    background-position: 202px -35px;
}

#username.denied {
    background-position: 202px -52px;
}

JS

window.onload = initPage;
function initPage(){
    document.getElementById("username").onblur = checkUsername;
    document.getElementById("register").disabled = true;
}

function checkUsername(){
    document.getElementById("username").className = "thinking";
    request = createRequest();
    if (request == null) {
        alert("Unable to create request.");
    }else {
        var theName = document.getElementById("username").value;
        var username = escape(theName);
        var url = "checkName.php?username=" + username;
        request.onreadystatechange = showUsernameStatus;
        request.open("GET",url,true);
        request.send(null);
    }
}

function showUsernameStatus(){
    if (request.readyState == 4) {
        if (request.status == 200) {
            if (request.responseText == "okay") {
                document.getElementById("username").className = "approved";
                document.getElementById("register").disabled = false;
            }else {
                document.getElementById("username").className = "denied";
                document.getElementById("username").focus();
                document.getElementById("username").select();
                document.getElementById("register").disabled = true;
            }
        }
    }
}

PHP

雪碧图