ajax html css样式丢失,ajax验证正确却无法显示√，css样式无效

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

用户名验证中

用户名不可用

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

相关代码如下

HTML

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Mike's Movies

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

$takenUsernames = array ('bill', 'ted');

sleep(2);

if (!in_array( $_REQUEST['username'], $takenUsernames )) {

echo 'okay';

} else {

echo 'denied';

}

?>

雪碧图