功能: 检测userName是否可用.userName为admin则不可用,反之可用.实际则可根据自己的需求到数据库验证.
login.jsp 代码:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>无刷新验证用户名是否可用</title> <script type="text/javascript" src="js/checkUsernamePost/login.js" charset="utf-8"></script> </head> <body> <h2>无刷新验证用户名是否可用</h2> <input type="text" id="userName" /> <span id="tip" style="display:none;color:red"></span> <br /> <input type="button" value="ajax验证" onclick="checkUserName();"/> </body> </html>
login.js 代码:
var $ = function(id) { return document.getElementById(id); } // 得到 XMLHttpRequest 对象 var getXMLHttpRequest = function() { var xmlHttp; try { xmlHttp = new XMLHttpRequest(); } catch (e) { try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e2) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e3) { window.alert("Sorry,your browser does not support Ajax!"); } } } return xmlHttp; } var xmlHttp = ""; // 检测 username var checkUserName = function() { // 得到 XMLHttpRequest xmlHttp = getXMLHttpRequest(); if (xmlHttp) { // open xmlHttp.open("post", document.URL + "checkUsername", true); // window.alert(document.URL + "checkUsername"); // 设置 Content-type xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 设置回调函数 xmlHttp.onreadystatechange = statechange; // send var sendData = "userName=" + $("userName").value; xmlHttp.send(sendData); } } // ajax回调函数 var statechange = function() { // 0: 请求未初始化 // 1: 服务器连接已建立 // 2: 请求已接收 // 3: 请求处理中 // 4: 请求已完成,且响应已就绪 if (xmlHttp.readyState == "4") { // 200: "OK" // 404: 未找到页面 if (xmlHttp.status == "200") { var isOK = xmlHttp.responseText; if ("t" == isOK) { $("tip").innerHTML = "恭喜,用户名可用!"; } else if ("f" == isOK) { $("tip").innerHTML = "对不起,用户名不可用!"; $("userName").value = ""; } $("tip").style.display="inline-block"; } } }
CheckUsername.java 代码:
package com.checkUsernamePost; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class CheckUsername extends HttpServlet { private static final long serialVersionUID = 1L; @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("utf-8"); resp.setCharacterEncoding("utf-8"); resp.setContentType("text/html;charset-utf-8"); String userName = req.getParameter("userName"); // System.out.println(userName); PrintWriter out = resp.getWriter(); // 简单验证,不从数据库中取数据.userName为admin则不可用 if ("admin".equals(userName)) { out.print("f"); } else { out.print("t"); } } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doGet(req, resp); } }
web.xml 配置文件:
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <servlet> <servlet-name>checkUsername</servlet-name> <servlet-class>com.checkUsernamePost.CheckUsername</servlet-class> </servlet> <servlet-mapping> <servlet-name>checkUsername</servlet-name> <url-pattern>/checkUsername</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>
文件结构:
运行结果:
相关推荐
在实现Ajax无刷新验证用户名存在的过程中,我们需要以下关键步骤: 1. **前端准备**: - 在HTML表单中,创建一个用于输入用户名的字段,例如`<input type="text" id="username" />`。 - 添加一个按钮或使用jQuery...
本文将深入探讨如何结合这三个技术实现无刷新验证用户名是否存在的功能。 Struts是一个基于MVC(Model-View-Controller)设计模式的Java Web框架,它帮助开发者更好地组织应用程序的结构,提高代码的可维护性和可...
在Ajax验证用户名的场景中,jQuery可以用于更简单、更优雅地处理DOM操作和Ajax请求。例如,可以使用`$.ajax()`方法创建Ajax请求,设置请求类型、URL、数据以及成功的回调函数。以下是一个简单的示例: ```...
在这个例子中,用户注册时输入用户名,Ajax负责在后台验证用户名是否已被占用,无需等待整个页面刷新,提升了交互体验。 【描述】中的"Servlet"是Java Web开发中的一个重要组成部分,它是一个服务器端的Java小程序...
在Web开发中,Java与Ajax(Asynchronous JavaScript and XML)的结合可以实现异步数据...这个压缩包中的"Ajax验证用户名"应该包含了实现这一功能的相关代码,包括前端Ajax调用和后端Java处理逻辑,供开发者参考学习。
总结来说,"AJax验证用户名是否存在"是Web开发中常见的功能,通过DWR或原生JavaScript,我们可以实现与后台的无刷新交互,检查用户名的可用性,提高用户注册或登录的效率。同时,需要注意安全性与性能的优化,确保...
在本场景中,标题"Ajax请求验证用户名问题"指的是使用Ajax来实现用户输入用户名时实时检查该用户名是否已被占用的功能。这通常在注册或登录界面非常常见,提供用户友好的体验,因为他们可以即时得知用户名是否可用,...
本篇文章将深入探讨如何使用jQuery与AJAX技术来实现一个简单的用户名验证功能,以此来确保用户输入的用户名的独特性。这个过程涉及到前端与后端的交互,以及JavaScript、jQuery库和HTTP请求的基本原理。 首先,...
总结来说,这个实例展示了如何利用AJAX、Struts2、JSP和Java实现用户注册时的用户名有效性验证,提供了一个实时反馈、无刷新的用户体验。学习和理解这个过程,对于提升Web开发技能,特别是Java Web开发,具有很大的...
SSM(Spring、SpringMVC、MyBatis)是一个经典的Java web开发框架组合,而Ajax则是异步JavaScript和XML的缩写,用于实现网页的无刷新更新。在本项目"ssm+ajax 验证用户名是否已存在"中,我们将探讨如何利用SSM框架和...
SSH整合AJAX验证用户名存在的完整实例是一个典型的Web开发应用场景,主要涉及了Struts2(S)、Spring(S)和Hibernate(H)三大框架的集成,以及异步JavaScript和XML(AJAX)技术的运用,用于提升用户体验。...
本项目“Ajax验证用户名和密码”旨在利用Ajax实现一个动态、无刷新的用户登录验证系统,提高用户体验,特别是在Java后端的支持下。下面我们将深入探讨这个主题。 1. **Ajax基础** - Ajax的核心是JavaScript的...
Struts2、Ajax 和 jQuery 是Web开发中常用的三大技术,它们在实现动态、无刷新的交互式用户体验方面发挥着重要作用。在这个项目中,我们将探讨如何使用这些技术来验证用户名是否已存在于数据库中。 首先,Struts2 ...
jQuery AJAX 提供了一种异步的方式,使得客户端可以无刷新地与服务器进行交互,验证用户名是否已被占用。以下是对标题和描述中所述知识点的详细解释: 1. **jQuery AJAX**: jQuery 的 AJAX 方法允许开发者在不...
【SSH2 + AJAX + jQuery + JSON 验证用户名是否存在】是一种常见的前端与后端交互技术,用于实现实时检查用户在注册或登录时输入的用户名是否已经被占用。在这个过程中,SSH2代表Secure Shell 2,通常用于服务器端的...
6. **服务器端验证逻辑**:在服务器端,Struts框架接收到Ajax请求后,会调用对应的Action,这个Action应该包含了验证用户名的逻辑。这可能涉及到数据库查询,检查用户名是否已被注册。如果用户名可用,Action会返回...
无刷新验证用户名 /* 样式定义 */ // 创建XMLHttpRequest对象 function GetO() { var ajax; if (window.XMLHttpRequest) { ajax = new XMLHttpRequest(); } else { try { ajax = new ...
这个过程可以通过结合Java后端和Ajax前端技术实现,提供实时、无刷新的用户体验。下面将详细介绍如何利用Java和Ajax来实现实时监测用户名是否存在的功能。 首先,让我们了解Java和Ajax的基础知识。Java是一种广泛...
此外,这种无刷新验证也增加了Web应用的安全性,因为可以在服务器端过滤掉一些恶意的输入,如SQL注入或跨站脚本攻击。 JSP配合AJAX技术的应用,是现代Web开发中实现动态交互和即时反馈的常用手段。它们为开发者提供...
这一过程完全在后台完成,用户界面保持不变,实现了无刷新验证。 首先,我们需要一个HTML页面作为用户界面,包含一个用于输入用户名的表单和一个用于显示验证结果的区域。HTML页面可以通过JavaScript(通常使用...