<script type="text/javascript" >
var xhr;//声明变量
//声明一个创建XMLHttpRequest对象的函数
function getXMLHttpRequest() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest;
}
}
function userInput(textName) {
//获取文本框的值
var userName = textName.value;
//调用getXMLHttpRequest函数创建XMLHttpRequest对象
xhr = getXMLHttpRequest();
//设置回调函数
xhr.onreadystatechange = getResult;
//封装函数
xhr.open("GET", "StudentServlet?userName=" + userName, true);
//发送请求
xhr.send(null);
}
//回调函数,data表示从服务器返回来的数据
function getResult() {
//获取span框
var span = document.getElementById("span");
//判断服务端是否成功返回数据
if (xhr.readyState == 4 && xhr.status == 200) {
//接收并处理服务端返回来的数据
if (xhr.responseText == "y") {
span.style.color = "green";
span.innerHTML = "恭喜!该用户名可用!";
} else {
span.style.color = "red";
span.innerHTML = "该用户名已被使用!请重新输入";
}
}
}
</script>
效果截图:Ps:用户名的数据来源于数据库
当填写用户名把鼠标移开后就能判断用户名是否已被使用。
当用户名可以使用时:
当用户名存在时: