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. ThinkPHP模板继承和修改title

    先说下模板继承: 假定:在View文件夹中 -> Public  公共模块 —>base/header/top/footer 4个html文件 这下面base文件使用include引入其他 ...

  2. zookeeper不停的拒绝client连接

    1 自己重建了Zookeeper集群,但是之前的应用依赖的事务是前一个Zookeeper的集群的,所以无法识别,重启一下应用就好了

  3. C 动态内存申请

    例子: int *p=0; int number=0; scanf("%d",&number); p = (int*)malloc(number*sizeof(int));

  4. ZOJ 4097 Rescue the Princess 边双缩点+LCA

    给你一个图和三个点U,V,W  问你是否存在从U到V和从U到W的两条边不相交路径 先边双缩点 再每个连通分量搞LCA 最后LCA判 #include<bits/stdc++.h> usin ...

  5. Ubuntu 18.04实现实时显示网速

    1.添加源 sudo add-apt-repository ppa:fossfreedom/indicator-sysmonitor 2.更新源 sudo apt-get update 3.安装sys ...

  6. Hbuilder + MUI 修改App 启动的首页面

  7. GET与POST方法和用curl命令执行

    1.超文本传输协议 超文本传输协议(HTTP)的设计目的是保证客户机与服务器之间的通信,web 浏览器可能是客户端,而计算机上的网络应用程序也可能作为服务器端. HTTP的工作方式是客户机与服务器之间 ...

  8. ACM-ICPC 2017 西安赛区现场赛 A. XOR（线性基+线段树）

    题目链接:https://nanti.jisuanke.com/t/20749 参考题解:https://blog.csdn.net/Lee_w_j__/article/details/8266418 ...

  9. django.core.exceptions.ImproperlyConfigured: The included URLconf 's9luffycity.urls' does not appear to have any patterns in it. If you see valid patterns in the file then the issue is probably caused

    出现问题: $ python manage.py runserver 启动项目报错时候 raise ImproperlyConfigured(msg.format(name=self.urlconf_ ...

  10. Java数据库小项目00---基础知识

    目录 JDBC的简单使用 向JDBC注入攻击 防止注入攻击 自建JDBC工具类 自建工具类优化--使用配置文件 使用数据库连接池优化工具类 JDBC的简单使用 package Test; import ...