Ajax开发技术（注册时检测用户id是否已被使用）

最新推荐文章于 2023-03-13 11:58:41 发布

Casey321

最新推荐文章于 2023-03-13 11:58:41 发布

阅读量780

点赞数 3

分类专栏： JavaWeb 文章标签： web ajax

本文链接：https://blog.csdn.net/weixin_44736475/article/details/105478678

版权

JavaWeb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、Ajax简单介绍

Ajax产生的主要目的是用于网页的局部刷新，从之前的代码开发中可以发现，每当用户向服务器端发送请求时，哪怕需要的只是简单地更新一点点局部内容，服务器端都会将一个整体的页面进行刷新，并重新生成代码，这样一来程序的性能肯定会有所降低，而如果采用的是Ajax技术，就可以实现局部的内容变更，从而使处理的性能比前者高很多。因为Ajax采用的是局部刷新技术，所以整体页面并不会随着用户的每次请求而整体发生变化，只会在局部的位置上有所改变，这样的实现方式会使程序的性能更高。

二、使用Ajax技术实现用户注册时id不能重复的检测

当用户输入ID之后，会使用Ajax将信息提交到服务器上进行验证，如果此ID没有被人使用，则提示正确，否则则提示错误信息。

注册表单页面—regist.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 language="JavaScript">
var xmlHttp;         //Ajax核心对象名称
var flag;           //定义标志位
function createXMLHttp(){//创建XMLHttpRequest核心对象
	if(window.XMLHttpRequest){//判断当前使用的浏览器类型
		xmlHttp = new XMLHttpRequest();
	}else{
		xmlHtt = new ActiveXObject("Microsoft.XMLHttp");
	}
}
function checkUserid(userid){
	createXMLHttp();//建立xmlHttp核心对象
	//设置一个请求，通过地址重写的方式将userid传递到JSP中
	xmlHttp.open("POST","CheckServlet?userid="+userid);
	//设置请求完成之后处理的回调函数
	xmlHttp.onreadystatechange = checkUserisCallback;
	xmlHttp.send(null);//发送请求，不传递任何参数
	document.getElementById("msg").innerHTML="正在验证...";
}
function checkUserisCallback(){//定义回调函数
	if(xmlHttp.readyState==4){//数据返回完毕
		if(xmlHttp.status==200){//HTTP操作正常
			var text = xmlHttp.responseText;//接收返回的内容
			if(text=="true"){
				flag = false;//无法提交表单
				document.getElementById("msg").innerHTML ="用户id重复，无法使用！";
			 
			}else{
				flag = true;
				document.getElementById("msg").innerHTML = "此用户id可以注册！";
			}
		}
	}
function checkForm(){
	return flag;
  }
}
</script>
</head>
<body>
<form action="regist.jsp" method = "post" onsubmit="return checkForm()">
用户id:<input type="text" name="userid" onblur="checkUserid(this.value)">
<span id= "msg"></span><br>
姓名：<input type ="text" name="name"><br>
密码：<input type="password" name="password"><br>
<input type="submit" value="注册">
<input type="reset" vakue="重置">
</form>
</body>
</html>

当用户输入完ID后，会触发失去焦点（onblur)事件，调用checkUserid()函数，将输入的用户ID传递到服务器上进行验证，如果服务器返回true，则表示ID可以使用，如果为false，则此ID无法使用，同时表单也无法提交。

验证用户名是否存在—CheckServlet.java

package cn.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/CheckServlet")
public class CheckServlet extends HttpServlet {
	private static final String DRIVER_CLASS = "com.mysql.cj.jdbc.Driver";
	private static final String DATABASE_URL = "jdbc:mysql://localhost:3306/test? useUnicode=true & characterEncoding=utf-8 & rewriteBatchedStatements=true & useSSL=false & serverTimezone=UTC & allowPublicKeyRetrieval=true";
	
	private static final String DATABASE_USRE = "root";
	private static final String DATABASE_PASSWORD = "*******";

     public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
    	 this.doPost(request, response);
     }
     public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
    	request.setCharacterEncoding("utf-8");
    	Connection conn = null;
    	PreparedStatement pstmt = null;
    	ResultSet rs = null;
    	PrintWriter out = response.getWriter();
    	String userid = request.getParameter("userid");
    	System.out.println(userid);
    	try {
			Class.forName(DRIVER_CLASS);
			conn = DriverManager.getConnection(DATABASE_URL,DATABASE_USRE, DATABASE_PASSWORD);
			String sql = "select * from person where id=?";
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, userid);
			rs = pstmt.executeQuery();
			if(rs.next()){
				out.print("true");
			}
			else{
				out.print("false");
			}
		} catch (Exception e) {
			e.printStackTrace();
		}finally{
			try {
				conn.close();//关闭连接
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
			
		}
    	
     }
}

效果截图
在这里插入图片描述

Casey321

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
Ajax开发技术（注册时检测用户id是否已被使用）

一、Ajax简单介绍Ajax产生的主要目的是用于网页的局部刷新，从之前的代码开发中可以发现，每当用户向服务器端发送请求时，哪怕需要的只是简单地更新一点点局部内容，服务器端都会将一个整体的页面进行刷新，并重新生成代码，这样一来程序的性能肯定会有所降低，而如果采用的是Ajax技术，就可以实现局部的内容变更，从而使处理的性能比前者高很多。因为Ajax采用的是局部刷新技术，所以整体页面并不会随着用户的...
复制链接

扫一扫