1. regist.jsp文件

<%@ page language="java"  pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>

        <title>校验用户名是否存在</title>

        <script type="text/javascript" src="./regist.js"> </script>

    </head>

    <body>

    <center>

    <form action=""  enctype="application/x-www-form-urlencoded" method="post">

        <h3>请填写用户注冊信息</h3>

        <table  border="1">

            <tr>

                <td>用户名:</td>

                <td><input type="text" name="username" value="" id="username">

                  <div id="divcheck"></div>

                  <input type="button" name="checkusername" value="查看用户名" id="checkusername"></td>

            </tr>

            <tr>

                <td>密码:</td>

                <td><input type="password" name="psw" value=""></td>

            </tr>

            <tr>

                <td>确认密码:</td>

                <td><input type="password" name="confpsw" value=""></td>

            </tr>

            <tr>

                <td>出生日期:</td>

                <td><input type="text" name="birthday" value=""></td>

            </tr>

        </table>

         </form>

         </center>

    </body>

</html>

执行界面：



2.regist文件

window.onload=function(){

    document.getElementById("checkusername").onclick=function(){

        var username=document.getElementById("username").value;//获取text文本框中输入的值

        //1.获取xhr对象

        var xhr=ajaxFunction();

        //2.监听

        xhr.onreadystatechange=function(){

            if(xhr.readyState==4){

                if(xhr.status==200){

                    var data=xhr.responseText;

                    document.getElementById("divcheck").innerHTML=data;

                }

            }

        }

        //3.建立连接

        xhr.open("post","../servlet/ValidateUsernameServlet");

        //4.发送数据

        //假设请求类型是POST方式的话,须要设置请求首部信息

        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

        xhr.send("username="+username);//把文本框中输入的用户名当做參数发送给server

    }

}

function ajaxFunction(){

   var xmlHttp;

   try{ // Firefox, Opera 8.0+, Safari

        xmlHttp=new XMLHttpRequest();

    }

    catch (e){

       try{// Internet Explorer

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

          }

        catch (e){

          try{

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

          }

          catch (e){}

          }

    }

    return xmlHttp;

 }

3.ValidateUsernameServlet

package app.servlet;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class ValidateUsernameServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

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

        request.setCharacterEncoding("utf-8");

        String username = request.getParameter("username");

        //模拟数据库

        if(username==null||"".equals(username)){

            response.getWriter().write("用户名不能为空！");

        }else if("sa".equals(username)){

            response.getWriter().write("用户名已经存在");

        }else{

            response.getWriter().write("用户名能够使用");

        }

    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        doGet(request, response);

    }

}



黑马day17 ajax&amp;实现username自己主动刷新的更多相关文章

  1. html学习 - 自己主动跳转与自己主动刷新

    自己主动刷新 事实上自己主动刷新和跳转没啥差别,刷新就是跳转到本地址. 有几种办法,首先是直接在html的<head>标签里加入以下的代码. html代码 代码都放在<head> ...

  2. Spring Cache扩展：注解失效时间+主动刷新缓存

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  3. Spring Cache扩展：注解失效时间+主动刷新缓存(二)

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  4. Thinkphp+Ajax带关键词搜索列表无刷新分页实例

    Thinkphp+Ajax带关键词搜索列表无刷新分页实例,两个查询条件,分页和搜索关键字,懂的朋友还可以添加其他分页参数. 搜索#keyword和加载内容区域#ajax_lists <input ...

  5. 黑马学习ajax&json 笔记

    ## 今日内容 1. AJAX: 2. JSON # AJAX: 1. 概念: ASynchronous JavaScript And XML 异步的JavaScript 和 XML 1. 异步和同步 ...

  6. 【AJAX】AJAX实现搜索信息自己主动推荐并补全

    好久没有继续看AJAX的视频教程了,今天就将最后一个教程案例做完.我们在搜索引擎中输入文字时文本框下会提示对应的信息,这个案例就是实现这样的基本功能,代码比較粗糙还须要进一步完好,当中有些地方也须要向 ...

  7. 黑马学习Ajax 跨域资源共享 jQuery+jsonp实现

  8. 黑马学习Ajax 概念和基本使用

  9. 黑马学习AJAX jQuery发送异步请求 $.ajax() $.post() $.get()是在调用方法而不是定义方法

随机推荐

  1. .NET Core 项目经验总结：Startup.cs 介绍（二）

    原文地址(个人博客):http://www.gitblogs.com/Blogs/Details?id=643c9664-dc4e-42cf-a15f-5368ebfcd7c9 第一次面对 Start ...

  2. 利用word的VBA，为代码统一表格宽度，底色及行号

    如果文档中的代码表格时,感觉还是很快速有用的. Sub HangHao() ' ' hanghao 宏 ' ' Dim parag As Paragraph Dim nLineNum: nLineNu ...

  3. MNMP下nginx1.6开启支持pathinfo配置，支持thinkphp的URL格式

    对于thinkphp框架项目的访问格式有多种,其中pathinfo是默认的基本访问格式,格式为:http://hostname:port/index.php/模块名/action名/参数1/参数1的值 ...

  4. rpm包软件管理

    一.rpm介绍 linux服务器中所有的软件包安装方式有两种,一种是源码安装.另一种是二进制包安装(rpm)源码包安装的好处是适合不同的发行版本的linux,缺点是在编译过程中花费的时间很长,二进制包 ...

  5. spring配置文件详解以及beans:beans标签

    第一行的意思就是你这个文件的默认schema为security,所以你的beans定义就需要加上前缀beans 一般的定义文件默认都是beans: 下面是spring配置文件的详解: 转自:http: ...

  6. 动态SQL与模糊查询

    一: 1.需求 实现多条件查询用户(姓名模糊查询,年龄在指定的最小值与最大值之间) 2.结构目录 3.准备数据与建表 CREATE TABLE d_user( id int PRIMARY KEY A ...

  7. Javascript的字符串（String）操作学习

    1.bold() 方法用于把字符串显示为粗体.语法: stringObject.bold() 如下,对str进行bold操作之后,实际上时对这个字符串加了<b>标签,在文档中将以粗体进行展 ...

  8. 分类器评估方法：ROC曲线

    注:本文是人工智能研究网的学习笔记 ROC是什么 二元分类器(binary classifier)的分类结果 ROC空间 最好的预测模型在左上角,代表100%的灵敏度和0%的虚警率,被称为完美分类器. ...

  9. Centos 首次运行MySQL

    1:启动MySQL systemctl start mysqld.service 2:查看MySQL运行状态 systemctl status mysqld.service 3:查看默认密码 grep ...

  10. linux安装project lemon测评机

    (写下备用) 机子:xubuntu 16.04 LTS 1.下载lemon github地址:https://github.com/Sojiv/Project_lemon 这里download zip ...