首页 > 代码库 > Ajax简单用户的注册验证
Ajax简单用户的注册验证
Ajax的核心是XMLHttpRequest对象
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，
对网页的某部分进行更新。
例如：通过Ajax的异步刷新简单验证用户名的可用性
前端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>注册Ajax验证</title><script type="text/javascript"> function cheackUserName() { var userName=document.getElementById("userName").value;
//创建XMLHttpRequest对象：
var xmlhttp；
if(window.XMLHttpRequest)
{ //兼容IE7+，Firefox,Chrom,Opera,Safari
xmlhttp = new XMLHttpRequest();
}else{ //IE5,IE6
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){ alert(xmlHttp.responseText); var dataObj = eval("("+xmlHttp.responseText+")"); if(dataObj.exist){ document.getElementById("tip").innerHTML="该用户已经存在！"; }else{ document.getElementById("tip").innerHTML="该用户可用！"; } } };
//向服务器发送请求：
//使用XMLHttpRequest对象的open()和send()方法
xmlHttp.open("get","getInfo?action=cheackUserName&userName="+userName,true); xmlHttp.send(); }</script></head><body><table><tr> <th>用户注册</th></tr><tr> <td>用户名：</td> <td><input type="text" id="userName" name="userName" onblur="cheackUserName()"/> <font id="tip"></font></td></tr><tr> <td>密码：</td> <td><input type="text" id="password" name="password"></td></tr><tr> <td>确认密码：</td> <td><input type="text" id="password2" name="password2"></td></tr><tr> <td><input type="submit" value="http://www.mamicode.com/注册"/></td> <td><input type="reset" value="http://www.mamicode.com/重置"/></td></tr></table></body></html>
在tomcat服务器中创建一个Servlet模拟对用户名的接收以及验证：
引入Json需要的jar包：commons-beanutils-1.7.0.jar commons-lang-2.4.jar json-lib-2.2.3-jdk15.jar
commons-collections-3.2.jar commons-logging-1.0.4.jar ezmorph-1.0.3.jar
package com.cong.ajax;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;import net.sf.json.JSONObject;public class GetInfo extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setCharacterEncoding("UTF-8"); response.setContentType("text/html; charset=UTF-8"); PrintWriter out=response.getWriter(); String userName=request.getParameter("userName"); //接收浏览器传过来的数据 JSONObject resultJson=new JSONObject(); //创建JSONObject对象，引入必要的jar包 if("Hello".equals(userName)){ resultJson.put("exist", true); }else { resultJson.put("exist", false); } out.println(resultJson); out.flush(); out.close(); }}
在web.xml中配置Servlet：
<servlet> <servlet-name>getInfo</servlet-name> <servlet-class>com.cong.ajax.GetInfo</servlet-class> </servlet> <servlet-mapping> <servlet-name>getInfo</servlet-name> <url-pattern>/getInfo</url-pattern> </servlet-mapping>
Ajax简单用户的注册验证