简单使用Ajax实现异步查询用户名是否被占用_用ajax实现更新时自动检查水利项目名是否已被占用得10分;-CSDN博客

本文链接：https://blog.csdn.net/Eugene_Y/article/details/55213624

Hello!大家好，我是Eugene_Y。今天学了一招，是使用Ajax实现异步查询用户名是否被占用。

我是菜鸟，所以会以一个菜鸟的角度去阐述，希望各位小伙伴们看到了能有收获！

要做这个需要用到Servlet(或jsp)、数据库、JDBC、和简单的JavaScript&Html知识

1.Ajax是什么？： AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下

2.能做什么？：因为1的关系，这意味着我们可以在不刷新页面的情况下，“私下”去访问其他页面，

去连接数据库进行增删改查等等操作，而且这是异步的。

我们在注册用户的时候，填用户名时，自己喜欢的名称老是被提示“该用户已存在，

请试试别的用户名”？如右图所示------------->>

用户没有刷新页面，但当我们输完邮件地址后，网页是如何知道该邮箱地址已经有人用了呢？这是怎么做到的呢？

这就是使用Ajax技术做的。当我们输入邮件地址后，利用Ajax就可以去访问Servlet，去数据库中查询该邮件地址是否已被注册，

并返回结果，我们就可以根据结果使用JavaScript来提示用户，该邮件地址是否可用了！而这些操作都是异步的，“私下”的，这样

可以提升用户体验。

3.怎么做？：由于本文只关注Ajax实现，所以数据库JDBC方面小伙伴们自己实现，我们做一个注册页面。

注册页面


   
   
    
    <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册...</title>
<script type="text/javascript">
	//-------生成Ajax的XMLHttpRequest对象-------------
	var xmlhttp;
	var divUserNameState;
	var inpUserName;
	function nameAble() {
		inpUserName = document.getElementById("usernameId");
		divUserNameState = document.getElementById("usernameState");
		xmlhttp = null;
		if (window.XMLHttpRequest) {// code for all new browsers
			xmlhttp = new XMLHttpRequest();
		} else if (window.ActiveXObject) {// code for IE5 and IE6
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
	//--------------------------------------------
		if (xmlhttp != null) {
			var url = "Nameable?username=" + inpUserName.value.trim()
					+ "&time=" + new Date().getTime();//Nameable为验证名字是否可用的Servlet页面地址，后面为参数
			xmlhttp.onreadystatechange = state_Change;//当状态改变时触发的函数						//状态有0未初始化,1装载中,2装载完成,3正在交互,4收到返回。
			xmlhttp.open("GET", url, true);//重要方法，open(提交方式，URL，是否异步默认TRUE)
			xmlhttp.send(null);//重要方法，用GET时，参数能为NULL
		} else {
			alert("Your browser does not support XMLHTTP.");
		}
	}

	function state_Change() {//状态改变就会触发该函数，状态有0未初始化,1装载中,2装载完成,3正在交互,4收到返回。
		if (xmlhttp.readyState == 4) {// 4 = "loaded"  Ajax引擎收到返回，状态为4
			if (xmlhttp.status == 200) {// 200 = OK    网页正常返回200
				divUserNameState.innerHTML = xmlhttp.responseText;//用户名下的DIV内容设为返回的内容								//xmlhttp.responseText返回请求页面的内容 } else {alert("访问出现错误！");}}}

</script>
</head>
<body style="text-align: center; background-color: #cccccc;">
用户名：<input type="text" name="username" id="usernameId" οnblur="nameAble()"><br><div id="usernameState"></div> 
密码：<input type="text" name="password"><br> 
手机：<input type="text" name="phone"><br>  
邮箱：<input type="text" name="email"><br><br>
<input type="button" value="注册"><br>
</body></html>

Nameanle(Servlet)代码如下

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		response.setCharacterEncoding("UTF-8");
		String name = request.getParameter("username");
		UserDao dao = new UserImpl();
		User user = dao.findUserByName(name);

		if(user == null)
			response.getWriter().print("恭喜！用戶名可用。");
		else
			response.getWriter().print("抱歉！用戶名已存在，请换另外一个试试。");

	}

只是验证下功能，所以页面有点丑...哈哈哈，结果如下