Ajax小练习

最新推荐文章于 2021-08-05 16:19:54 发布

原创最新推荐文章于 2021-08-05 16:19:54 发布 · 606 阅读

0 ·

CC 4.0 BY-SA版权

JAVA EE作业同时被 2 个专栏收录

12 篇文章

订阅专栏

Ajax

1 篇文章

订阅专栏

本文详细介绍了如何使用Ajax技术在用户注册过程中实时验证用户名的唯一性，避免了页面刷新，提供了更好的用户体验。通过JavaScript的异步请求，实现了在用户输入用户名时立即检查数据库中是否存在相同用户名的功能，确保了注册过程的高效性和准确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ajax不刷新整个页面，只刷新局部。

下面是判断注册用户是否已经存在的列子：

1）JSP页面代码：

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=gbk">
		<title>welcome ,注册本系统</title>
		<link rel="stylesheet" type="text/css" href="style/style.css">
		<script type="text/javascript">
	var xhr = null;

	function checkUname() {
		var username = document.myform.uname.value;
		
		if (username == "" || username == null) {
			document.getElementById("msgDiv").innerHTML = "<font color='red'>请输入用户名</font>";
		}
		//ajax的核心对象
		//var xhr=new XMLHttpRequest();//只对非ie浏览器生效

		if (window.ActiveXObject) {

			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		} else {
			xhr = new XMLHttpRequest();
		}
		
		//var url = "http://localhost:8080/Myself_Ajax/RegServlet?uname="+ username;
		
		var url = "RegServlet?uname=" + username;//url简写
		
		url = encodeURI(encodeURI(url));//两次转码
		
		//当核心对象的状态发生改变，它的处理函数
		xhr.onreadystatechange = haolejiaowo;
		xhr.open("get", url, true);
		xhr.send(null);

	}

	//才是核心处理函数
	function haolejiaowo() {
		if (xhr.readyState == 4 && xhr.status == 200) {
			var result = xhr.responseText;//得到远程服务器返回的结果
			if (result.indexOf("true") != -1) {
				document.getElementById("msgDiv").innerHTML = "<font color='red'>用户名已存在</font>";
				;
			} else {
				document.getElementById("msgDiv").innerHTML = "可以注册";
			}

		}

	}
</script>

	</head>

	<body>
		<div align="center">
			<%--  登录  --%>

			<div class="login" align="center">
				<br />
				<h2>
					短信系统注册	Ajax
				</h2>
				<form action="UserServlet" method="post" name="myform">
					<input type="hidden" name="cmd" value="reg">
					用户名
					<input type="text" name="uname" class="input" onblur="checkUname()" />
					<div id="msgDiv" style="display: inline">
						   
					</div>
					<br />
					密  码
					<input type="password" name="upass" class="input" />
					<br />
					重复密码
					<input type="password" name="upassrep" class="input" />
					<br />
					<input type="submit" value=" 注册 " class="btn" />
				</form>
			</div>


		</div>
	</body>
</html>

2）编写服务器段代码:(Servlet处理的代码）

package com.neusoft.sms.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;

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

public class RegServlet extends HttpServlet {

	public boolean isExist(String username) {

		// 模拟后台数据库有三个用户
		String[] names = { "jack", "rose", "marry", "谭健升" };
		for (String s : names) {
			if (username.equalsIgnoreCase(s)) {
				return true;
			}
		}
		return false;
	}

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

		try {
			Thread.sleep(1000);
		} catch (InterruptedException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}

		response.setContentType("text/html;charset=gbk");
		PrintWriter out = response.getWriter();

		String username = request.getParameter("uname");
		username = URLDecoder.decode(username, "UTF-8");// 一次解码
		boolean flag = isExist(username);
		out.println(flag);

		out.flush();
		out.close();
	}

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

		doGet(request, response);
	}

}

3）页面显示的结果：