Ajax中模拟注册效果

最新推荐文章于 2025-12-13 22:02:08 发布

原创最新推荐文章于 2025-12-13 22:02:08 发布 · 248 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax

Ajax 专栏收录该内容

7 篇文章

订阅专栏

通过Ajax的异步请求将用户名提交到服务器，服务器端查询数据库，若该用户名不存在，则可注册；否则不能注册。而此时页面无须刷新。

<%@ page language="java"  pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>校验用户名是否存在</title>
		<script type="text/javascript" src="./register.js"> </script>
	</head>
	<body>
	<center>
	<form action=""  enctype="application/x-www-form-urlencoded">
		<h3>请填写用户注册信息</h3>
		<table  border="1">
			<tr>
				<td>用户名:</td>
				<td><input type="text" name="username" value="" id="username">
				  <div id="divcheck"></div>
				  <input type="button" name="checkusername" value="查看用户名" id="checkusername"></td>
			</tr>
			<tr>
				<td>密码:</td>
				<td><input type="password" name="psw" value=""></td>
			</tr>
			<tr>
				<td>确认密码:</td>
				<td><input type="password" name="confpsw" value=""></td>
			</tr>
			<tr>
				<td>出生日期:</td>
				<td><input type="text" name="birthday" value=""></td>
			</tr>
		</table>
		 </form>
		 </center>
	</body>
	
</html>

window.onload = function(){
	document.getElementById("checkusername").onclick = function(){
		var username = document.getElementById("username").value;
		
		var xhr = ajaxFunction();
		
		xhr.onreadystatechange = function(){
			if(xhr.readyState==4){
				if(xhr.status==200){
					var data = xhr.responseText;
					
					document.getElementById("divcheck").innerHTML = data;
					
				}
			}
		}
		
		xhr.open("post","../registerServlet?timeStamp="+new Date().getTime(),true);
		
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		
		xhr.send("username="+username);
		
	}
	
	function ajaxFunction(){
	   var xmlHttp;
	   try{ // Firefox, Opera 8.0+, Safari
	        xmlHttp=new XMLHttpRequest();
	    }
	    catch (e){
		   try{// Internet Explorer
		         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		      }
		    catch (e){
		      try{
		         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		      }
		      catch (e){}
		      }
	    }
	
		return xmlHttp;
	 }
}

RegisterServlet.java

package app.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class RegisterServlet extends HttpServlet {

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		
		//1 获取到请求的数据内容:username
		String username = request.getParameter("username");
		
		System.out.println("username = "+username);
		
		//2 查询数据库:1)结果集为空,用户名可用;2)结果集不为空,用户名不可用
		
		//模拟查询数据库
		if(username==null||"".equals(username)){
			out.println("请输入你的用户名!");
		}else if(username.equals("sa")){
			out.println("该用户名已存在!");
		}else{
			out.println("该用户名可使用!");
		}
		
	}

}