Ajax实例之校验用户名是否已被注册

最新推荐文章于 2023-07-24 11:15:17 发布

小蝌蚪找玛玛

最新推荐文章于 2023-07-24 11:15:17 发布

阅读量1.1k

点赞数 1

分类专栏： Ajax学习笔记

本文链接：https://blog.csdn.net/weixin_44679832/article/details/92782396

版权

Ajax学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.功能介绍

在注册表单中，当用户填写了用户名，把光标移开后，会自动向服务器发送异步请求。服务器返回true或false，返回true表示这个用户名已经被注册过，返回false表示没有注册过。

客户端得到服务器返回的结果后，确定是否在用户名文本框后显示“该用户名已被注册”的错误信息！

2.代码实现

regist.jsp页面中给出注册表单，给username表单字段的onblur事件注册监听，调用XMLHttpRequest对象的send()方法，向服务器发送异步请求，参数为username。

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!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>ajax实例:用户名是否已被注册</title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript">
	
    //1.创建异步对象(XMLHttpRequest对象)
    function createXMLHttpRequest() {
	try {

	    // 适用于大多数浏览器，以及IE7和IE更高版本
	    return new XMLHttpRequest();
	} catch (e) {
	    try {

		// 适用于IE6.0
		return new ActiveXObject("Msxml2.XMLHTTP");
	    } catch (e) {
		try {

		    // 适用于IE5.5及更早版本
		    return new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e) {
		    throw e;
		}
	    }
	}
    }
	
    // 文档加载完成事件
    window.onload = function() {
		
        // 获取用户名文本框，给它的失去焦点事件注册监听
        var usernameEle = document.getElementById("username");
        usernameEle.onblur = function() {
			
            // 2.调用XMLHttpRequest对象的open()方法，打开与服务器的连接
            var xmlHttp = createXMLHttpRequest();
            xmlHttp.open("POST", "<c:url value='/RegistServlet'/>", true);
			
            // 设置Content-Type请求头
            xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			
            // 3.调用XMLHttpRequest对象的send()方法，发送请求,发送时指定请求体
            xmlHttp.send("username=" + usernameEle.value);
			
            //4.XMLHttpRequest对象的onreadystatechange事件，会在XMLHttpRequest对象的状态发生变化时被调用
            xmlHttp.onreadystatechange = function() {
	        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {

	            // 5.通过XMLHttpRequest对象的responseText得到服务器的响应内容
	            var text = xmlHttp.responseText;
					
	            // 得到span元素
	            var spanEle = document.getElementById("msg");
					
	            if (text == "true"){
		        spanEle.innerHTML = "<font color='red'>该用户名已被注册</font>";
	            } else {
		        spanEle.innerHTML = "<font color='green'>该用户名可用</font>";
	            }
	        }
            };
        };
    };
</script>
</head>
<body>
    <form action="#" method="post">
        <table>
	    <tr>
		<td>用户名：</td>
		<td><input type="text" name="username" id="username"/></td>
		<td><span id="msg"></span></td>
	    </tr>
	    <tr>
		<td>密码：</td>
		<td><input type="password" name="password"/></td>
	    </tr>
	</table>
    </form>
</body>
</html>

RegistServlet：获取username参数，判断是否为“allan”，如果是响应true，否则响应false；

package cn.itcast.servlet;

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

public class RegistServlet extends HttpServlet {

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
	response.setContentType("text/html;charset=utf-8");
		
	// 获取表单输入项
	String username = request.getParameter("username");
		
	if (username.equalsIgnoreCase("allan")) {
	    response.getWriter().write("true");
	} else {
	    response.getWriter().write("false");
	}
    }

}

3.实现效果

小蝌蚪找玛玛

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax实例之校验用户名是否已被注册

1.功能介绍在注册表单中，当用户填写了用户名，把光标移开后，会自动向服务器发送异步请求。服务器返回true或false，返回true表示这个用户名已经被注册过，返回false表示没有注册过。客户端得到服务器返回的结果后，确定是否在用户名文本框后显示“该用户名已被注册”的错误信息！2.代码实现 regist.jsp页面中给出注册表单，给username表单字段的onblur事件注册...
复制链接

扫一扫