ajax注册页面异步验证

wudalang_gd

浏览: 9736 次
性别:
来自: 深圳

最近访客更多访客>>

zhangpo18595451254

我也不知道我是谁

tx0717

woodding2008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

ajax的原理大家可以看上图

如何获得Ajax对象？

XMLHttpRequest没有标准化，要区分浏览器。
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
//非ie浏览器
xhr = new XMLHttpRequest();
}else{
//ie浏览器
xhr = new ActiveXObject('MicroSoft.XMLHttp');
}
return xhr;
}

下面我把代码贴出来：

1.注册页面regist.jsp

<%@page pageEncoding="utf-8" contentType="text/html;charset=utf-8" %>
<html>
	<head>
		<style>
			.tips{
				color:red;
			}
		</style>
		<script type="text/javascript" src="js/my.js"></script>
		<script type="text/javascript">
			function check_username(){
				//获得ajax对象
				var xhr = getXhr();
				//使用ajax对象发请求
				xhr.open('get',
				'check_username.do?username='
				+$F('username'),true);
				xhr.onreadystatechange=function(){
					//只有readyState等于4，才能获得
					//服务器返回的所有数据。
					if(xhr.readyState == 4){
						//判断服务器返回的数据是否正确
						if(xhr.status == 200){
							var txt = xhr.responseText;
							$('username_msg').innerHTML = txt;
						}else{
							$('username_msg').innerHTML = '验证出错';
						}
					}
				};
				$('username_msg').innerHTML = '正在验证...';
				xhr.send(null);
			}
			
			function check_number(){
				var xhr = getXhr();
				xhr.open('get',
				'check_number.do?number=' 
				+ $F('number'),true);
				xhr.onreadystatechange=function(){
					if(xhr.readyState == 4){
						var txt = xhr.responseText;
						$('number_msg').innerHTML = txt;
					}
				};
				xhr.send(null);
			}
		</script>
	</head>
	<body style="font-size:30px;font-style:italic;">
		<form action="regist.do" method="post">
			<fieldset>
				<legend>注册</legend>
				用户名:<input id="username" name="username" 
				onblur="check_username();"/>
				<span class="tips" id="username_msg"></span>
				<br/>
				真实姓名:<input name="name"/><br/>
				验证码:<input name="number" id="number" 
				onblur="check_number();"/>
				<span class="tips" id="number_msg"></span>
				<br/>
				<img src="checkcode" 
				onclick="this.src='checkcode?' + Math.random();"/><br/>
				<input type="submit" value="提交"/>
			</fieldset>
		</form>
	</body>
</html>

2.获得ajax对象my.js

function $(id){
	return document.getElementById(id);
} 

function $F(id){
	return $(id).value;
}

function getXhr() {
	var xhr = null;
	if (window.XMLHttpRequest) {
				//非ie浏览器
		xhr = new XMLHttpRequest();
	} else {
				//ie浏览器
		xhr = new ActiveXObject("MicroSoft.XMLHttp");
	}
	return xhr;
}

3.servlet验证页面ActionServlet.java

package web;

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 javax.servlet.http.HttpSession;

public class ActionServlet extends HttpServlet {

	public void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		String uri = request.getRequestURI();
		String action = uri.substring(uri.lastIndexOf("/"),
				uri.lastIndexOf("."));
		if(action.equals("/check_username")){
			
			if(1 == 2){
				throw new ServletException("ģ��һ��ϵͳ�쳣");
			}
			String username =
				request.getParameter("username");
			if(username.equals("tom")){
				out.println("用户名存在");
			}else{
				out.println("用户名未被注册");
			}
		}else if(action.equals("/check_number")){
			String number1 = 
				request.getParameter("number");
			HttpSession session =
				 request.getSession();
			String number2 = 
				(String)session.getAttribute("number");
			if(number1.equalsIgnoreCase(number2)){
				out.println("验证码正确");
			}else{
				out.println("验证码错误");
			}
		}
		out.close();
	}

}

4.画验证码CheckcodeServlet.java

package web;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

public class CheckcodeServlet extends HttpServlet {
	private int width = 80;
	private int height = 30;
	public void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		/*
		 * 绘图
		 */
			//step1,创建一个内存映像对象(画布)
		BufferedImage image = 
			new BufferedImage(width,height,
					BufferedImage.TYPE_INT_RGB);
			//step2,获得画笔
		Graphics g = image.getGraphics();
			//step3,给笔上一个颜色
		Random r = new Random();
		g.setColor(new Color(r.nextInt(255),
				r.nextInt(255),r.nextInt(255)));
			//step4,绘图,先填充背景 
			g.fillRect(0, 0, width, height);
			//step5,绘图,给画笔再设置一个颜色，用来
			//绘图
			g.setColor(new Color(0,0,0));
			g.setFont(new Font(null,Font.BOLD,20));
			String number = r.nextInt(99999) + "";
			HttpSession session = 
				request.getSession();
			session.setAttribute("number", number);
			g.drawString(number, 10, 22);
		/*
		 * 输出
		 */
			//step1,设置content-type消息头，告诉浏览器
			//返回的是一个图片
			response.setContentType("image/jpeg");
			//step2,获得一个字节输出流
			OutputStream ops = 
				response.getOutputStream();
			//step3,将原始图片压缩，然后输出
			javax.imageio.ImageIO
			.write(image, "jpeg", ops);
			ops.close();
		
	}

}

5.配置文件web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" 
	xmlns="http://java.sun.com/xml/ns/j2ee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
	http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
  <servlet>
    <servlet-name>ActionServlet</servlet-name>
    <servlet-class>web.ActionServlet</servlet-class>
  </servlet>
 <servlet>
    <servlet-name>checkcodeServlet</servlet-name>
    <servlet-class>web.CheckcodeServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>ActionServlet</servlet-name>
    <url-pattern>*.do</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>checkcodeServlet</servlet-name>
    <url-pattern>/checkcode</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

代码我都贴出来了，只是一个简单的验证，来测试一下：

ajax是一种用来改善用户体验的技术，其实质是利用浏览器提供的一个特殊的对象(XMLHttpRequest对象，一般称之为ajax对象)异步地(当ajax对象向
服务器发请求时，浏览器不会销毁当前页面，用户仍然可以对当前页面做其它的操作)向服务器发送请求。服务器返回的数据不再是一个完整的新的页面，而是部分数据，利用这些数据，更新当前页面。整个过程，页面无刷新，不打断用户的操作。

分享到：