Ajax中模拟注册效果

来源：互联网发布：网络弊大于利总结陈词编辑：程序博客网时间：2024/06/07 14:36

通过Ajax的异步请求将用户名提交到服务器，服务器端查询数据库，若该用户名不存在，则可注册；否则不能注册。而此时页面无须刷新。

<%@ page language="java"  pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>校验用户名是否存在</title><script type="text/javascript" src="./register.js"> </script></head><body><center><form action=""  enctype="application/x-www-form-urlencoded"><h3>请填写用户注册信息</h3><table  border="1"><tr><td>用户名:</td><td><input type="text" name="username" value="" id="username">  <div id="divcheck"></div>  <input type="button" name="checkusername" value="查看用户名" id="checkusername"></td></tr><tr><td>密码:</td><td><input type="password" name="psw" value=""></td></tr><tr><td>确认密码:</td><td><input type="password" name="confpsw" value=""></td></tr><tr><td>出生日期:</td><td><input type="text" name="birthday" value=""></td></tr></table> </form> </center></body></html>

window.onload = function(){document.getElementById("checkusername").onclick = function(){var username = document.getElementById("username").value;var xhr = ajaxFunction();xhr.onreadystatechange = function(){if(xhr.readyState==4){if(xhr.status==200){var data = xhr.responseText;document.getElementById("divcheck").innerHTML = data;}}}xhr.open("post","../registerServlet?timeStamp="+new Date().getTime(),true);xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xhr.send("username="+username);}function ajaxFunction(){   var xmlHttp;   try{ // Firefox, Opera 8.0+, Safari        xmlHttp=new XMLHttpRequest();    }    catch (e){   try{// Internet Explorer         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");      }    catch (e){      try{         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");      }      catch (e){}      }    }return xmlHttp; }}

RegisterServlet.java

package app.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 RegisterServlet extends HttpServlet {public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html;charset=utf-8");PrintWriter out = response.getWriter();//1 获取到请求的数据内容:usernameString username = request.getParameter("username");System.out.println("username = "+username);//2 查询数据库:1)结果集为空,用户名可用;2)结果集不为空,用户名不可用//模拟查询数据库if(username==null||"".equals(username)){out.println("请输入你的用户名!");}else if(username.equals("sa")){out.println("该用户名已存在!");}else{out.println("该用户名可使用!");}}}

0 0