基于HTML，以POST方式，检查注册用户名是否在数据库中已存在

最新推荐文章于 2021-06-04 06:53:02 发布

Tomsheng321

最新推荐文章于 2021-06-04 06:53:02 发布

阅读量2.1k

点赞数

分类专栏： JS

JS 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

js/ajax.js

	//创建AJAX异步对象，即XMLHttpRequest
	function createAJAX(){
		var ajax = null;
		try{
			ajax = new ActiveXObject("microsoft.xmlhttp");
		}catch(e1){
			try{
				ajax = new XMLHttpRequest();
			}catch(e2){
				alert("你的浏览器不支持ajax，请更换浏览器");
			}
		}
		return ajax;
	}

09_register.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在</title>
	<!-- 引入外部js文本 -->
    <script type="text/javascript" src="js/ajax.js"></script>
  </head>
  <body>
	
	
	用户名[POST]：<input id="usernameID" type="text" maxlength="4"/>
	<span id="resID">
		<!-- 
		<img src="tip变量" width="12px" height="12px"/>
		-->
	</span>
	
	
	<hr/>

	
	<script type="text/javascript">
		document.getElementById("usernameID").onblur = function(){
			var username = this.value;//杰克
			//NO1)
			var ajax = createAJAX();
			//NO2)
			var method = "POST";
			var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime();
			ajax.open(method,url);
			//设置AJAX请求头为POST，他会将请求体中的汉字自动进行UTF-8的编码
			ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
			//NO3)
			var content = "username=" + username;
			ajax.send(content);
			
			
			//===========================================等待
			
			
			//NO4)
			ajax.onreadystatechange = function(){
				if(ajax.readyState == 4){
					if(ajax.status == 200){
						//NO5)
						var tip = ajax.responseText;
					
						//NO6)
						//创建img标签
						var imgElement = document.createElement("img");
						//设置img标签的src/width/height的属性值
						imgElement.src = tip;
						imgElement.style.width = "12px";
						imgElement.style.height = "12px";
						//定位span标签
						var spanElement = document.getElementById("resID");
						//清空span标签中的内容
						spanElement.innerHTML = "";
						//将img标签加入到span标签中
						spanElement.appendChild(imgElement);
					}
				}
			}
		}
	</script>
	
  </body>
</html>

UserServlet.java

public class UserServlet extends HttpServlet {
	public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		String username = request.getParameter("username");
		System.out.println("username=" + username);
		
		String tip = "images/MsgSent.gif";
		if("杰克".equals(username)){
			tip = "images/MsgError.gif";
		}
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter pw = response.getWriter();
		pw.write(tip);
		pw.flush();
		pw.close();
	}
}