快捷導(dǎo)航

基于Ajax用戶名驗(yàn)證、服務(wù)條款加載、驗(yàn)證碼生成的實(shí)現(xiàn)方法

更新時(shí)間：2013年05月06日 17:26:18 作者：

本篇文章對(duì)Ajax用戶名驗(yàn)證、服務(wù)條款加載、驗(yàn)證碼生成的實(shí)現(xiàn)方法，進(jìn)行了詳細(xì)的分析介紹。需要的朋友參考下

Ajax(asynchronous javascript and xml)異步的javascript和xml.

是為了解決傳統(tǒng)的web應(yīng)用中"發(fā)送請(qǐng)求-等待響應(yīng)"這種模式的弊端,(瀏覽器在發(fā)送完請(qǐng)求后,只能等待服務(wù)器的響應(yīng),用戶不能做其他的操作,瀏覽器發(fā)送完請(qǐng)求,會(huì)拋棄整個(gè)頁(yè)面,等待服務(wù)器返回新的頁(yè)面,也就是說(shuō),瀏覽器和服務(wù)器之間交互的數(shù)據(jù)量很大,不能做到按需獲取數(shù)據(jù))而創(chuàng)建的技術(shù),該技術(shù)的本質(zhì)是：通過(guò)一個(gè)瀏覽器內(nèi)置的一個(gè)對(duì)象(XmlHttpRequest)異步地向服務(wù)器發(fā)送請(qǐng)求.

所謂異步指的是瀏覽器并沒(méi)有拋棄整個(gè)頁(yè)面,也就是不是通過(guò)表單提交的方式向服務(wù)器發(fā)送數(shù)據(jù)，服務(wù)器在處理完請(qǐng)求之后,返回?cái)?shù)據(jù)給XmlHttpRequest對(duì)象,通過(guò)javascript可以獲取XmlHttpRequest中的數(shù)據(jù).然后,使用該數(shù)據(jù)更新頁(yè)面,整個(gè)過(guò)程當(dāng)中,用戶不用等待服務(wù)器的響應(yīng).

說(shuō)明:網(wǎng)頁(yè)的異步傳輸技術(shù).一種不用刷新整個(gè)頁(yè)面便可與服務(wù)器通訊的辦法,在等待網(wǎng)頁(yè)的傳輸過(guò)程中，用戶依然可以和系統(tǒng)進(jìn)行交互,頁(yè)面不用刷新就可以更新內(nèi)容合理的運(yùn)用可以讓用戶感覺(jué)更好更方便,但也不要濫用

同步與異步

同步是指：發(fā)送方發(fā)出數(shù)據(jù)后，等接收方發(fā)回響應(yīng)以后才發(fā)下一個(gè)數(shù)據(jù)包的通訊方式。

Eg.同步:提交請(qǐng)求->等待服務(wù)器處理->處理完畢返回這個(gè)期間客戶端瀏覽器不能干任何事異步是指：發(fā)送方發(fā)出數(shù)據(jù)后，不等接收方發(fā)回響應(yīng)，接著發(fā)送下個(gè)數(shù)據(jù)包的通訊方式

Eg.異步:請(qǐng)求通過(guò)事件觸發(fā)->服務(wù)器處理（這時(shí)瀏覽器仍然可以作其他事情）->處理完畢

Ajax的重要對(duì)象XMLHttpRequest

重要的Javascript對(duì)象，通過(guò)它提起對(duì)服務(wù)器端的請(qǐng)求,可以通過(guò)Javascript提起請(qǐng)求,如果要提起多個(gè)請(qǐng)求，需要多個(gè)XHR對(duì)象,請(qǐng)求的結(jié)果被預(yù)先定義好的方法處理

如何創(chuàng)建XmlHttpRequest對(duì)象

復(fù)制代碼代碼如下:

//獲取xmlHttpRequest對(duì)象,該對(duì)象由瀏覽器實(shí)現(xiàn)(該實(shí)現(xiàn)并沒(méi)有標(biāo)準(zhǔn)化),在創(chuàng)建該對(duì)象時(shí),要區(qū)分瀏覽器.

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();
        }
}

xmlHttpRequest對(duì)象的重要屬性.

復(fù)制代碼代碼如下:

responseText: 獲取服務(wù)器響應(yīng)的文本數(shù)據(jù)

responseXml:獲取服務(wù)器響應(yīng)的xml數(shù)據(jù)

status:獲取服務(wù)器返回的狀態(tài)碼(比如200)

readyState: 獲取xmlHttpRequest與服務(wù)器通訊的狀態(tài)(0、1、2、3、4,分別描述不同的狀態(tài)).
(未初始化)   : 對(duì)象已建立,但是尚未初始化(尚未調(diào)用open方法)
(初始化)     : 對(duì)象已經(jīng)建立,尚未調(diào)用send方法
(發(fā)送數(shù)據(jù))   :   send方法已調(diào)用,但是當(dāng)前的狀態(tài)以及http頭未知
(數(shù)據(jù)傳送中) :    已接受部分?jǐn)?shù)據(jù)。
(響應(yīng)結(jié)束) : 此時(shí)，可以通過(guò)responseText/responseXml獲取數(shù)據(jù)了。

xmlHttpRequest的返回?cái)?shù)據(jù)獲取方式

復(fù)制代碼代碼如下:

從服務(wù)器端接收數(shù)據(jù)的時(shí)候，那些數(shù)據(jù)必須以瀏覽器能夠理解的格式來(lái)發(fā)送。服務(wù)器端的編程語(yǔ)言一般以如下 3 種格式返回?cái)?shù)據(jù)：
Text(又稱Html格式)
XML
JSON

個(gè)人使用Ajax實(shí)現(xiàn)的一個(gè)應(yīng)用實(shí)例

系統(tǒng)截圖

系統(tǒng)說(shuō)明:

系統(tǒng)結(jié)構(gòu)圖

展示前臺(tái)頁(yè)regist.jsp

復(fù)制代碼代碼如下:

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>用戶注冊(cè)</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">用戶注冊(cè)</font>
             <font color="gray">[模塊說(shuō)明:用戶名檢查、服務(wù)條款使用Ajax異步處理,驗(yàn)證碼服務(wù)端生成]</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" > * 密碼長(zhǎng)度6-8位,為了安全,應(yīng)避免唯一格式.</span>
            </td>
        </tr>
        <tr>
            <td align="right" class="left" class="inpt">
                確認(rèn)密碼:
            </td>
            <td>
                <input type="password" name="repassword" id="repassword" class="inpt">    
                <span style="color:orange" id="repwdMsg" > * 確認(rèn)密碼,以保證您設(shè)置密碼時(shí)沒(méi)有手誤</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">
                驗(yàn)證碼:
            </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">
                服務(wù)條款:
            </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="同意條款并注冊(cè)" 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

復(fù)制代碼代碼如下:

var xmlHttpRequest = getXmlHttpRequest();

        /*
          創(chuàng)建獲取xmlHttpRequest對(duì)象的方法
         */
        function getXmlHttpRequest(){
            var xmlHttpRequest = null;
            if((typeof XMLHttpRequest) != 'undefined'){
                /*非IE瀏覽器創(chuàng)建XMLHttpRequest對(duì)象*/
                xmlHttpRequest = new XMLHttpRequest();
            }else{
                /*IE瀏覽器創(chuàng)建XMLHttpRequest對(duì)象*/
                xmlHttpRequest = new ActiveXObject('Microsoft.XMLHttp');
            }
            return xmlHttpRequest;
        }

        /*
         驗(yàn)證碼響應(yīng)事件
         */
        function getCheckcode(){
            var codeimage = document.getElementById("ckcodeimage");
            var url = "checkcode.do";
            codeimage.src=addTimestamp(url);
        }

        /*
           使用Ajax獲取服務(wù)條款
         */
        function getRegistRuleTxt(){
            var item = document.getElementById("item");

            var url = "rulesText.do";
            //解決get方式提交時(shí)的中文編碼問(wèn)題,使用encodeURI(url).true表示采用異步方式發(fā)送請(qǐng)求,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)錯(cuò)誤.
                        item.value="system error";
                    }
                }else{
                        //顯示檢查中...
                        item.value="loading...";
                }
            };
            xmlHttpRequest.send(null);
        }

        /*
          采用get方式驗(yàn)證
         */
        function getValidate(){
            var username = document.getElementById("username");
            var url = "validatename.do?username=" + username.value;
            //解決get方式提交時(shí)的中文編碼問(wèn)題,使用encodeURI(url).true表示采用異步方式發(fā)送請(qǐng)求,addTimestamp(url)防止瀏覽器緩存
            xmlHttpRequest.open("get",encodeURI(addTimestamp(url)),true);
            //調(diào)用檢查返回狀態(tài)的方法
            xmlHttpRequest.onreadystatechange=callback;
            xmlHttpRequest.send(null);
        }

        /*
          采用post方式驗(yàn)證
         */
         function postValidate(){
            var username = document.getElementById("username");
            var url = "validatename.do";
            //true表示采用異步的方法發(fā)送請(qǐng)求.默認(rèn)就為true,請(qǐng)求方式可以為get、post、put、delete
            xmlHttpRequest.open('post',url,true);
            xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xmlHttpRequest.onreadystatechange=callback;
            //如果有多個(gè)參數(shù),采用&符號(hào)鏈接鍵值對(duì),escape用于解決中文問(wèn)題
            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)錯(cuò)誤.
                    innerHtmlMsg("error");
                }
            }else{
                    //顯示檢查中...
                    innerHtmlMsg("checking");
            }
        }

        /*
          增加時(shí)間戳,防止瀏覽器緩存,瀏覽器緩存只對(duì)get方法緩存
         */
        function addTimestamp(url){
            if(url.indexOf("?")!=-1){
                //如果有參數(shù)
                return url+"&timestamp=" + new Date().valueOf();
            }else{
                //沒(méi)有參數(shù)
                return url+"?timestamp=" + new Date().valueOf();
            }
        }

        
        function innerHtmlMsg(message){
            var checkMsg = document.getElementById("checkMsg");
            if(message=='exists'){
                //用戶名存在
                checkMsg.innerHTML= "<font color='red'>* 對(duì)不起,該用戶名已經(jīng)存在.</font>";
            }
            if(message=='noexists'){
                //用戶名可以用
                checkMsg.innerHTML= "<font color='green'>* 恭喜您,該用戶名可用.</font>";
            }
            if(message=='checking'){
                //系統(tǒng)檢查中
                checkMsg.innerHTML= "<font color='#0099aa'>* 系統(tǒng)正在進(jìn)行數(shù)據(jù)檢查...</font>";
            }
            if(message=='error'){
                //系統(tǒng)出錯(cuò)
                checkMsg.innerHTML= "<font color='red'>系統(tǒng)故障,請(qǐng)檢查網(wǎng)絡(luò),或者<a href='#'>聯(lián)系我們</a></font>";
            }
        }

頁(yè)面樣式regist.css

復(fù)制代碼代碼如下:

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;

    } /* 定義表格的整體寬度以及邊框樣式，并且定義表格內(nèi)所有文字的樣式 */
    .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)容

復(fù)制代碼代碼如下:

<?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-mapping>
    <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>

驗(yàn)證碼輸出工具類

復(fù)制代碼代碼如下:

package com.webapp.util;

import java.awt.Color;
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)建時(shí)間:    2013-1-20        下午04:26:52
*
* @function： TODO
*
*/

public class CheckCodeImageUtil {

    private static final String[] chars = { "0", "1", "2", "3", "4", "5", "6",
        "7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I" };

    private static final int SIZE = 4;        //驗(yàn)證碼上的字符個(gè)數(shù)
    private static final int LINES = 4;     //干擾線條數(shù)
    private static final int WIDTH = 110;    //驗(yàn)證碼圖片寬
    private static final int HEIGHT = 40;    //驗(yàn)證碼圖片高
    private static final int FONT_SIZE = 21;//驗(yàn)證碼上字體大小


    /**
     * 產(chǎn)生驗(yàn)證碼
     *
     * @return Map<驗(yàn)證碼的值,驗(yàn)證碼的圖片>
     *
     */
    public static Map<String,BufferedImage> creatCheckImage(){
        //保存產(chǎn)生驗(yàn)證碼真實(shí)值的串
        StringBuffer buffer = new StringBuffer();
        //自定義圖片對(duì)象
        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();

        //畫(huà)隨機(jī)字符
        for(int i=0; i<SIZE; i++){
            //隨即獲取定義字符集中的一個(gè)元素
            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中,將來(lái)獲取時(shí)用于跟用戶輸入的值比較
        }
        //畫(huà)干擾線
        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處理類

復(fù)制代碼代碼如下:

package com.webapp.servlet;

import java.awt.image.BufferedImage;
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.imageio.ImageIO;
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.JPEGCodec;
import com.sun.image.codec.jpeg.JPEGImageEncoder;
import com.sun.imageio.plugins.common.ImageUtil;
import com.webapp.util.CheckCodeImageUtil;

public class UserServlet extends HttpServlet {

    private List<String> userList;
    private String txtFilePath = null;


    public void init() throws ServletException {
        txtFilePath = this.getInitParameter("rulesfilepath");
        //模擬數(shù)據(jù)庫(kù)
        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)生異常測(cè)試
            /*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());

        }

    }