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. linux内核内存分配（三、虚拟内存管理）

    在分析虚拟内存管理前要先看下linux内核内存的具体分配我開始就是困在这个地方.对内核内存的分类不是非常清晰.我摘录当中的一段: 内核内存地址 ============================ ...

  2. 【军哥谈CI框架】之CI中集成百度UEditor

    Hello,各位亲,新的一周来临啦,很高兴这么快又跟大家伙见面!话说上一回,军哥带大家用JQuery写了一个城市级联菜单的例子 ,不知道亲们学会了多少,是否自己可以独立写出来了呢. 军哥很是期待大家学 ...

  3. List集合去除重复对象及equals()、hashCode()方法的作用

    原文:https://blog.csdn.net/freelander_j/article/details/52211010 在java中,要将一个集合中重复的对象除去,如果这个集合中的数据类型是基本 ...

  4. 【Eclipse】Eclipse常用操作

    [文章索引] (1)POJO类自动生成Getter和Setter方法  (2)自动生成构造方法(构造函数)  (3)通过类自动生成它的接口  (4)自动生成Junit测试类  (5)定制视图  (6) ...

  5. [BZOJ2616]SPOJ PERIODNI 树形dp+组合数+逆元

    2616: SPOJ PERIODNI Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 128  Solved: 48[Submit][Status][ ...

  6. streaming优化：并行接收数据

    val numStreams = 5 val kafkaStreams = (1 to numStreams).map { i => KafkaUtils.createStream(...) } ...

  7. 【转】HTML5 API——无刷新更新地址 history.pushState/replaceState 方法

    (window.location)在通过JavaScript更改以后,浏览器都会通过刷新来到达你更改后的URL(location的意思就是位 置..) 而在JavaScript MVC开始流行之后,通 ...

  8. InnoDB的锁机制浅析(三)—幻读

    文章总共分为五个部分: InnoDB的锁机制浅析(一)-基本概念/兼容矩阵 InnoDB的锁机制浅析(二)-探索InnoDB中的锁(Record锁/Gap锁/Next-key锁/插入意向锁) Inno ...

  9. [转]C++实现平衡二叉树

    作者:Rest探路者  出处:http://www.cnblogs.com/Java-Starter/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意请保留此段声明,请在文章页面明显位置给出原文 ...

  10. 多线程学习笔记七之信号量Semaphore

    目录 简介 数据结构 示例 实现分析 构造方法 信号量的获取(公平方式) 信号量的释放(公平方式) nonfairTryAcquireShared(int acquires) 总结 简介   Sema ...