ajax使用之验证用户名是否存在

最新推荐文章于 2023-07-20 16:55:55 发布

花2不谢

最新推荐文章于 2023-07-20 16:55:55 发布

阅读量2.1w

点赞数 5

分类专栏： Java ajax 文章标签： Java servlet ajax javascript

本文链接：https://blog.csdn.net/qq_25821067/article/details/51675599

版权

Java 同时被 2 个专栏收录

77 篇文章 1 订阅

订阅专栏

ajax

5 篇文章 0 订阅

订阅专栏

ajax使用非常广，比如验证用户名、二级联动等。实现的效果如下：

前台代码如下：

<%@ 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">
<script type="text/javascript" src="${pageContext.request.contextPath}/util.js"></script>
<title>ajax用户名验证</title>
<script>

	window.onload = function() {

		document.getElementById("userName").onblur = function() {
			
			if(this.value=="")
				{
					alert("请输入用户名!");
					this.focus();
				}
			//发出已补请求
			//1/得到xhr对象
			var xhr = getXHR();
			//2.注册状态变化监听器
			
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4) {
					if (xhr.status == 200) {
						document.getElementById("msg").innerHTML = xhr.responseText;
					}
				}
				
			}
			//3.建立与服务器的连接
			xhr.open("POST", "AjaxDemo1" + "?time=" + new Date().getTime());
			xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			//4.向服务器发出请求
			xhr.send("userName="+this.value);
			
		}

	}
</script>
</head>
<body>
<form action="AjaxDemo1" method="post">
		用户名:<input type="text" id="userName" name="userName" /><span id="msg"></span><br />
		密 码:<input type="password" id="password"
			name="password" /><br /> <input type="submit" value="注册">
	</form>
</body>
</html>

后台代码如下：

package com.levi.servletajax;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class AjaxDemo1
 */
public class AjaxDemo1 extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public AjaxDemo1() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		this.doPost(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		String userName=request.getParameter("userName");
		response.setCharacterEncoding("utf-8");
		String names[]={"lw","admin","levi"};
		for (String s : names)
		{
			if(s.equals(userName))
			{
				response.getWriter().write("<font color='red'>用户名不可用</font>");
				return;
			}
			
		}
		response.getWriter().write("<font color='green'>用户名可用</font>");
		response.getWriter().flush();
	}

}

其中前台的获取XMLHttpRequest对象我封装到了util.js文件里面，里面代码如下：

/**
 * 得到XMLHttpRequest对象
 */
function getXHR(){
	var xmlHttp;
	try {
		xmlHttp=new XMLHttpRequest();
	}catch(e)
	{
		try{
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch(e)
		{
			try{
				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch(e)
			{
				alert("你的浏览器不支持ajax");
				return false;
			}
			
		}
		
	}
	return xmlHttp;
}

花2不谢

关注

5
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
ajax使用之验证用户名是否存在

ajax使用非常广，比如验证用户名、二级联动等。实现的效果如下：前台代码如下：<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>ajax用户名验证 window.onload = function() { document.get
复制链接

扫一扫