1. regist.jsp文件

  1. <%@ page language="java"  pageEncoding="utf-8"%>
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  3. <html>
  4.     <head>
  5.         <title>校验用户名是否存在</title>
  6.         <script type="text/javascript" src="./regist.js"> </script>
  7.     </head>
  8.     <body>
  9.     <center>
  10.     <form action=""  enctype="application/x-www-form-urlencoded" method="post">
  11.         <h3>请填写用户注冊信息</h3>
  12.         <table  border="1">
  13.             <tr>
  14.                 <td>用户名:</td>
  15.                 <td><input type="text" name="username" value="" id="username">
  16.                   <div id="divcheck"></div>
  17.                   <input type="button" name="checkusername" value="查看用户名" id="checkusername"></td>
  18.             </tr>
  19.             <tr>
  20.                 <td>密码:</td>
  21.                 <td><input type="password" name="psw" value=""></td>
  22.             </tr>
  23.             <tr>
  24.                 <td>确认密码:</td>
  25.                 <td><input type="password" name="confpsw" value=""></td>
  26.             </tr>
  27.             <tr>
  28.                 <td>出生日期:</td>
  29.                 <td><input type="text" name="birthday" value=""></td>
  30.             </tr>
  31.         </table>
  32.          </form>
  33.          </center>
  34.     </body>
  36. </html>

执行界面：



2.regist文件

  1. window.onload=function(){
  2.     document.getElementById("checkusername").onclick=function(){
  3.         var username=document.getElementById("username").value;//获取text文本框中输入的值
  4.         //1.获取xhr对象
  5.         var xhr=ajaxFunction();
  6.         //2.监听
  7.         xhr.onreadystatechange=function(){
  8.             if(xhr.readyState==4){
  9.                 if(xhr.status==200){
  10.                     var data=xhr.responseText;
  11.                     document.getElementById("divcheck").innerHTML=data;
  12.                 }
  13.             }
  14.         }
  15.         //3.建立连接
  16.         xhr.open("post","../servlet/ValidateUsernameServlet");
  17.         //4.发送数据
  18.         //假设请求类型是POST方式的话,须要设置请求首部信息
  19.         xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  20.         xhr.send("username="+username);//把文本框中输入的用户名当做參数发送给server
  21.     }
  22. }
  23. function ajaxFunction(){
  24.    var xmlHttp;
  25.    try{ // Firefox, Opera 8.0+, Safari
  26.         xmlHttp=new XMLHttpRequest();
  27.     }
  28.     catch (e){
  29.        try{// Internet Explorer
  30.              xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  31.           }
  32.         catch (e){
  33.           try{
  34.              xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  35.           }
  36.           catch (e){}
  37.           }
  38.     }
  40.     return xmlHttp;
  41.  }

3.ValidateUsernameServlet

  1. package app.servlet;
  3. import java.io.IOException;
  5. import javax.servlet.ServletException;
  6. import javax.servlet.http.HttpServlet;
  7. import javax.servlet.http.HttpServletRequest;
  8. import javax.servlet.http.HttpServletResponse;
  10. public class ValidateUsernameServlet extends HttpServlet {
  12.     public void doGet(HttpServletRequest request, HttpServletResponse response)
  13.             throws ServletException, IOException {
  14.         response.setContentType("text/html;charset=utf-8");
  15.         request.setCharacterEncoding("utf-8");
  16.         String username = request.getParameter("username");
  17.         //模拟数据库
  18.         if(username==null||"".equals(username)){
  19.             response.getWriter().write("用户名不能为空！");
  20.         }else if("sa".equals(username)){
  21.             response.getWriter().write("用户名已经存在");
  22.         }else{
  23.             response.getWriter().write("用户名能够使用");
  24.         }
  25.     }
  27.     public void doPost(HttpServletRequest request, HttpServletResponse response)
  28.             throws ServletException, IOException {
  29.         doGet(request, response);
  30.     }
  32. }



黑马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. kafka一直rebalance故障，重复消费

    今天我司线上kafka消息代理出现错误日志,异常rebalance,而且平均间隔2到3分钟就会rebalance一次,分析日志发现比较严重.错误日志如下 08-09 11:01:11 131 pool ...

  2. 【LeetCode】74. Search a 2D Matrix

    Difficulty:medium  More:[目录]LeetCode Java实现 Description Write an efficient algorithm that searches f ...

  3. [过程记录]Centos7 下 Hadoop分布式集群搭建

    过程如下: 配置hosts vim /etc/hosts 格式: ip hostname ip hostname 设置免密登陆 首先:每台主机使用ssh命令连接其余主机 ssh 用户名@主机名 提示是 ...

  4. CSUOJ Water Drinking

    Description The Happy Desert is full of sands. There is only a kind of animal called camel living on ...

  5. SpringBoot详细研究-03系统集成

    据说杰克船长被黑客盗片了,看来信息安全依然任重而道远,本文以此为引子,来介绍下spring boot对于系统集成方面的支持. Spring Security提供一套安全框架,通过IOC和AOP来实现安 ...

  6. jvm在什么情况下会执行GC

    jvm在什么情况下会执行GC?[五种情况] 对象没有引用 作用域发生未捕获异常 程序在作用域正常执行完毕 程序执行了System.exit() 程序发生意外终止(被杀进程等) 什么是没有对象引用?

  7. js文字转语音并播放

    这里调用的是百度文字转语音开放API html: <div> <input type="text" id="ttsText"> < ...

  8. 任何一个大于1的自然数n，总可以拆分成若干个小于n的自然数之和。

    任何一个大于1的自然数n,总可以拆分成若干个小于n的自然数之和. 当n=7共14种拆分方法: 7=1+1+1+1+1+1+1 7=1+1+1+1+1+2 7=1+1+1+1+3 7=1+1+1+2+2 ...

  9. hdu 5775 Bubble Sort 树状数组

    Bubble Sort 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5775 Description P is a permutation of t ...

  10. PHP PSR 代码规范基本介绍

    PSR 是 PHP Standard Recommendation 的简写,即PHP推荐标准. 目前通过的规范有 PSR-0(Autoloading Standard).PSR-1(Basic Cod ...