08_register.jsp

<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在</title>

  </head>

  <body>

    <form>

        用户名[GET]：<input id="usernameID" type="text" name="username" maxlength="4"/>

        光标移出后，立即检查结果

    </form>

    <hr/>

    <span id="resID"></span>

    <script type="text/javascript">

        //创建AJAX异步对象，即XMLHttpRequest

        function createAJAX(){

            var ajax = null;

            try{

                ajax = new ActiveXObject("microsoft.xmlhttp");

            }catch(e1){

                try{

                    ajax = new XMLHttpRequest();

                }catch(e2){

                    alert("你的浏览器不支持ajax，请更换浏览器");

                }

            }

            return ajax;

        }

    </script>

    <script type="text/javascript">

        //定位文本框，同时提供焦点失去事件

        document.getElementById("usernameID").onblur = function(){

            //获取文本框中输入的值

            var username = this.value;

            //如果用户没有填内容

            if(username.length == 0){

                //提示

                document.getElementById("resID").innerHTML = "用户名必填";

            }else{

                //对汉字进行UTF-8(U8)的编码

                username = encodeURI(username);

                //NO1)

                var ajax = createAJAX();

                //NO2)

                var method = "GET";

                var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime()+"&username=" + username;

                ajax.open(method,url);

                //NO3)

                ajax.send(null);

                //--------------------------------------------------------等待

                //NO4)

                ajax.onreadystatechange = function(){

                    if(ajax.readyState == 4){

                        if(ajax.status == 200){

                            //NO5)

                            var tip = ajax.responseText;

                            //NO6)

                            document.getElementById("resID").innerHTML = tip;

                        }

                    }

                }

            }

        }

    </script>

  </body>

</html>

09_register.jsp

<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在</title>

    <!-- 引入外部js文本 -->

    <script type="text/javascript" src="js/ajax.js"></script>

  </head>

  <body>

    用户名[POST]：<input id="usernameID" type="text" maxlength="4"/>

    <span id="resID">

        <!--

        <img src="tip变量" width="12px" height="12px"/>

        -->

    </span>

    <hr/>

    <script type="text/javascript">

        document.getElementById("usernameID").onblur = function(){

            var username = this.value;//杰克

            //NO1)

            var ajax = createAJAX();

            //NO2)

            var method = "POST";

            var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime();

            ajax.open(method,url);

            //设置AJAX请求头为POST，他会将请求体中的汉字自动进行UTF-8的编码

            ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");

            //NO3)

            var content = "username=" + username;

            ajax.send(content);

            //===========================================等待

            //NO4)

            ajax.onreadystatechange = function(){

                if(ajax.readyState == 4){

                    if(ajax.status == 200){

                        //NO5)

                        var tip = ajax.responseText;

                        //NO6)

                        //创建img标签

                        var imgElement = document.createElement("img");

                        //设置img标签的src/width/height的属性值

                        imgElement.src = tip;

                        imgElement.style.width = "12px";

                        imgElement.style.height = "12px";

                        //定位span标签

                        var spanElement = document.getElementById("resID");

                        //清空span标签中的内容

                        spanElement.innerHTML = "";

                        //将img标签加入到span标签中

                        spanElement.appendChild(imgElement);

                    }

                }

            }

        }

    </script>

    <!--

    <form action="" method="" enctype="application/x-www-form-urlencoded"></form>

    -->

  </body>

</html>
package loaderman.user;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

/**

 * 基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在

 */

public class UserServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {

        String username = request.getParameter("username");

        byte[] buf = username.getBytes("ISO8859-1");

        username = new String(buf,"UTF-8");

        System.out.println("username=" + username);

        String tip = "<font color='green'>可以注册</font>";

        if("杰克".equals(username)){

            tip = "<font color='red'>该用户已存在</font>";

        }

        response.setContentType("text/html;charset=UTF-8");

        PrintWriter pw = response.getWriter();

        pw.write(tip);

        pw.flush();

        pw.close();

    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {

        request.setCharacterEncoding("UTF-8");

        String username = request.getParameter("username");

        System.out.println("username=" + username);

        String tip = "images/MsgSent.gif";

        if("杰克".equals(username)){

            tip = "images/MsgError.gif";

        }

        response.setContentType("text/html;charset=UTF-8");

        PrintWriter pw = response.getWriter();

        pw.write(tip);

        pw.flush();

        pw.close();

    }

}

Ajax案例-基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在的更多相关文章

  1. Ajax案例-基于XML，以POST方式，完成省份-城市二级下拉联动

    <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC & ...

  2. js调用ajax案例

    js调用ajax案例 测试地址:http://www.w3school.com.cn/tiy/t.asp?f=ajax_get 嵌入下面代码,点击提交,再点击请求数据.就可以看到结果了. <ht ...

  3. Django-website 程序案例系列-6 ajax案例

    普通ajax案例: views.py def testajax(request): h = request.POST.get('hostname') #拿到ajax传来的值 i = request.P ...

  4. 分布式事务之——tcc-transaction分布式TCC型事务框架搭建与实战案例(基于Dubbo/Dubbox)

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/73731363 一.背景 有一定分布式开发经验的朋友都知道,产品/项目/系统最初为了 ...

  5. C#中缓存的使用 ajax请求基于restFul的WebApi(post、get、delete、put) 让 .NET 更方便的导入导出 Excel .net core api +swagger(一个简单的入门demo 使用codefirst+mysql) C# 位运算详解 c# 交错数组 c# 数组协变 C# 添加Excel表单控件（Form Controls） C#串口通信程序

    C#中缓存的使用   缓存的概念及优缺点在这里就不多做介绍,主要介绍一下使用的方法. 1.在ASP.NET中页面缓存的使用方法简单,只需要在aspx页的顶部加上一句声明即可:  <%@ Outp ...

  6. AJAX是基于现有的Internet标准

    AJAX是基于现有的Internet标准 AJAX是基于现有的Internet标准,并且联合使用它们: XMLHttpRequest 对象 (异步的与服务器交换数据) JavaScript/DOM ( ...

  7. Django---CSRF的装饰器,CSRF的流程,JSON数据格式,ajax技术(基于JQ实现)

    Django---CSRF的装饰器,CSRF的流程,JSON数据格式,ajax技术(基于JQ实现) 一丶CSRF相关的装饰器 from django.utils.decorators import m ...

  8. ajax案例_校验用户名

    目录 ajax案例_校验用户名 代码下载 需求 流程 搭建环境 开发代码 1_jsp 1_servlet 1_service.dao 2_servlet 2_jsp 测试后,功能实现,完结撒花 aja ...

  9. 数据挖掘案例:基于 ReliefF和K-means算法的应用

    数据挖掘案例:基于 ReliefF和K-means算法的应用 数据挖掘方法的提出,让人们有能力最终认识数据的真正价值,即蕴藏在数据中的信息和知识.数据挖掘(DataMiriing),指的是从大型数据库 ...

随机推荐

  1. MongoDB——理论及使用命令详解 数据库

    数据存储阶段 文件管理阶段(.txt  .doc .xls) 优点: 1 使用简单,展现直观 2 可以长期保存数据 3 可存储数据量比较大 缺点: 1 查找不方便, 2 容易造成数据冗余, 3 格式不 ...

  2. 用window.showModalDialog()打开的页面Request.UrlReferrer为null

    今天在解决一个问题,怎么也找不到解决方案.我的一个窗体是IE通过window.showModalDialog()打开的,但为了防止用户手工输的地址,所以我需要判断是通过别的页面调整获得,用Reques ...

  3. touchgfx MVP

  4. Java通过JDBC连接SQL Server2017数据库

    一.需要明白的基础知识 数据库名 驱动jar(x表示版本号) 具体驱动类 连接字符串(ip地址,端口号,名字) Oracle ojdbc-x.jar oracle.jdbc.oracleDriver ...

  5. Git---初入开源代码管理库的学习过程003

    Git常用命令总结 上接<Git 初入开源代码管理库的学习过程>学了一周Git,基本有了个认识.每一位比我厉害的,都是大牛,网上找了几篇博客和教材(感谢你们),边学习边实践用了四天,写笔记 ...

  6. javascript弹出带文字信息的提示框效果

    // position of the tooltip relative to the mouse in pixel // <html><head><meta charse ...

  7. hbase实践之写流程

    内容提要 一.写入流程 初始化ZooKeeper Session,建立长连接,获取META Region的地址. 获取rowkey对应的Region路由信息:来自.meta. 写入region 如何快 ...

  8. Bootstrap-轮播图-No.6

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  9. 错误调试以及debug的使用

    /*定义 .search 搜索*/ $.fn.UiSearch=function(){ var ui=$(this); //任何地方都可以使用断点调试:debugger; //调试时,可以在控制台输入 ...

  10. 单例模式（Singleton）---创建型

    1 单例模式的使用场景 (1)当创建一个对象所占用的资源很多,但同时又需要使用到该对象 (2)当堆系统内的资源要求统一读写时,比如读写的配置信息,此时必须要求创建的实例信息相同 (3)当有多个实例可能 ...