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. 转载-对于Python中@property的理解和使用

    原文链接:https://blog.csdn.net/u013205877/article/details/77804137 重看狗书,看到对User表定义的时候有下面两行 @property def ...

  2. mysql tinyint(1) 在java中被转化为boolean

    数据库表字段类型为:tinyint 长度为1 在java中对应的类型是boolean 查询时直接在页面展示成true或false 如果是2,3,4 这样的也是默认成true,非常不友好. 解决方案: ...

  3. elasticsearch 数据备份

    ES数据备份找了一些方法,发现elasticdump 这个工具不错 elasticdump --input=http://192.168.0.92:9200/hs2840 --output ./hs2 ...

  4. 算法笔记--CDQ分治 && 整体二分

    参考:https://www.luogu.org/blog/Owencodeisking/post-xue-xi-bi-ji-cdq-fen-zhi-hu-zheng-ti-er-fen 前置技能:树 ...

  5. Python3+Appium学习笔记01-环境配置（上）

    公司可能也有关于对app自动化的一些想法,让我去研究下.当然以移动互联网的热度.对于app自动化测试技术听闻已久.也一直想要去学习.正好.这次可以在工作时间中学习.emmm.希望自己能坚持把这个系列更 ...

  6. VSCODE常用插件使用记录

    常用必备: 1.vscode-icon 让 vscode 资源树目录加上图标,必备良品! 2.Path Intellisense 自动路劲补全,默认不带这个功能的 3.beautify Beautif ...

  7. LiteOS的内核——RTOS基本的特性

    在其他的rtos中,基本上也有类似的功能,ucos freertos,要是rtos的时候,务必选择自带的rtos功能,和裸机运行时有区别的

  8. 状压dp做题笔记

    CodeChef Factorial to Square (分块决策) Description 给定一个n,要求在[1,n]中删除一些数,并使剩下的数的乘积是一个完全平方数,同时要求乘积最大,求删除方 ...

  9. @Import注解的作用

    在@Import注解的参数中可以填写类名,例如@Import(Abc.class),根据类Abc的不同类型,spring容器有以下四种处理方式: 1. 如果Abc类实现了ImportSelector接 ...

  10. python类的多态、多态性

    多态:多态指的是一类事物有多种形态 多态性: class Animal: def run(self): raise AtrributeError("子类必须实现这种方法") cla ...