1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > ajax+servlet实现注册验证(验证用户名是否存在)

ajax+servlet实现注册验证(验证用户名是否存在)

时间:2019-09-16 06:12:28

相关推荐

ajax+servlet实现注册验证(验证用户名是否存在)

做项目过程中,需要用到 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" "/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="/2001/XMLSchema-instance" xmlns="/xml/ns/javaee" xsi:schemaLocation="/xml/ns/javaee /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

的处理。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。