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. Ubuntu Nginx Uwsgi Python布置服务器Django项目

     1 安装python 3.6 ubuntu预装了2.7,不需要卸载预装库,直接安装python3.6(其实现在的阿里云18.04会给你自动装python2.7.15和3.6.8) 你可以分别查看一下 ...

  2. Django—跨域请求

    同源策略 首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 而如果我们要跳过这个策略,也就是说非要跨域请求,那么就需要通过J ...

  3. Java中Static关键字详解以及静态变量和成员变量的区别

    一.static关键字的特点 (1)修饰成员变量.成员方法(2)随着类的加载而加载(3)优先于对象存在(4)被所有对象共享(5)可以通过类名调用 它本身也可以通过对象名调用 例如:main()方法由j ...

  4. Python---virtualenv + Tensorflow + 安装jupyter notebook

    一.ubuntu系统下安装完caffe后,安装 jupyter notebook. 在终端中执行,安装指令: sudo pip install jupyter 安装完成后运行 notebook : j ...

  5. layui多图上传实现删除功能

    在使用layui的多图上传时发现没有删除功能 在网上搜索解决办法时有的感觉太复杂有的不符合自己所需要的所以就自己动手 下面附上代码 HTML: <div class="layui-up ...

  6. java与JSON

    XML 格式数据极其的冗长.因为每个离散的数据片段需要大量的 XML 结构,所有有效 的数据的比例非常低.XML 语法还有轻微的模糊.还有,解析 XML 是非常占程序员的精力的.你需要提前了解详细的结 ...

  7. linux 的环境变量的配置文件

    原文:https://www.cnblogs.com/yuemw/p/8081219.html ---------------------------------------------------- ...

  8. 一个线程相关的高CPU占用问题的定位

    最近在重构项目代码时,发现两个线程同时访问一个加锁的std::list队列时,会出现恶性竞争锁的现象. 具体现象是A线程总是拿不到锁,B线程抢占几次后,A才抢占到. 由于是重构项目,也无法通过回滚代码 ...

  9. CSS样式设置小技巧

    1.水平居中设置 行内元素居中设置:如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的.代码示例如下: HTML代码 <body&g ...

  10. 题解 [BZOJ1295][SCOI2009] 最长距离

    题面 解析 \(n\)只有\(30\)可以直接枚举每个矩形, 判断他们的左上角到右下角或右上角到左上角的最短路是否小于\(T\). 最短路可以用\(dijkstra\). 一开始想用\(DP\)写最短 ...