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. Gitlab-通过API管理问题

    1. 首先获取想要创建问题的project_id字段. 2. 现在获取到了project_id字段, 现在可以通过API创建新的问题,该终端节点请求几个字段,project_id字段和问题的标题. 3 ...

  2. Gitlab-使用其它API资源

    1. Users: 执行下面的任务去管理用户 List users Get, Create , edit, and delete a user List SSH keys for a given us ...

  3. Xtreme8.0 - Kabloom dp

    Xtreme8.0 - Kabloom 题目连接: https://www.hackerrank.com/contests/ieeextreme-challenges/challenges/kablo ...

  4. 基于Servlet+JSP+JavaBean开发模式的用户登录注册

    http://www.cnblogs.com/xdp-gacl/p/3902537.html 一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBea ...

  5. U盘量产大致研究思路

    这几天搞了一波U盘量产,很多年前玩的基本都是些皮毛,比如U盘分区,U盘启动,以及台电U盘的光驱启动等等,这些现在看起来其实都不入眼,只是简单的将U盘分个区,并且没玩到主控上面去. 下面是一些自己的理解 ...

  6. [Winform]CefSharp ——js调用c#方法

    摘要 有时我们在winform中嵌入浏览器,需要在页面上读取电脑上的一些信息,这个时候就需要用到CefSharp的RegisterJsObject进行注册方法然后供js进行调用了. 一个例子 我们在w ...

  7. Snmp学习总结(六)——linux下安装和配置SNMP

    一.安装SNMP 1.1.下载Net-SNMP的源代码 选择一个SNMP版本,比如5.7.1,下载地址如下:http://sourceforge.net/projects/net-snmp/files ...

  8. 深入System.Web.Caching命名空间 教你Hold住缓存管理

    一,System .Web.Caching与缓存工作机制简介 System.Web.Caching是用来管理缓存的命名空间,其父级空间是System.Web,由此可见,缓存通常用于Web网站的开发,包 ...

  9. IIS日志文件清理

    如何清除IIS日志以释放空间 打开“我的电脑”发现10GB容量的C盘只剩余355MB“可用空间”,已经严重不够用.如下图: 如果服务器的管理员并没有在C盘存储大容量文件,而IIS中站点的访问量又非常大 ...

  10. CentOS RabbitMQ 高可用(Mirrored)

    原文:https://www.sunjianhua.cn/archives/centos-rabbitmq.html 一.RabbitMQ 单节点 1.1.Windows 版安装配置 1.1.1 安装 ...