ajax+servlet实现注册验证(验证用户名是否存在)
2017-04-19 15:07
1246 查看
做项目过程中,需要用到 ajax 实时验证注册的用户名是否已经存在。所以写了一个小例子,经过测试直接可用。
主要分为4个文件,分别为 web.xml 文件,login.jsp文件,login.js 以及
LoginServlet.java文件。
在eclipse中新建项目,文件的存放树如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/15/2478b858ffc0f5e87950682ba1de8571)
注意引进所需的 jar 包.
1 . login.jsp
2 . login.js
3 . web.xml
4 . LoginServlet.java
效果展示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/15/b7939da2942896dea8ee3b68425d43e0)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/15/33090f26b341739b92393328d594775f)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/15/ddf2fc47a3ab911cff2120b8d7412f3d)
关于ajax验证的过程—-》需要验证两部分:
1 .验证ajax的状态,通过 readyState 状态码来验证 0-4
2 . 验证返回的状态码是否为200或者304
做完这个小例子之后,我将servlet+ajax 和我之前写的项目结合到了一起。
之前的项目我用struts2框架写的,所以我将servlet+ajax+struts2结合到了一起去,并且成功运行。
需要注意的是默认情况下struts会拦截servlet的请求,所以我们只需要修改和servlet处理有关的配置文件就行,在web.xml配置文件中找到servlet的配置路径,加入.servlet后缀名。在ajax处理的.js文件中,找到servlet处理的路径,加入.servlet后缀名。如下图所示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/15/58c7a616cfd982921ec0dab8e05798f6)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201911/15/6133cd8b97fd742b3f30c8e2305eb873)
修改这两处就能避免struts2拦截servlet的请求,实现servlet+strut2+ajax
的处理。
主要分为4个文件,分别为 web.xml 文件,login.jsp文件,login.js 以及
LoginServlet.java文件。
在eclipse中新建项目,文件的存放树如下:
注意引进所需的 jar 包.
1 . login.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 type="text/javascript" src="./login.js"></script> </head> <body> <form action="" enctype="application/x-www-form-urlencoded" > 用户名:<input type="text" name="username" value="" id="username"> <div id="divcheck"></div> <input type="button" name="checkusername" value="查看用户名" id="checkusername"/> </form> </body> </html>
login.jsp 即界面,在login.jsp中引入.js文件用来做ajax处理。
2 . login.js
window.onload = function() { //通过id获取页面button的onclick点击事件 document.getElementById("checkusername").onclick = function() { var username = document.getElementById("username").value; //测试打印出username(输入值) alert(username); //1.创建ajax对象 var xhr = ajaxFunction(); xhr.onreadystatechange = function() { //处理后台返回的数据 if(xhr.readyState == 4) { if(xhr.status == 200) { var data= xhr.responseText; document.getElementById("divcheck").innerHTML = data; } } } //规定发送数据的形式(post/get),url,以及传输方式(同步/异步) xhr.open("post","./LoginServlet?timeStamp="+new Date().getTime(),true); //post方式需要加下边这句,get方式不需要 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //将页面输入数据发送到后台 xhr.send("username="+username); } } function ajaxFunction() { var xmlHttp; try { xmlHttp = new XMLHttpRequest(); } catch(e) { try { xmlHttp = new ActiveXObject("Msxm12.XMLHTTP"); } catch(e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} } } return xmlHttp; }
在.js文件中进行ajax的处理过程,处理过程分为4个阶段 1.创建ajax对象(XMLHttpRequest对象) 2.与服务器建立连接 3.客户端发送请求数据到服务器 4.服务器返回响应到客户端,客户端接收响应。 需要注意的是,第一步创建XMLHttpRequest对象,之后所有的操作都是针对于这个对象的属性来完成的。
3 . web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0"> <welcome-file-list> <welcome-file>register.jsp</welcome-file> </welcome-file-list> <servlet> <servlet-name>LoginServlet</servlet-name> <servlet-class>com.test.Servlet.LoginServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>LoginServlet</servlet-name> <url-pattern>/LoginServlet</url-pattern> </servlet-mapping> </web-app>
web.xml是配置文件,配置前台页面和后台Servlet的映射关系,注意url路径的对应。
4 . LoginServlet.java
package com.test.Servlet; 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 LoginServlet extends HttpServlet { public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException { doPost(request,response); } public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{ response.setContentType("text/html;charset=utf-8"); //定义输出流 PrintWriter out = response.getWriter(); //获取前端页面输入数据 String username = request.getParameter("username"); //测试打印,测试接收前台数据是否成功 System.out.println(username); //进行比较并作出响应。 if(username==null || username.equals("")) { out.println("请输入用户名 "); } else if("sa".equals(username)) { out.println("该用户名已经存在"); } else { out.println("可以注册"); } } }
效果展示:
关于ajax验证的过程—-》需要验证两部分:
1 .验证ajax的状态,通过 readyState 状态码来验证 0-4
0 表示未初始化,还没有调用open方法 1 表示已经初始化,但是没有发送请求,即没有调用send方法,即正在加载 2 表示加载完毕,send已经被调用,请求开始 3 代表交互中,服务器正在发送响应 4 代表交互完成
2 . 验证返回的状态码是否为200或者304
404 没有找到页面 403 禁止访问 500 访问出错 200 一切正常 304 源文件没有被修改
做完这个小例子之后,我将servlet+ajax 和我之前写的项目结合到了一起。
之前的项目我用struts2框架写的,所以我将servlet+ajax+struts2结合到了一起去,并且成功运行。
需要注意的是默认情况下struts会拦截servlet的请求,所以我们只需要修改和servlet处理有关的配置文件就行,在web.xml配置文件中找到servlet的配置路径,加入.servlet后缀名。在ajax处理的.js文件中,找到servlet处理的路径,加入.servlet后缀名。如下图所示:
修改这两处就能避免struts2拦截servlet的请求,实现servlet+strut2+ajax
的处理。
相关文章推荐
- ajax,servlet实现无刷新验证用户名是否存在
- Ajax验证用户名是否已经注册(Servlet实现)
- jsp注册页面,Ajax实现验证用户名是否存在,密码是否一致,当不存在时,注册按钮变成灰色。
- 基于jQuery实现的Ajax 验证用户名是否存在的实现代码
- Ajax实现异步刷新验证用户名是否已存在的具体方法
- jQuery结合Ajax实现用户名是否存在的验证代码
- Jquery与ajax结合实现验证用户名(邮箱是否)已经被注册过
- Ajax实现无刷新验证用户名是否存在 (使用AjaxPro.2.dll)(当鼠标离开输入框时,即使判断用户名是否存在)
- 艾伟_转载:利用jQuery实现的Ajax 验证用户名是否存在
- Ajax实现异步刷新验证用户名是否已存在的具体方法
- 利用jQuery实现的Ajax 验证用户名是否存在
- ajax实现无刷新验证用户名是否存在
- JS实现AJAX提交数据到后台,实现验证用户名是否存在功能详解
- struts+ajax验证注册用户名是否存在
- php+ajax 注册验证用户名是否存在实例
- JS实现AJAX提交数据到后台,实现验证用户名是否存在功能详解
- (2010-08-22)利用jQuery实现的Ajax 验证用户名是否存在
- 基于jQuery实现的Ajax 验证用户名是否存在的实现代码
- 毕业设计(十)---用DWR实现 代替AJAX 用户注册检测用户名是否已经存在
- 基于jQuery实现的Ajax 验证用户名是否存在的实现代码