`

ajax示例

    博客分类：
  • ajax
 
阅读更多 
CheckCodeServlet :


package web;

import java.awt.Color;
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;

import com.sun.image.codec.jpeg.JPEGCodec;
import com.sun.image.codec.jpeg.JPEGImageEncoder;

public class CheckCodeServlet extends HttpServlet {

		public void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
			response.setContentType("image/jpeg");
			// 图片的内存映像
			BufferedImage image 
			= new BufferedImage(60, 20,
					BufferedImage.TYPE_INT_RGB);
			Random r = new Random();
			// 获得画笔对象
			Graphics g = image.getGraphics();
			g.setColor(new Color(r.nextInt(255),
					r.nextInt(255), 
					r.nextInt(255)));
			g.fillRect(0, 0, 60, 20);
			g.setColor(new Color(0,0,0));
			String number = 
				String.valueOf(r.nextInt(99999)); 
			//将验证码写入session
			HttpSession session = 
				request.getSession();
			session.setAttribute("checodeNum", number);
			g.drawString(number, 5, 15);

			// 压缩成jpeg格式
			OutputStream os = 
				response.getOutputStream();
			JPEGImageEncoder encoder = 
				JPEGCodec.createJPEGEncoder(os);
			// 把BufferedImage对象中的图像信息编码后
			// 向创建该对象(encoder)时指定的输出流输出
			encoder.encode(image);
	
	}

}


 

ActionServlet:


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;

public class ActionServlet extends HttpServlet {

		public void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
			request.setCharacterEncoding("utf-8");
			String uri = request.getRequestURI();
			String path = uri.substring(uri.lastIndexOf("/"),
					uri.lastIndexOf("."));
			response.setContentType("text/html;charset=utf-8");
			PrintWriter out = response.getWriter();
			try {
				//Thread.sleep(10000);
			} catch (Exception e) {
				e.printStackTrace();
			}
			
			if(path.equals("/valiusername")){
				System.out.println("valiusername...");
				if(1==2)
					throw new ServletException("some error");
				String username = 
					request.getParameter("username");
					System.out.println("username:" + username);
					if(username.equals("zs")){
						out.println("用户名已经被占用");
					}else{
						out.println("用户名可以使用");
					}
			}else if(path.equals("/valicheckcode")){
				String number1 = request.getParameter("number");
				String number2 =
					(String) request.getSession()
					.getAttribute("checodeNum");
				if(!number1.equals(number2)){
					out.println("验证码出错");
				}else{
					out.println("验证码正确");
				}
				
			}else if(path.equals("/regist")){
				System.out.println("insert data to db!");
				out.println("<h1>regist success!</h1>");
			}
	}

}


 ajax.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<html>
	<head>
		<title>Insert title here</title>
		<script type="text/javascript" src="js/prototype1.6.js"></script>
		<script type="text/javascript">
		function getXmlHttpRequest(){
			//获得xmlHttpRequest
		   var xmlHttpRequest = null;
           if ((typeof XMLHttpRequest) != 'undefined') {
		       // FF
               xmlHttpRequest = new XMLHttpRequest();
           }else {
               xmlHttpRequest = new ActiveXObject('Microsoft.XMLHttp');
          }
          return xmlHttpRequest;
		}
		//访问服务器，查看该用户名是否可用
		function valiusername(){
			//获得XmlHttpRequest对象
			var xmlReq = getXmlHttpRequest();
			//发送请求
			xmlReq.open("get","valiusername.do?username=" + $F("username"),true);
			//注册一个回调函数
			xmlReq.onreadystatechange=function(){
				//处理服务器返回的数据,只有当服务器的数据全部返回以后，才需要处理。
				if(xmlReq.readyState == 4){
					if(xmlReq.status == 200){
						var info = xmlReq.responseText;
						$('username_msg').innerHTML=info;
					}else{
						$('username_msg').innerHTML='要访问的组件出错';
					}
				}else{
					$('username_msg').innerHTML='正在验证...';
				}
			};
			xmlReq.send(null);
	}
	
	function valiusername2(){
		var xmlReq = getXmlHttpRequest();
		xmlReq.open("post","valiusername.do",true);
		xmlReq.setRequestHeader(
               	"Content-Type",
               	"application/x-www-form-urlencoded");
        xmlReq.onreadystatechange=function(){
          	if(xmlReq.readyState == 4){
        		if(xmlReq.status == 200){
        			var info = xmlReq.responseText;
        			$('username_msg').innerHTML=info;
        		}else{
        			$('username_msg').innerHTML='要访问的组件出错';
        		}
         	}else{
        		$('username_msg').innerHTML='正在验证...';
        	}
        };
        xmlReq.send("username=" + $F('username'));
	}
	
	function valicheckcode(){
		var xmlReq = getXmlHttpRequest();
		xmlReq.open('post','valicheckcode.do',true);
		xmlReq.setRequestHeader(
               	"Content-Type",
               	"application/x-www-form-urlencoded");
         xmlReq.onreadystatechange=function(){
         	if(xmlReq.readyState == 4){
         		var info = xmlReq.responseText;
         		$('checkcode_msg').innerHTML= info;
         	}
         };
         xmlReq.send("number=" + $F('number'));
	}
	
</script>
	</head>
	<body style="font-size:30pt;">
		<form action="regist.do" method="post">
			<fieldset>
				<legend>
					regist
				</legend>
				username:
				<input type="text" name="username" id="username" onblur="valiusername();" />
				<span style="color:red;" id="username_msg"></span>
				<br />
				password:
				<input type="password" name="pwd" />
				<br />
				checkcode:<img src="checkcode" id="img1"/>
				<a href="javascript:;" onclick="document.getElementById('img1').src='checkcode?' + (new Date().getTime())">change</a>
				<input type="text" name="number" id="number" onblur="valicheckcode();"/>
				<span style="color:red;" id="checkcode_msg"></span>
				<br/>
				<input type="submit" value="confirm" />
			</fieldset>
		</form>
	</body>
</html>

 

分享到：
| jquery示例
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics