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. 修正Calendar的Bug

    procedure TAndroidNativeCalendarListener.onSelectedDayChange(view: JCalendarView; year, month, dayOf ...

  2. 【Struts2】 国际化

    一.概述 二.Struts2中国际化: 2.1 问题1 全局 局部 2.2 问题2 2.3 问题3 2.4 问题4 在Action中怎样使用 在JSP页面上怎样使用 一.概述 同一款软件 可以为不同用 ...

  3. Linux磁盘的管理

    文件系统 磁盘必须要有文件系统---数据库 文件系统是用来数据存储,数据库是用来管理数据 windows fat32  ntfs   exfat linux  单文件系统 inode--索引空间(文件 ...

  4. shiro系列三、ssm框架整合shiro实现权限控制

    shiro权限框架是一个非常优秀的框架,前面的几篇文章对shiro进行了非常详细的介绍和原理分析,那么接下来让我们开始在web项目中使用它(javase也能用shiro): 一.数据库表结构设计 二. ...

  5. Mac下用命令行压缩和解压rar文件的方法(转)

    废话不多说,直接进入主题 第一步:下载RAR工具包或https://www.rarlab.com/download.htm,根据自己需要下载相对应的版本 第二步:解压对应的压在的压缩包rarosx-5 ...

  6. Django 语法笔记

    Django 语法 创建项目框架 django-admin startproject 项目名 创建子app 业务分化,可以优化团队合作,可以明确找锅 python manage.py startapp ...

  7. connect: network is unreachable

    解决方法: 在确保完善网卡驱动,以及确保将网卡驱动编译进内核后,检查 ls /etc/sysconfig/network-script/ifcfg-eth0 一.看是否在上述目录下存在ifcfg-et ...

  8. golang mysql 模糊查询

    db.SqlDB.Query("SELECT id,name FROM test_table where title name like CONCAT('%',?,'%');", ...

  9. unreal 抓mobile 管线

    把renderdoc挂到生成的exe上 用命令行 “路径\xx.uproject” scenename -game -FeatureLevelES31 -windowed -resx=1920 -re ...

  10. Java8-Stream-No.01

    import java.util.ArrayList; import java.util.List; import java.util.Optional; public class Streams1 ...