一个有关注册的异步应用

这是一个网站的注册页面



希望在填写用户名后，页面能反馈用户名是否占用；

也希望填写口令是否一致或者是否符合要求。



利用一个请求对象，可以安全的发送和接受一个异步请求。但是异步请求不作任何等待，甚至包括他自己，如果两个请求共享一个请求对象，就会出错，最后一个请求的数据会覆盖上一个。

Javascript中在函数内部声明的变量如果没有加var就是全局变量，所以request是全局变量，也为了回调函数能访问他。

异步意味着不能依赖于请求和响应的顺序。如果用户名和口令有一个合法，另一个不合法，注册按钮要控制不可按。这需要一个监视器函数，从局外监视应用。

发送一个完整的表单进行处理时，希望请求是同步的，不希望用户修改数据。但是这个应用是异步的，点击注册按钮时候，下面的图片会滚动，来吸引客户眼球。。。

window.onload = initPage;
var usernameValid = false;
var passwordValid = false;

function initPage() {
document.getElementById("username").onblur = checkUsername;
document.getElementById("password2").onblur = checkPassword;
document.getElementById("register").disabled = true;
document.getElementById("register").onclick = registerUser;
}

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

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

function checkPassword() {
var password1 = document.getElementById("password1");
var password2 = document.getElementById("password2");
password1.className = "thinking";

// First compare the two passwords
if ((password1.value == "") || (password1.value != password2.value)) {
password1.className = "denied";
return;
}

// Passwords match, so send request to server
passwordRequest = createRequest();
if (passwordRequest == null) {
alert("Unable to create request");
} else {
var password = escape(password1.value);
var url = 'checkPass.php?password=' + password;
passwordRequest.onreadystatechange = showPasswordStatus;
passwordRequest.open('GET', url, true);
passwordRequest.send(null);
}
}

function showPasswordStatus() {
if (passwordRequest.readyState == 4) {
if (passwordRequest.status == 200) {
var password1 = document.getElementById("password1");
if (passwordRequest.responseText == 'okay') {
password1.className = "approved";
passwordValid = true;
} else {
password1.className = "denied";
password1.focus();
password1.select();
passwordValid = false;
}
checkFormStatus();
}
}
}

function checkFormStatus() {
if (usernameValid && passwordValid) {
document.getElementById("register").disabled = false;
} else {
document.getElementById("register").disabled = true;
}
}

function registerUser() {
t = setInterval(scrollImages, 50);
document.getElementById("register").value = "Processing...";
registerRequest = createRequest();
if (registerRequest == null) {
alert("Unable to create request.");
} else {
var url = "register.php?username=" +
escape(document.getElementById("username").value) + "&password=" +
escape(document.getElementById("password1").value) + "&firstname=" +
escape(document.getElementById("firstname").value) + "&lastname=" +
escape(document.getElementById("lastname").value) + "&email=" +
escape(document.getElementById("email").value) + "&genre=" +
escape(document.getElementById("genre").value) + "&favorite=" +
escape(document.getElementById("favorite").value) + "&tastes=" +
escape(document.getElementById("tastes").value);
registerRequest.onreadystatechange = registrationProcessed;
registerRequest.open("GET", url, true);
registerRequest.send(null);
}
}

function registrationProcessed() {
if (registerRequest.readyState == 4) {
if (registerRequest.status == 200) {
document.getElementById('wrapper').innerHTML =
registerRequest.responseText;
}
}
}

function scrollImages() {
var coverBarDiv = document.getElementById("coverBar");
var images = coverBarDiv.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
var left = images[i].style.left.substr(0, images[i].style.left.length - 2);
if (left <=  -86) {
left = 532;
}
images[i].style.left = (left - 1) + "px";
}
}