效果：

精灵图（来源：从百度注册中download下来的）：

userVerify.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<style type="text/css">

    *{

        margin:0;

        padding:0;

    }

    input{

        height:24px;

    }

    span{

        display:none;

        float: right;

        position: relative;

        width: 250px;

        top: 5px;

        left: 5px;

        height: 16px;

        line-height: 14px;

        padding-left: 20px;

        background:url(img/reg_icons.png) -80px 0 no-repeat;

    }

</style>

</head>

<body>

<table>

    <tr>

        <td>用户名：</td>

        <td><input type="text" name="uname" id="uname" onblur="checkUserName()"><span id="tip"></span></td>

    </tr>

    <tr>

        <td colspan="2"><input type="button" value="注册"></td>

    </tr>

</table>

<script type="text/javascript">

    function checkUserName(){

        var uname = document.getElementById("uname").value;

        var xmlHttp;

        if(window.XMLHttpRequest){

            xmlHttp = new XMLHttpRequest();

        }else{

            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

        }

        xmlHttp.onreadystatechange = function(){

            //判断返回状态

            if(xmlHttp.readyState == 4 && xmlHttp.status == 200){

                document.getElementById("tip").style.display = "block";

                var dataObj = eval("("+xmlHttp.responseText+")");

                if(dataObj.exist == "success"){

                    document.getElementById("tip").innerText = "该用户可用！";

                    document.getElementById("tip").style.color = "#5BC92E";

                    document.getElementById("tip").style.backgroundPosition = "-80px 0";

                }else if(dataObj.exist == "error"){

                    document.getElementById("tip").innerText = "请输入用户名！";

                    document.getElementById("tip").style.color = "#fc4343";

                    document.getElementById("tip").style.backgroundPosition = "-80px -24px";

                }else{

                    document.getElementById("tip").innerText = "该用户已存在！";

                    document.getElementById("tip").style.color = "#fc4343";

                    document.getElementById("tip").style.backgroundPosition = "-80px -24px";

                }

            }

        }

        xmlHttp.open("get","checkUserName?action=checkUserName&uname="+uname,true);

        xmlHttp.send();

    }

</script>

</body>

</html>

CheckUserNameAjaxServlet.java

package com.xxc.ajax;

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;

import net.sf.json.JSONObject;

public class CheckUserNameAjaxServlet extends HttpServlet{

    /**

     *

     */

    private static final long serialVersionUID = 1L;

    @Override

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        this.doPost(req, resp);

    }

    @Override

    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        resp.setContentType("text/html;charset=utf-8");

        String action = req.getParameter("action");

        if("checkUserName".equals(action)) {

            this.checkUserName(req, resp);

        }

    }

    public void checkUserName(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        PrintWriter out = resp.getWriter();

        String uname = req.getParameter("uname");

        JSONObject resultJson = new JSONObject();//注意：使用此对象需要导入包，下面会介绍

        if(uname.trim()==null || "".equals(uname.trim())){

            resultJson.put("exist", "error");//用户名为空

        }else if("xxc".equals(uname)) {

            resultJson.put("exist", true);//用户名已存在

        }else {

            resultJson.put("exist", "success");//用户名不存在

        }

        out.println(resultJson);

        out.flush();

        out.close();

    }

}

web.xml

<servlet>

      <servlet-name>CheckUserNameAjaxServlet</servlet-name>

      <servlet-class>com.xxc.ajax.CheckUserNameAjaxServlet</servlet-class>

  </servlet>

  <servlet-mapping>

      <servlet-name>CheckUserNameAjaxServlet</servlet-name>

      <url-pattern>/checkUserName</url-pattern>

  </servlet-mapping>

实现ajax 的所需的json包（版本不一定是我所列的）：

2.ajax+servlet实现注册时用户名验证的更多相关文章

  1. 用AJAX实现页面登陆以及注册用户名验证

     AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.        AJAX 是一种用于创建快 ...

  2. PHP+Ajax 异步通讯注册验证

    HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  3. ajax基础语法、ajax做登录、ajax做用户名验证是否可用、ajax做关键字查询动态显示、ajax做用表格显示数据并增加操作列

    AJAX: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.   ...

  4. 关于ajax用户名验证和jquery实现简单表单验证

    首先来说用户名验证: 前台: <tr> <td class="tableleft">教师编号</td> <td><input ...

  5. Myeclipse+AJAX+Servlet

    最近刚开始学AJAX的知识,这里介绍一个简单的Myeclipse+AJAX+Servlet项目. 此项目包含3个文件:index.jsp.check.java.还有一个需要配置的文件是:web.xml ...

  6. Django项目：CRM(客户关系管理系统)--51--42PerfectCRM实现AJAX全局账号注册

    #urls.py """PerfectCRM URL Configuration The `urlpatterns` list routes URLs to views. ...

  7. 利用Form组件和ajax实现的注册

    一.注册相关的知识点 1.Form组件 我们一般写Form的时候都是把它写在views视图里面,那么他和我们的视图函数也不影响,我们可以吧它单另拿出来,在应用下面建一个forms.py的文件来存放 2 ...

  8. apply-register-acl 参数允许FreeSWITCH分机注册/拨打不验证密码

    今天调试 发现 注册的分机 的 `Auth-User` 居然是 `unknown` !!! 怎么回事? 仔细对比检查 发现, internal profile 指定了 `apply-register- ...

  9. 通过 jsp+ajax+servlet+webservice 远程访问天气预报服务

    通过 jsp+ajax+servlet+webservice 远程访问天气预报服务   - webservice 客户端访问的方式     1. java代码来访问     2. ajax 方式异步加 ...

随机推荐

  1. Python tkinter 副窗体置顶和取消置顶

    root = Tk() #置顶root.wm_attributes('-topmost',1) #取消置顶 root.wm_attributes('-topmost',0)

  2. C++编程语言学习资料

    C++ How to Program, 7/e (C++大学教程 第7版) 英文原版 全彩页 C++大学教程(第五版)中文版高清PDF下载 C++大学教程 第五版 (C++ How to Progra ...

  3. dll详解

    [转]http://www.cnblogs.com/xuemaxiongfeng/articles/2461632.html 不解为什么要用WINAPI宏定义,查了后发现下面的定义.于是乎需要区别 _ ...

  4. HUST软件测试1506班: 第0周作业成绩

    说明 本次公布的成绩包含三次作业的结果: 毕博平台课前测试题 第0周作业1:开设博客 第0周作业2:博客阅读和思考 如果同学对作业结果存在异议,可以: 在线平台的第一周在线答疑中创建话题申诉. 或直接 ...

  5. python 的输入和输出

    内置函数:raw_inpurt('place input') print getpass  隐藏输入密码 import getpass pwd = getpass.getpass("> ...

  6. Git & TortoiseGit

    http://www.git-scm.com/download/ http://download.tortoisegit.org/ https://help.github.com/articles/g ...

  7. JavaEE互联网轻量级框架整合开发（书籍）阅读笔记（12）:XML配置自动扫描包，自动加载*.properties文件

    一.XML和注解组合使用 前几篇的测试案例都是在Java类中配置,现在换一种使用方式,在XML中配置,使Spring IoC容器在启动之后自动去扫描配置的包路径,扫描加载指定路径下的propertie ...

  8. 编写高质量代码改善C#程序的157个建议——建议155：随生产代码一起提交单元测试代码

    建议155:随生产代码一起提交单元测试代码 首先提出一个问题:我们害怕修改代码吗?是否曾经无数次面对乱糟糟的代码,下决心进行重构,然后在一个月后的某个周一,却收到来自测试版的报告:新的版本,没有之前的 ...

  9. Linux下安装python，ftp，Ubuntu和centos配置静态ip以及下载地址

    一个服务器最多创建65535个端口Ubuntu apt-get aliyun转换https://www.cnblogs.com/hcl1991/p/7894958.htmlOpenSSLhttps:/ ...

  10. Discovering Gold LightOJ - 1030 （概率dp）

    You are in a cave, a long cave! The cave can be represented by a 1 x N grid. Each cell of the cave c ...