基于Ajax用户名验证、服务条款加载、验证码生成的实现方法__xmlHttpRequest_function_XMLHttpRequest_url_username_

当前位置: 编程技术>java/j2ee

基于Ajax用户名验证、服务条款加载、验证码生成的实现方法

来源: 互联网发布时间：2014-10-24

本文导语: Ajax(asynchronous javascript and xml)异步的javascript和xml. 是为了解决传统的web应用中"发送请求-等待响应"这种模式的弊端,(浏览器在发送完请求后,只能等待服务器的响应,用户不能做其他的操作,浏览器发送完请求,会抛弃整个...

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

是为了解决传统的web应用中"发送请求-等待响应"这种模式的弊端,(浏览器在发送完请求后,只能等待服务器的响应,用户不能做其他的操作,浏览器发送完请求,会抛弃整个页面,等待服务器返回新的页面,也就是说,浏览器和服务器之间交互的数据量很大,不能做到按需获取数据)而创建的技术,该技术的本质是：通过一个浏览器内置的一个对象(XmlHttpRequest)异步地向服务器发送请求.

所谓异步指的是浏览器并没有抛弃整个页面,也就是不是通过表单提交的方式向服务器发送数据，服务器在处理完请求之后,返回数据给XmlHttpRequest对象,通过javascript可以获取XmlHttpRequest中的数据.然后,使用该数据更新页面,整个过程当中,用户不用等待服务器的响应.

说明:网页的异步传输技术.一种不用刷新整个页面便可与服务器通讯的办法,在等待网页的传输过程中，用户依然可以和系统进行交互,页面不用刷新就可以更新内容合理的运用可以让用户感觉更好更方便,但也不要滥用

同步与异步

同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。

Eg.同步:提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式

Eg.异步:请求通过事件触发->服务器处理（这时浏览器仍然可以作其他事情）->处理完毕

Ajax的重要对象XMLHttpRequest

重要的Javascript对象，通过它提起对服务器端的请求,可以通过Javascript提起请求,如果要提起多个请求，需要多个XHR对象,请求的结果被预先定义好的方法处理

如何创建XmlHttpRequest对象

代码如下:

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

xmlHttpRequest对象的重要属性.

代码如下:

responseText: 获取服务器响应的文本数据

responseXml:获取服务器响应的xml数据

status:获取服务器返回的状态码(比如200)

readyState: 获取xmlHttpRequest与服务器通讯的状态(0、1、2、3、4,分别描述不同的状态).
(未初始化)   : 对象已建立,但是尚未初始化(尚未调用open方法)
(初始化)     : 对象已经建立,尚未调用send方法
(发送数据)   :   send方法已调用,但是当前的状态以及http头未知
(数据传送中) :    已接受部分数据。
(响应结束) : 此时，可以通过responseText/responseXml获取数据了。

xmlHttpRequest的返回数据获取方式

代码如下:

从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言一般以如下 3 种格式返回数据：
Text(又称Html格式)
XML
JSON

个人使用Ajax实现的一个应用实例

系统截图

系统说明:

系统结构图

展示前台页regist.jsp

代码如下:

    用户注册







             >> 用户注册
             [模块说明:用户名检查、服务条款使用Ajax异步处理,验证码服务端生成]




                用户名:



                   * 用户名由字母、数字、下划线组成.




                  密码:



                * 密码长度6-8位,为了安全,应避免唯一格式.




                确认密码:



                * 确认密码,以保证您设置密码时没有手误




                邮箱:



                * 输入您的常用邮箱,方便我们与您取得联系.






                验证码:




                看不清,换一张





                服务条款:

异步Ajax处理js

代码如下:

var xmlHttpRequest = getXmlHttpRequest();

        /*
          创建获取xmlHttpRequest对象的方法
         */
        function getXmlHttpRequest(){
            var xmlHttpRequest = null;
            if((typeof XMLHttpRequest) != 'undefined'){
                /*非IE浏览器创建XMLHttpRequest对象*/
                xmlHttpRequest = new XMLHttpRequest();
            }else{
                /*IE浏览器创建XMLHttpRequest对象*/
                xmlHttpRequest = new ActiveXObject('Microsoft.XMLHttp');
            }
            return xmlHttpRequest;
        }

        /*
         验证码响应事件
         */
        function getCheckcode(){
            var codeimage = document.getElementById("ckcodeimage");
            var url = "checkcode.do";
            codeimage.src=/tech-java/addTimestamp/index.html(url);
        }

        /*
           使用Ajax获取服务条款
         */
        function getRegistRuleTxt(){
            var item = document.getElementById("item");

            var url = "rulesText.do";
            //解决get方式提交时的中文编码问题,使用encodeURI(url).true表示采用异步方式发送请求,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{
                        //系统错误.
                        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表示采用异步方式发送请求,addTimestamp(url)防止浏览器缓存
            xmlHttpRequest.open("get",encodeURI(addTimestamp(url)),true);
            //调用检查返回状态的方法
            xmlHttpRequest.onreadystatechange=callback;
            xmlHttpRequest.send(null);
        }

        /*
          采用post方式验证
         */
         function postValidate(){
            var username = document.getElementById("username");
            var url = "validatename.do";
            //true表示采用异步的方法发送请求.默认就为true,请求方式可以为get、post、put、delete
            xmlHttpRequest.open('post',url,true);
            xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xmlHttpRequest.onreadystatechange=callback;
            //如果有多个参数,采用&符号链接键值对,escape用于解决中文问题
            xmlHttpRequest.send('username=' + escape(username.value));

         }


        /*
          监控状态返回的方法
         */
        function callback(){
            if(xmlHttpRequest.readyState == 4){
                if(xmlHttpRequest.status == 200){
                    var respText = xmlHttpRequest.responseText;
                    innerHtmlMsg(respText);
                }else{
                    //系统错误.
                    innerHtmlMsg("error");
                }
            }else{
                    //显示检查中...
                    innerHtmlMsg("checking");
            }
        }

        /*
          增加时间戳,防止浏览器缓存,浏览器缓存只对get方法缓存
         */
        function addTimestamp(url){
            if(url.indexOf("?")!=-1){
                //如果有参数
                return url+"×tamp=" + new Date().valueOf();
            }else{
                //没有参数
                return url+"?timestamp=" + new Date().valueOf();
            }
        }


        function innerHtmlMsg(message){
            var checkMsg = document.getElementById("checkMsg");
            if(message=='exists'){
                //用户名存在
                checkMsg.innerHTML= "* 对不起,该用户名已经存在.";
            }
            if(message=='noexists'){
                //用户名可以用
                checkMsg.innerHTML= "* 恭喜您,该用户名可用.";
            }
            if(message=='checking'){
                //系统检查中
                checkMsg.innerHTML= "* 系统正在进行数据检查...";
            }
            if(message=='error'){
                //系统出错
                checkMsg.innerHTML= "系统故障,请检查网络,或者联系我们";
            }
        }

页面样式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中的内容

代码如下:

    UserServlet
    com.webapp.servlet.UserServlet

        rulesfilepath
        /txt/item.txt

    UserServlet
    *.do

    regist.jsp

验证码输出工具类

代码如下:

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 ：苏若年    发送邮件
*
* @since      ： 1.0        创建时间:    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;        //验证码上的字符个数
    private static final int LINES = 4;     //干扰线条数
    private static final int WIDTH = 110;    //验证码图片宽
    private static final int HEIGHT = 40;    //验证码图片高
    private static final int FONT_SIZE = 21;//验证码上字体大小


    /**
     * 产生验证码
     *
     * @return Map
     *
     */
    public static Map creatCheckImage(){
        //保存产生验证码真实值的串
        StringBuffer buffer = new StringBuffer();
        //自定义图片对象
        BufferedImage image = new BufferedImage(WIDTH,HEIGHT,BufferedImage.TYPE_INT_RGB);

        Map map = new HashMap();

        Graphics graphics = image.getGraphics();
        graphics.setColor(Color.WHITE);
        graphics.fillRect(0, 0, WIDTH, HEIGHT);
        Random random = new Random();

        //画随机字符
        for(int i=0; i

您可能感兴趣的文章:

jQuery验证码插件 Ajax Fancy Capcha

jQuery.ajax 用户登录验证的代码

asp.net ajax时用alert弹出对话框与验证控件冲突的解决方法

jquery ajax 登录验证的代码

php各种验证码与Ajax验证的实例分享

S2SH整合JQuery+Ajax实现登录验证的代码

jsp+ajax实现无刷新(鼠标离开文本框即验证用户名)实现思路

Ajax实现异步刷新验证用户名是否已存在的具体方法

ajax对注册名进行验证检测是否存在于数据库中

本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。