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. fhq treap 学习笔记

    序 今天心血来潮,来学习一下fhq treap(其实原因是本校有个OIer名叫fh,当然不是我) 简介 fhq treap 学名好像是"非旋转式treap及可持久化"...听上去怪 ...

  2. hdu 1232 变成生成树至少还要加几条边 （并查集模板题）

    求一个图 变成生成树至少还要加几条边(成环的边要删掉,但不用统计) Sample Input4 2 //n m1 3//u v4 33 31 21 32 35 21 23 5999 00 Sample ...

  3. word2vec中的数学原理一 目录和前言

    最近在看词向量了,因为这个概念对于语言模型,nlp都比较重要,要好好的学习一下.把网上的一些资料整合一下,搞个系列. 主要参考:    word2vec 中的数学原理详解                ...

  4. vue-cli的工程模板与构建工具

    vue-cli的工程模板与构建工具 https://www.cnblogs.com/yinn/p/9712480.html 脚手架vue-cli系列二:vue-cli的工程模板与构建工具 上篇文章我们 ...

  5. 【LOJ】 #2308. 「APIO2017」商旅

    题解 分数题可以想到分数规划,我们预处理出从i到j卖什么货物赚的最多,然后把每条边的边权改成"利润 - 效率 × 时间" 用spfa找正环即可 代码 #include <bi ...

  6. Mysql安装（msi版的安装）

    上次使用绿色版的MySQL,现在使用一次安装版的,具体的步骤都是按照别人的,这里就贴一个链接,如果有时间,以后再补充上来截图. 主要参考的是下面的链接: http://www.cnblogs.com/ ...

  7. js 高阶函数（map/reduce/filter/sort）

    1.map - 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值(注:map不会对空数组进行检测,不会改变原始数组) 语法:array.map(function(currentValu ...

  8. LruCacahe在美团DSP系统中的应用演进

    背景 DSP系统是互联网广告需求方平台,用于承接媒体流量,投放广告.业务特点是并发度高,平均响应低(百毫秒). 为了能够有效提高DSP系统的性能,美团平台引入了一种带有清退机制的缓存结构LruCach ...

  9. Servlet接口、GenericServlet类、HttpServlet类

    Servlet是最顶层的接口,其提供的方法有: init(ServletConfig config):void // 初始化 getServletConfig():ServletConfig // 取 ...

  10. ArduinoYun教程之Arduino编程环境搭建

    ArduinoYun教程之Arduino编程环境搭建 Arduino编程环境搭建 通常,我们所说的Arduino一般是指我们可以实实在在看到的一块开发板,他可以是Arduino UNO.Arduino ...