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

<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：用户名的数据来源于数据库

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

当用户名可以使用时：

当用户名存在时：