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>
分享到：
相关推荐
【Ajax示例】中的知识点主要涉及使用Ajax技术实现动态数据加载和页面局部更新，特别是针对中国省份、城市、城镇联动选择列表框的应用。Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况...
以下是一个关于如何在.NET环境下创建最简单AJAX示例的详细讲解。 首先，我们需要了解AJAX的基本工作原理。它允许浏览器在不重新加载整个页面的情况下，通过JavaScript向服务器发送异步请求并接收响应数据。这提高了...
在压缩包文件"ajaxBasicJavaScript"中，可能包含了一些基础的Ajax示例代码，这些代码可能涵盖了上述步骤的实现，用于展示如何使用JavaScript进行Ajax请求。通过学习和分析这些示例，你可以更好地理解Ajax的工作原理...
在这个"html静态页JQuery ajax示例demo 源码"中，我们可以深入学习和理解AJAX在C# ASP.NET环境下的应用。 首先，AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个网页的情况下，能够更新部分网页的...
通过学习和理解这些Ajax示例源码，开发者可以更好地掌握Ajax的运用，从而在实际项目中构建更加动态和交互丰富的网页应用。无论是简单的数据获取，还是复杂的表单提交、文件上传，Ajax都能提供有效的解决方案。
这个“ajax示例java版本”应该是一个Java实现的Ajax应用，用于演示如何在后台处理和前端交互。 在Java中实现Ajax通常涉及到以下关键知识点： 1. **JavaScript库**：虽然Ajax的核心是JavaScript，但实际开发中我们...
在本资料中，我们将通过18个具体的Ajax示例，帮助你轻松掌握Ajax的核心概念和实践技巧。** ### 1. 基础概念 - **异步通信**：Ajax的核心特性，允许页面在不重新加载的情况下与服务器交互。 - **XMLHttpRequest对象*...
总之，`ajax示例 原代码`中的这三个文件展示了如何使用Ajax技术来实现动态页面更新，提供了一种非刷新方式的数据交互，增强了Web应用的交互性和响应速度。通过学习和理解这些示例，开发者可以更好地掌握Ajax的使用，...
这个“Ajax 示例”旨在展示如何使用 Ajax 技术来实现异步请求，从而获取并显示静态内容，例如系统当前时间。 **Ajax 的核心组成部分** 1. **XMLHttpRequest 对象**：这是 Ajax 的基石，它允许 JavaScript 在后台与...
在"springboot+ajax示例"中，你可能会看到以下关键知识点： 1. **SpringBoot配置**：包括创建`@SpringBootApplication`注解的主类，配置数据源，定义RESTful API接口等。例如，你可能有一个`@RestController`注解的...
总的来说，这个简单的Ajax示例展示了如何在不刷新整个页面的情况下与服务器进行通信，以及如何在Struts框架中配合使用Ajax。在实际开发中，我们还可以进一步优化，比如添加错误处理、使用Promise等现代JavaScript...
这个压缩包包含了一个使用AjaxPro控件实现的简单AJAX示例源码，通过VS2010开发。下面我们将详细探讨AjaxPro的使用方法和示例中的关键知识点。 **一、AjaxPro简介** AjaxPro是.NET框架下的一套解决方案，用于创建...
在这个“bootstrap table ajax 示例”中，我们看到一个利用 Maven 构建的项目，它展示了如何通过 AJAX 从后台动态地分页获取并显示数据。 首先，我们需要理解Maven。Maven 是一个Java项目管理工具，它帮助开发者...
此"NET3.5自带Ajax示例Demo源码"提供了如何在 Visual Studio 2010 下利用 .NET 3.5 的 AJAX 功能创建应用程序的实例。以下是这个示例程序可能包含的关键知识点： 1. **ASP.NET AJAX 控件工具包**：.NET 3.5 包含一...
在这个“dwr3ReverseAjax示例”中，我们将深入探讨如何利用DWR 3.x版本来构建一个基于Ajax的简单Web聊天应用。 首先，DWR的核心功能是通过HTTP协议实现在客户端JavaScript和服务器端Java之间的远程方法调用（Remote...
**PHP AJAX 示例源码详解** 在网页开发中，AJAX（Asynchronous JavaScript and XML）是一种在无需刷新整个页面的情况下，能够更新部分网页的技术。结合PHP，可以实现与服务器的异步交互，提升用户体验。本示例包含...
标题 "自己做的ajax示例" 描述了这是一个利用AJAX技术实现的互动功能演示，包括日历、拖放排序和星评。AJAX（Asynchronous JavaScript and XML）是一种在不刷新整个网页的情况下，与服务器交换数据并更新部分网页的...
在"Ajax示例程序"中，我们可以探索以下几个关键知识点： 1. **XMLHttpRequest对象**：这是Ajax的核心组件，用于在后台与服务器进行通信。它提供了打开、发送请求以及接收响应的方法，如open()、send()、...
总结来说，"简单的AJAX示例(JSP+servlet)"是一个演示了如何利用AJAX、JSP和Servlet来实现异步用户名验证的应用。它涉及到前端的交互设计、后端的数据处理以及web服务器的配置，是一个典型的前后端分离的开发模式实例...