您的位置:首页 > Web前端 > JavaScript

AJax基于JavaScript实现注册时局部判断用户名是否已被使用

2017-04-13 20:24 579 查看
<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:用户名的数据来源于数据库

当填写用户名把鼠标移开后就能判断用户名是否已被使用。

当用户名可以使用时:



当用户名存在时:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  javascript ajax