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. c run-time library 和 standard c++ library

    参考: c run-time libraries:  http://msdn.microsoft.com/zh-cn/library/vstudio/abx4dbyh(v=vs.100).aspx H ...

  2. [转] 对vuex的表象理解(笔记)

    一个东西,首先要知道为什么用它,为什么要vuex,官方解释为了解决繁杂事件订阅和广播,那么事件的$dispatch,$on,怎么就复杂了?许多人是不是感觉后者还挺简单的,对的 如果简单小型项目,那么不 ...

  3. rpm包软件管理

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

  4. SpringMVC框架05——拦截器

    1.拦截器概述 Spring MVC的拦截器(Interceptor)与Java Servlet的过滤器(Filter)类似,它主要用于拦截用户的请求并做相应的处理,通常应用在权限验证.记录请求信息的 ...

  5. [BZOJ2124]等差子序列/[CF452F]Permutation

    [BZOJ2124]等差子序列/[CF452F]Permutation 题目大意: 一个\(1\sim n\)的排列\(A_{1\sim n}\),询问是否存在\(i,j(i<j)\),使得\( ...

  6. 运维服务器手段（监控宝，Nagios，百度通告平台）

    站在"巨人"的肩膀上运维 现实问题 之前在论坛看到一个运维工程师的帖子,内容如下: "现在的一个IT工作者最头疼的就是加班,秃顶的是IT工作者最多.单身的是IT工作者最多 ...

  7. zoj 3647 智商题

    此题就是求格点中三角形的个数. 就是找出三点不共线的个数. n*m的矩形中有(n+1)*(m+1)个格点. 选出三个点的总个数为:C((n+1)*(m+1),3). 减掉共线的情况就是答案了. 首先是 ...

  8. 利用ComponentWillReceiveProps解决异步问题

    1.工作中遇到这么一个问题:有多个按钮,点击不同的按钮发送不同的请求(传的id不同)并显示弹窗,弹窗里要展示后端发送回来的数据.但是比如点击第二个按钮,弹窗里显示的仍然是第一个弹窗里的数据. 2.原因 ...

  9. 使用Automation将Azure SQL DB容灾到本地

    前段时间有个客户有如下需求,将Azure SQL Database数据库容灾到本地(备份频率1小时/次). 那么对于这样的需求,我们可以使用Azure Automation来实现自动化备份到本地. 大 ...

  10. USBDM RS08/HCS08/HCS12/Coldfire V1,2,3,4/DSC/Kinetis Debugger and Programmer -- MC9S08JM16/32/60

    Introduction The attached files provide a port of a combined TBDML/OSBDM/TBLCF code to a MC9S08JM16/ ...