java-web+AJAX 使用案例（注册验证账号是否被注册）

不念不忘少年蓝@ 2022-06-07 07:07 207阅读 0赞

**AJAX 使用案例（注册验证账号是否被注册）**

在下面的案例中本人没有实际到数据库中查询，只是在Servlet设置一个值 abc，如果用户提交过来的账号也是abc，那么就任务该账号已经存在，就把““此账号已经存在”返回到jsp页面中。

**方式一：get方式请求**

1、register.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>用户注册页面</title>
    <script type="text/javascript">
    	/* 获取引擎对象（兼容IE6之前的游览器） */
    	function getXhr() {
    		var xhr;
    		try {
    			xhr = new XMLHttpRequest();
    		} catch (e) {
    			xhr = new ActiveObject("Microsoft.XMLHTTP");
    		}
    		return xhr;
    	}
    	/* 检查账号是否被注册 */
    	function checkName() {
    		var name = document.getElementById("name");
    		var value = name.value;
    		var nametip = document.getElementById("nametip");
    		//创建异步引擎对象
    		var xhr = getXhr();
    
    		//步骤一：打开引擎，method用于设置请求的方式：get或者post
    		/* url设置请求的路径，async设置是同步操作还是异步操作，默认是ture(异步) */
    		xhr.open("get", "reg.do?name=" + value + "&" + Math.random());
    		/* 步骤二：发送 */
    		xhr.send();
    		/* 步骤三：检测引擎的状态改变 */
    		xhr.onreadystatechange = function() {
    			/* 判断响应是否已经接收完成和判断是否正常响应 */
    			if (xhr.readyState == 4 && xhr.status == 200) {
    				/* 接收响应的字符串信息 */
    				nametip.innerText = xhr.responseText;
    			}
    
    		}
    	}
    
    </script>
    </head>
    <body>
    	<form action="reg.do">
    
    		<p>
    			账号：<input type="text" name="name" id="name" οnblur="checkName();" /><span
    				id="nametip"></span>
    		</p>
    		<p>
    			密码：<input type="password" name="name" id="name" /><span id="nametip"></span>
    		</p>
    		<p>
    			<input type="submit" value="注册" />
    		</p>
    
    	</form>
    </body>
    </html>

2、UserServlet.java

@WebServlet("/reg.do")
    public class UserServlet extends HttpServlet {
    
    	protected void doGet(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		// 响应中文乱码处理
    		response.setContentType("text/html;charset=utf-8");
    		// 接收数据
    		String name = request.getParameter("name");
    		// get方式请求中文乱码处理
    		name = new String(name.getBytes("iso8859-1"), "utf-8");
    
    		if (name.equals("abc")) {
    			PrintWriter out = response.getWriter();
    			out.write("此账号已经存在");
    			out.flush();
    			out.close();
    		}
    	}}

3、结果（输入账号前后截图）

![Center][]![Center 1][]

**方式二：post方式请求**

1、register.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>用户注册页面</title>
    <script type="text/javascript">
    	/* 获取引擎对象（兼容IE6之前的游览器） */
    	function getXhr() {
    		var xhr;
    		try {
    			xhr = new XMLHttpRequest();
    		} catch (e) {
    			xhr = new ActiveObject("Microsoft.XMLHTTP");
    		}
    		return xhr;
    	}
    	
    	/* 检查账号是否被注册 */
    	function checkName() {
    		var name = document.getElementById("name");
    		var value = name.value;
    		var nametip = document.getElementById("nametip");
    		//创建异步引擎对象
    		var xhr = getXhr();
    
    		//步骤一：打开引擎，method用于设置请求的方式：get或者post
    		/* url设置请求的路径，async设置是同步操作还是异步操作，默认是ture(异步) */
    		xhr.open("post", "reg.do");
    		/* post方式提交需要设置请求头 */
    		xhr.setRequestHeader("Content-Type",
    				"application/x-www-form-urlencoded");
    		/* 步骤二：发送 */
    		xhr.send("name=" + value);
    		/* 步骤三：检测引擎的状态改变 */
    		xhr.onreadystatechange = function() {
    			/* 判断响应是否已经接收完成和判断是否正常响应 */
    			if (xhr.readyState == 4 && xhr.status == 200) {
    				/* 接收响应的字符串信息 */
    				nametip.innerText = xhr.responseText;
    			}
    
    		}
    	}
    </script>
    </head>
    <body>
    	<form action="reg.do" >
    
    		<p>
    			账号：<input type="text" name="name" id="name" οnblur="checkName();" /><span
    				id="nametip"></span>
    		</p>
    		<p>
    			密码：<input type="password" name="name" id="name" /><span id="nametip"></span>
    		</p>
    		<p>
    			<input type="submit" value="注册" />
    		</p>
    
    	</form>
    </body>
    </html>

2、UserServlet.java

@WebServlet("/reg.do")
    public class UserServlet extends HttpServlet {
    
    	protected void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		// post方式请求设置编码格式（防止中文乱码）
    		request.setCharacterEncoding("utf-8");
    		// 响应中文乱码处理
    		response.setContentType("text/html;charset=utf-8");
    		// 接收数据
    		String name = request.getParameter("name");
    
    		if (name.equals("abc")) {
    			PrintWriter out = response.getWriter();
    			out.write("此账号已经存在");
    			out.flush();
    			out.close();
    		}
    
    	}
    
    }

3、结果（输入账号前后截图）

![Center][]![Center 1][]

[Center]: https://img-blog.csdn.net/20171013201851581?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYmVueGlhb2hhaTg4OA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: /images/20220607/c85be30e6e6a4297bd104f7cc7cb7f2f.png