基于Ajax用戶名驗證、服務條款加載、驗證碼生成的實現(xiàn)方法
Ajax(asynchronous javascript and xml)異步的javascript和xml.
是為了解決傳統(tǒng)的web應用中"發(fā)送請求-等待響應"這種模式的弊端,(瀏覽器在發(fā)送完請求后,只能等待服務器的響應,用戶不能做其他的操作,瀏覽器發(fā)送完請求,會拋棄整個頁面,等待服務器返回新的頁面,也就是說,瀏覽器和服務器之間交互的數(shù)據(jù)量很大,不能做到按需獲取數(shù)據(jù))而創(chuàng)建的技術,該技術的本質(zhì)是：通過一個瀏覽器內(nèi)置的一個對象(XmlHttpRequest)異步地向服務器發(fā)送請求.
所謂異步指的是瀏覽器并沒有拋棄整個頁面,也就是不是通過表單提交的方式向服務器發(fā)送數(shù)據(jù)，服務器在處理完請求之后,返回數(shù)據(jù)給XmlHttpRequest對象,通過javascript可以獲取XmlHttpRequest中的數(shù)據(jù).然后,使用該數(shù)據(jù)更新頁面,整個過程當中,用戶不用等待服務器的響應.
說明:網(wǎng)頁的異步傳輸技術.一種不用刷新整個頁面便可與服務器通訊的辦法,在等待網(wǎng)頁的傳輸過程中，用戶依然可以和系統(tǒng)進行交互,頁面不用刷新就可以更新內(nèi)容合理的運用可以讓用戶感覺更好更方便,但也不要濫用
同步與異步
同步是指：發(fā)送方發(fā)出數(shù)據(jù)后，等接收方發(fā)回響應以后才發(fā)下一個數(shù)據(jù)包的通訊方式。
Eg.同步:提交請求->等待服務器處理->處理完畢返回 這個期間客戶端瀏覽器不能干任何事異步是指：發(fā)送方發(fā)出數(shù)據(jù)后，不等接收方發(fā)回響應，接著發(fā)送下個數(shù)據(jù)包的通訊方式
Eg.異步:請求通過事件觸發(fā)->服務器處理（這時瀏覽器仍然可以作其他事情）->處理完畢
Ajax的重要對象XMLHttpRequest
重要的Javascript對象，通過它提起對服務器端的請求,可以通過Javascript提起請求,如果要提起多個請求，需要多個XHR對象,請求的結(jié)果被預先定義好的方法處理
如何創(chuàng)建XmlHttpRequest對象 function getXmlHttpRequest(){ var xmlHttpRequest = null; if ((typeof XMLHttpRequest) != 'undefined') { //非ie瀏覽器 xmlHttpRequest = new XMLHttpRequest(); }else { //ie瀏覽器 xmlHttpRequest = new ActiveXObject('Microsoft.XMLHttp'); } return xmlHttpRequest; } 或者 function createXmlHttpRequest(){ var xmlHttpRequest = null; if(window.ActiveXObject){ xmlHttpRequest = new AvtiveXObject("Microsoft.XMLHTTP"); }else if(window.XMLHttpRequest){ xmlHttpRequest = new XMLHttpRequest(); } } responseXml:獲取服務器響應的xml數(shù)據(jù) status:獲取服務器返回的狀態(tài)碼(比如200) readyState: 獲取xmlHttpRequest與服務器通訊的狀態(tài)(0、1、2、3、4,分別描述不同的狀態(tài)).
//獲取xmlHttpRequest對象,該對象由瀏覽器實現(xiàn)(該實現(xiàn)并沒有標準化),在創(chuàng)建該對象時,要區(qū)分瀏覽器.
xmlHttpRequest對象的重要屬性.
responseText: 獲取服務器響應的文本數(shù)據(jù)
(未初始化) : 對象已建立,但是尚未初始化(尚未調(diào)用open方法)
(初始化) : 對象已經(jīng)建立,尚未調(diào)用send方法
(發(fā)送數(shù)據(jù)) : send方法已調(diào)用,但是當前的狀態(tài)以及http頭未知
(數(shù)據(jù)傳送中) : 已接受部分數(shù)據(jù)。
(響應結(jié)束) : 此時，可以通過responseText/responseXml獲取數(shù)據(jù)了。
xmlHttpRequest的返回數(shù)據(jù)獲取方式
從服務器端接收數(shù)據(jù)的時候，那些數(shù)據(jù)必須以瀏覽器能夠理解的格式來發(fā)送。服務器端的編程語言一般以如下 3 種格式返回數(shù)據(jù)：
1.Text(又稱Html格式)
2.XML
3.JSON
系統(tǒng)截圖
系統(tǒng)說明:
系統(tǒng)結(jié)構(gòu)圖
展示前臺頁regist.jsp <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> } /* 定義表格的整體寬度以及邊框樣式，并且定義表格內(nèi)所有文字的樣式 */ <servlet-mapping> import java.awt.Color; /** public class CheckCodeImageUtil { private static final String[] chars = { "0", "1", "2", "3", "4", "5", "6", import java.awt.image.BufferedImage; import javax.imageio.ImageIO; import com.sun.image.codec.jpeg.JPEGCodec; public class UserServlet extends HttpServlet { }
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
<title>用戶注冊</title>
<link href="css/regist.css" rel="stylesheet" type="text/css" />
<script src="js/regist_ajax.js" type="text/javascript"></script>
</head>
<body onload="getRegistRuleTxt(),getCheckcode()">
<form action="regist.do" onsubmit="return check(this);">
<table border="1" bordercolor="gray" cellpadding="6" align="center">
<tr>
<td colspan="2">
>> <font color="red">用戶注冊</font>
<font color="gray">[模塊說明:用戶名檢查、服務條款使用Ajax異步處理,驗證碼服務端生成]</font>
</td>
</tr>
<tr>
<td align="right" class="left">
用戶名:
</td>
<td width="580">
<input type="text" name="username" id="username" onblur="postValidate()" class="inpt"/>
<span style="color:orange" id="checkMsg" > * 用戶名由字母、數(shù)字、下劃線組成.</span>
</td>
</tr>
<tr>
<td align="right" class="left">
密碼:
</td>
<td>
<input type="password" name="password" id="password" class="inpt">
<span style="color:orange" id="pwdMsg" > * 密碼長度6-8位,為了安全,應避免唯一格式.</span>
</td>
</tr>
<tr>
<td align="right" class="left" class="inpt">
確認密碼:
</td>
<td>
<input type="password" name="repassword" id="repassword" class="inpt">
<span style="color:orange" id="repwdMsg" > * 確認密碼,以保證您設置密碼時沒有手誤</span>
</td>
</tr>
<tr>
<td align="right" class="left" class="inpt">
郵箱:
</td>
<td>
<input type="text" id="email" name="email" class="inpt">
<span style="color:orange" id="emailMsg" > * 輸入您的常用郵箱,方便我們與您取得聯(lián)系.</span>
</td>
</tr>
<tr>
<td align="right" class="left" class="inpt">
驗證碼:
</td>
<td>
<input type="text" id="checkcode" class="inpt">
<img id="ckcodeimage" src="imgsrc" style="border:solid #92CEDB 1px "> <!-- 驗證碼 -->
<a href="javascript:;" onclick="getCheckcode()">看不清,換一張</a>
<span style="color:orange" id="ckcodeMsg" > </span>
</td>
</tr>
<tr>
<td align="right" class="left">
服務條款:
</td>
<td>
<textarea rows="5" cols="48" style="margin-bottom:6px;margin-left:5px; color:gray" readonly="readonly" id="item" >
</textarea>
</td>
</tr>
<tr>
<td align="right">
</td>
<td>
<input type="submit" value="同意條款并注冊" style="width: 140px; height: 30px;"/>
</td>
</tr>
</table>
<div class="rghts" align="center">
Copyright (c) 2013 蘇若年( <a href="mailto:dennisit@163.com">聯(lián)系我們:dennisIT@163.com</a> )
corporation All Rights Reserved.
</div>
</form>
</body>
</html>
異步Ajax處理js
var xmlHttpRequest = getXmlHttpRequest();
/*
創(chuàng)建獲取xmlHttpRequest對象的方法
*/
function getXmlHttpRequest(){
var xmlHttpRequest = null;
if((typeof XMLHttpRequest) != 'undefined'){
/*非IE瀏覽器創(chuàng)建XMLHttpRequest對象*/
xmlHttpRequest = new XMLHttpRequest();
}else{
/*IE瀏覽器創(chuàng)建XMLHttpRequest對象*/
xmlHttpRequest = new ActiveXObject('Microsoft.XMLHttp');
}
return xmlHttpRequest;
}
/*
驗證碼響應事件
*/
function getCheckcode(){
var codeimage = document.getElementById("ckcodeimage");
var url = "checkcode.do";
codeimage.src=addTimestamp(url);
}
/*
使用Ajax獲取服務條款
*/
function getRegistRuleTxt(){
var item = document.getElementById("item");
var url = "rulesText.do";
//解決get方式提交時的中文編碼問題,使用encodeURI(url).true表示采用異步方式發(fā)送請求,addTimestamp(url)防止瀏覽器緩存
xmlHttpRequest.open("post",encodeURI(url),true);
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpRequest.onreadystatechange=function(){
if(xmlHttpRequest.readyState == 4){
if(xmlHttpRequest.status == 200){
var respText = xmlHttpRequest.responseText;
item.value=respText;
}else{
//系統(tǒng)錯誤.
item.value="system error";
}
}else{
//顯示檢查中...
item.value="loading...";
}
};
xmlHttpRequest.send(null);
}
/*
采用get方式驗證
*/
function getValidate(){
var username = document.getElementById("username");
var url = "validatename.do?username=" + username.value;
//解決get方式提交時的中文編碼問題,使用encodeURI(url).true表示采用異步方式發(fā)送請求,addTimestamp(url)防止瀏覽器緩存
xmlHttpRequest.open("get",encodeURI(addTimestamp(url)),true);
//調(diào)用檢查返回狀態(tài)的方法
xmlHttpRequest.onreadystatechange=callback;
xmlHttpRequest.send(null);
}
/*
采用post方式驗證
*/
function postValidate(){
var username = document.getElementById("username");
var url = "validatename.do";
//true表示采用異步的方法發(fā)送請求.默認就為true,請求方式可以為get、post、put、delete
xmlHttpRequest.open('post',url,true);
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpRequest.onreadystatechange=callback;
//如果有多個參數(shù),采用&符號鏈接鍵值對,escape用于解決中文問題
xmlHttpRequest.send('username=' + escape(username.value));
}
/*
監(jiān)控狀態(tài)返回的方法
*/
function callback(){
if(xmlHttpRequest.readyState == 4){
if(xmlHttpRequest.status == 200){
var respText = xmlHttpRequest.responseText;
innerHtmlMsg(respText);
}else{
//系統(tǒng)錯誤.
innerHtmlMsg("error");
}
}else{
//顯示檢查中...
innerHtmlMsg("checking");
}
}
/*
增加時間戳,防止瀏覽器緩存,瀏覽器緩存只對get方法緩存
*/
function addTimestamp(url){
if(url.indexOf("?")!=-1){
//如果有參數(shù)
return url+"×tamp=" + new Date().valueOf();
}else{
//沒有參數(shù)
return url+"?timestamp=" + new Date().valueOf();
}
}
function innerHtmlMsg(message){
var checkMsg = document.getElementById("checkMsg");
if(message=='exists'){
//用戶名存在
checkMsg.innerHTML= "<font color='red'>* 對不起,該用戶名已經(jīng)存在.</font>";
}
if(message=='noexists'){
//用戶名可以用
checkMsg.innerHTML= "<font color='green'>* 恭喜您,該用戶名可用.</font>";
}
if(message=='checking'){
//系統(tǒng)檢查中
checkMsg.innerHTML= "<font color='#0099aa'>* 系統(tǒng)正在進行數(shù)據(jù)檢查...</font>";
}
if(message=='error'){
//系統(tǒng)出錯
checkMsg.innerHTML= "<font color='red'>系統(tǒng)故障,請檢查網(wǎng)絡,或者<a href='#'>聯(lián)系我們</a></font>";
}
}
頁面樣式regist.css
table {
margin-top:70px;
width:780px;
border-collapse:collapse; /* 合并單元格之間的邊 */
font-size:14px;
border:1px solid gray; /*#92CEDB*/
font:normal 12px/1.5em "宋體", Verdana, Lucida, Arial, Helvetica, sans-serif;
.left{
font-weight:500;
color:#708899;
padding-right:20px;
background-color: #D6ECF5;
}
.inpt {
border:solid #92CEDB 1px;
width: 210px;
height: 22px;
margin-left: 10px;
}
.rghts{
margin-top:20px;
color:#708899;
font-size:12px;
}
Web.xml中的內(nèi)容
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<servlet-name>UserServlet</servlet-name>
<servlet-class>com.webapp.servlet.UserServlet</servlet-class>
<init-param>
<param-name>rulesfilepath</param-name>
<param-value>/txt/item.txt</param-value>
</init-param>
</servlet>
<servlet-name>UserServlet</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>regist.jsp</welcome-file>
</welcome-file-list>
</web-app>
驗證碼輸出工具類
package com.webapp.util;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.util.HashMap;
import java.util.Map;
import java.util.Random;
*
* @version ： 1.1
*
* @author ： 蘇若年 <a href="mailto:DennisIT@163.com">發(fā)送郵件</a>
*
* @since ： 1.0 創(chuàng)建時間: 2013-1-20 下午04:26:52
*
* @function： TODO
*
*/
"7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I" };
private static final int SIZE = 4; //驗證碼上的字符個數(shù)
private static final int LINES = 4; //干擾線條數(shù)
private static final int WIDTH = 110; //驗證碼圖片寬
private static final int HEIGHT = 40; //驗證碼圖片高
private static final int FONT_SIZE = 21;//驗證碼上字體大小
/**
* 產(chǎn)生驗證碼
*
* @return Map<驗證碼的值,驗證碼的圖片>
*
*/
public static Map<String,BufferedImage> creatCheckImage(){
//保存產(chǎn)生驗證碼真實值的串
StringBuffer buffer = new StringBuffer();
//自定義圖片對象
BufferedImage image = new BufferedImage(WIDTH,HEIGHT,BufferedImage.TYPE_INT_RGB);
Map<String,BufferedImage> map = new HashMap<String,BufferedImage>();
Graphics graphics = image.getGraphics();
graphics.setColor(Color.WHITE);
graphics.fillRect(0, 0, WIDTH, HEIGHT);
Random random = new Random();
//畫隨機字符
for(int i=0; i<SIZE; i++){
//隨即獲取定義字符集中的一個元素
int rand = random.nextInt(chars.length);
graphics.setColor(randomColor());
graphics.setFont(new Font(null,Font.BOLD+Font.ITALIC,FONT_SIZE));
graphics.drawString(chars[rand],(i)*WIDTH/SIZE+8 , HEIGHT/2+10);
buffer.append(chars[rand]); //將生成的字符串存入到buffer中,將來獲取時用于跟用戶輸入的值比較
}
//畫干擾線
for(int i=1;i<=LINES;i++){
graphics.setColor(randomColor());
graphics.drawLine(random.nextInt(WIDTH), random.nextInt(HEIGHT), random.nextInt(WIDTH),random.nextInt(HEIGHT));
if(i==LINES){
graphics.setFont(new Font(null,Font.ITALIC,13));
graphics.setColor(Color.GRAY);
graphics.drawString("蘇若年工作室", 5,15);
}
}
map.put(buffer.toString(), image);
return map;
}
/**
* 隨即產(chǎn)生顏色
* @return
*/
public static Color randomColor(){
Random random = new Random();
Color color = new Color(random.nextInt(256),random.nextInt(256),random.nextInt(256));
return color;
}
}
Servlet處理類
package com.webapp.servlet;
import java.io.BufferedReader;
import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileReader;
import java.io.FileWriter;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.List;
import java.util.Map;
import java.util.Vector;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.sun.image.codec.jpeg.JPEGImageEncoder;
import com.sun.imageio.plugins.common.ImageUtil;
import com.webapp.util.CheckCodeImageUtil;
private List<String> userList;
private String txtFilePath = null;
public void init() throws ServletException {
txtFilePath = this.getInitParameter("rulesfilepath");
//模擬數(shù)據(jù)庫
userList = new Vector<String>();
userList.add("zhangsan");
userList.add("lisi");
userList.add("wangwu");
userList.add("zhaoliu");
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String uri = request.getRequestURI();
String path = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
if(path.equals("/validatename")){
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}
//模擬系統(tǒng)產(chǎn)生異常測試
/*if(1==2){
throw new ServletException("some error");
}*/
String username = request.getParameter("username");
System.out.println("username:" + username);
//模擬用戶數(shù)據(jù)查詢
boolean exist = userList.contains(username);
if(exist){
response.getWriter().print("exists");
}else{
response.getWriter().print("noexists");
}
}
if(path.equals("/rulesText")){
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String filePath = this.getServletContext().getRealPath(txtFilePath);
File file = new File(filePath);
StringBuffer buffer = new StringBuffer();
try {
BufferedReader reader = new BufferedReader(new FileReader(file));
String tmp = "";
while((tmp = reader.readLine())!=null){
buffer.append(new String(tmp.getBytes("gbk"),"utf8")).append("\n");
}
reader.close();
} catch (Exception e) {
e.printStackTrace();
}
if(buffer.toString().trim()!=null){
response.getWriter().print(buffer.toString());
}
}
if(path.equals("/checkcode")){
response.setContentType("image/jpeg");
Map<String, BufferedImage> map = CheckCodeImageUtil.creatCheckImage();
String key = (String)map.keySet().iterator().next();
request.getSession().setAttribute("code",key);
System.out.println("checkcode = " + request.getSession().getAttribute("code"));
BufferedImage image = map.get(key);
ImageIO.write(image, "jpeg", response.getOutputStream());
}
}
相關文章
這篇文章主要給大家介紹了關于java高并發(fā)進程和線程的內(nèi)容，文中通過示例代碼介紹的非常詳細，對大家學習或者使用java具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2021-10-10
java實現(xiàn)裝飾器模式（Decorator Pattern）
這篇文章主要為大家詳細介紹了java實現(xiàn)裝飾器模式Decorator Pattern，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
SpringBoot整合Redis正確的實現(xiàn)分布式鎖的示例代碼
這篇文章主要介紹了SpringBoot整合Redis正確的實現(xiàn)分布式鎖的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
這篇文章主要給大家介紹了關于java整合微信支付功能的相關資料,支付是一個復雜且測試起來需要的配置特別復雜的模塊,文中給出了詳細的示例代碼,需要的朋友可以參考下2023-07-07
SpringBoot 策略模式實現(xiàn)切換上傳文件模式
策略模式是指有一定行動內(nèi)容的相對穩(wěn)定的策略名稱,這篇文章主要介紹了SpringBoot 策略模式 切換上傳文件模式,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了SpringCloud gateway跨域配置的操作，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-07-07
這篇文章主要介紹了Java編程中的性能優(yōu)化如何實現(xiàn),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了詳解JDBC對Mysql utf8mb4字符集的處理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了springboot 排除redis的自動配置操作，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-07-07
這篇文章主要為大家介紹了MQ的分類組成優(yōu)缺點測試點入門教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-05-05