现在我们来使用Ajax来做异步校验用户名是否存在的小案例，
效果展示
在本实例中，我们模拟了一个已经存在的用户名123，
下面就让我们来看主要的实现过程
前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
</head>
<body>
<h1>注册</h1>
<form action="check.php" method="get">
用户名：<input type="text" name="username" id="username"> <span id="username_result"></span><br>
密 码：<input type="password" name="password"><br>
<input type="submit" value="提交">
</form>
</body>
<script type="text/javascript">
window.onload = function(){
var username = document.querySelector("#username");
username.onblur = function(){//鼠标焦点移开
var usernameValue = username.value;
//Ajax 4步
//var xhr = new XMLHttpRequest();//不兼容IE6
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}//28-32处理IE6兼容
xhr.open("get","check.php?username=" + usernameValue,true);//方法
xhr.send(null);
xhr.onreadystatechange = function(){
var result = xhr.responseText;
var username_result = document.querySelector("#username_result");
if(result=="ok"){
username_result.innerText = "用户名可用";
}else{
username_result.innerText = "用户名已存在";
}
//callback
};
};
};
</script>
</html>php代码：(模拟了一个已经存在的123用户)
