`

JSP+Servlet+Ajax实现后台异步检验用户信息实例

阅读更多

下面介绍JSP前台表单内容通过Ajax异步提交到后台Servlet进行校验(校验方式多种,包括提取数据库信息,校验用户名是否重复等),异步在JSP表单页面显示校验结果信息的基本过程。

一、说明:

       1.由于本文只限于介绍JSP+Servlet+Ajax运用的基本流程,重点不在于后台数据库的访问和校验内容,因此省略Servlet对数据库的访问。

二、基本流程:

      1. JSP页面login.jsp提供一个表单“form”,表单中有两个“text”类型的输入框,其中我们将用第一个输入框来做实验。

        在第一个输入框中(输入用户名),通过onblur=validate();,当用户光标离开输入框时,触发JS函数validate() ,函数validate()在Ajax.js文件中声明。

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="javascript" src="Ajax.js"></script>      
    </head>
    <body>
        <h1>Test Ajax</h1><p>
        <form action="" method="get" name="form">
            <br>
            输入用户名:
            <input type="text" size="10" maxlength="8" id="userName" name="name" onblur="validate()">
            <span id="info"></span>
            <br>
            输入商品名:
            <input type="text" size="10" maxlength="8" >
        </form>
    </body>
</html>

 
      

2、Ajax.js文件声明了一系列函数,用于完成向表单与servlet的中接处理。


2.1、函数validate()要点:

        2.1.1、通过document.getElementById(String id)获取表单中有特定id值的输入框的值,即获取用户输入的用户名。 

        2.1.2、声明一个变量url,存放要访问的servlet:"validate.do?id=" + escape(idField.value),问号?后面表示在url后添加一个值,这个值在validate.do这个servlet中可以通过request.getParameter("id")来获取。

                var url = "validate.do?id=" + escape(idField.value);

  

       2.1.3、 通过if()语句以兼容IE,Firefox等多个浏览器版本的方式创建一个XMLHttpRequest对象。

                if(window.XMLHttpRequest) {
                    //IE7, Firefox, Opera支持
                    req = new XMLHttpRequest();
                }else if(window.ActiveXObject) {
                    //IE5,IE6支持
                    req = new ActiveXObject("Microsoft.XMLHTTP");
                }

 

       2.1.4、调用XMLHttpRequest对象函数open()准备向servlet发送请求(此时只是“准备发送”,并没有发送)

                req.open("GET", url, true);

  

       2.1.5、 调用XMLHttpRequest对象函数send(param)向servlet发送请求。param参数的值null(关于send()方法使用请另外查阅)

                req.send(null);

 


       2.1.6、调用一个触发事件onreadystatechange,每当 readyState 改变时,onreadystatechange 函数就会被执行。readyState有5个可能值:0:请求未初始化(在调用open()之前);1:请求已经提出(调用send()之前);2:请求已经发送(这里通常可以从响应得到内容头部);3:请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应);4:请求已经完成(可以访问服务器响应并使用它)

                req.onreadystatechange = callback;

 

2.2、function callback()要点:

      2.2.1    XMLHttpRequest.status = 200表示服务器已经成功响应。

                  通过XMLHttpRequest.responseText获取servlet端的getPrintWriter().write()输出的响应。得到的值是 一个String类型数据。

                    var check = req.responseText;

 

2.3、通过show()函数输出结果到标签标记的位置。

 

完整的Ajax.js文件:

            var req;
            function validate() {
                //获取表单提交的内容
                var idField = document.getElementById("userName");
                //访问validate.do这个servlet,同时把获取的表单内容idField加入url字符串,以便传递给validate.do
                var url = "validate.do?id=" + escape(idField.value);                
                //创建一个XMLHttpRequest对象req
                if(window.XMLHttpRequest) {
                    //IE7, Firefox, Opera支持
                    req = new XMLHttpRequest();
                }else if(window.ActiveXObject) {
                    //IE5,IE6支持
                    req = new ActiveXObject("Microsoft.XMLHTTP");
                }
                /*
                 open(String method,String url, boolean )函数有3个参数
                 method参数指定向servlet发送请求所使用的方法,有GET,POST等
                 boolean值指定是否异步,true为使用,false为不使用。
                 我们使用异步才能体会到Ajax强大的异步功能。
                 */
                req.open("GET", url, true);
                //onreadystatechange属性存有处理服务器响应的函数,有5个取值分别代表不同状态
                req.onreadystatechange = callback;
                //send函数发送请求
                req.send(null);                
            }

            function callback() {
                if(req.readyState == 4 && req.status == 200) {
                    var check = req.responseText;
                    show (check);
                }
            }

            function show(str) {
                if(str == "OK") {
                    var show = "<font color='green'>恭喜!!用户名可用!</font>";
                    document.getElementById("info").innerHTML = show;
                }
                else if( str == "NO") {
                    var show = "<font color='red'>对不起,用户名不可用!!请重新输入!</font>";
                    document.getElementById("info").innerHTML = show;
                }
            }

 
三、servlet处理:

      重点1:通过以下几行代码设置浏览器不进行Ajax处理页面的缓存(如果出现缓存,将导致一些不可预知的麻烦) 

            response.setContentType("text/html");
            response.setHeader("Cache-Control", "no-store");
            response.setHeader("Pragma", "no-cache");
            response.setDateHeader("Expires", 0);

 
       重点2:通过request.getParameter()来获取Ajax传递的参数。

            String name = request.getParameter("id");

 

       重点3:通过response.getWriter().write()向Ajax输出参数,在Ajax一端通过var check = XMLHttpRequest.responseText获取参数值。

            if(name.equals("1")) {
                out.write("OK");
            }
            else {
                out.write("NO");
            }

 
完整的servlet代码:

package com.model;

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;


public class DoAjaxServlet extends HttpServlet {
   
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {
            response.setContentType("text/html");
            response.setHeader("Cache-Control", "no-store");
            response.setHeader("Pragma", "no-cache");
            response.setDateHeader("Expires", 0);
            String name = request.getParameter("id");
            if(name.equals("1")) {
                out.write("OK");
            }
            else {
                out.write("NO");
            }
        } finally { 
            out.close();
        }
    } 

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    } 

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    }

    @Override
    public String getServletInfo() {
        return "Short description";
    }

}

 

最后,记得在web.xml配置文件中配置这个servlet:

    <servlet>
        <servlet-name>DoAjaxServlet</servlet-name>
        <servlet-class>com.model.DoAjaxServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>DoAjaxServlet</servlet-name>
        <url-pattern>/validate.do</url-pattern>
    </servlet-mapping>

 

 

分享到:
评论

相关推荐

    基于jsp+servlet+Ajax异步登陆模拟web项目

    【基于jsp+servlet+Ajax异步登陆模拟web项目】是一个典型的Web开发实例,它整合了三种核心技术:JavaServer Pages(JSP)、Servlet以及Asynchronous JavaScript and XML(Ajax)。这个项目的核心目的是实现用户登录...

    基于JSP+JavaBean+Servlet+Ajax+Mysql的验证码 增删查改完整例子

    在IT领域,构建Web应用程序是常见的任务之一,而本示例提供了一个基于JSP、JavaBean、Servlet、Ajax以及Mysql的完整应用实例,主要涵盖了数据的增删查改(CRUD)操作,并且利用Ajax实现了异步的验证码验证功能。...

    jsp+servlet+ajax+easyui学生管理系统

    【标题】"jsp+servlet+ajax+easyui学生管理系统"是一个典型的Web应用程序开发实例,它结合了多种技术来实现一个高效、用户友好的学生管理平台。这个项目对于初学者来说是一个很好的起点,可以帮助他们理解如何在实际...

    jsp+servlet+mysql写的简易购物网站系统代码

    【标题】:“jsp+servlet+mysql写的简易购物网站系统代码”是基于Java Web技术实现的一个基本的在线购物平台。这个系统结合了Java Server Pages (JSP)、Servlet和MySQL数据库,构建了一个用户友好的交互界面和后端...

    jsp+servlet+ajax实现的超市管理系统

    在超市管理系统中,Ajax主要用于实现异步数据交换,例如,当用户在前端进行操作(如搜索商品或查看库存)时,Ajax可以向服务器发送请求,获取实时数据,然后在不刷新页面的情况下更新显示内容。这大大提升了用户体验...

    servlet+jsp+javaBean+Ajax网上购书管理系统

    它整合了Servlet、JSP、JavaBean以及Ajax技术,实现了用户友好的交互和后台数据处理。 【描述】该系统旨在提供一个高效且用户友好的在线购物体验,使用户能够方便地浏览书籍、添加到购物车、进行支付操作等。...

    JSP+Servlet+JavaBean网上订餐系统

    【JSP+Servlet+JavaBean网上订餐系统】是一个典型的Web应用程序开发实例,它整合了三种核心技术,用于构建动态、交互式的网页应用。这个系统的主要目的是实现用户在线订餐的功能,提供一个方便快捷的平台,让用户...

    基于jsp+servlet+ajax的图书管理系统.zip

    在IT行业中,构建Web应用程序是常见的任务,而“基于jsp+servlet+ajax的图书管理系统”就是一个这样的实例,它利用了Java Web技术栈来实现对图书信息的高效管理和交互。这个系统的核心组件包括JSP(JavaServer Pages...

    jsp+servlet+MySQL新闻发布系统

    用户可以通过这些页面浏览新闻、搜索信息,系统会根据用户的操作,通过Ajax异步请求或者表单提交,触发Servlet的处理。 **5. 后台管理** 后台管理界面通常也是由JSP和Servlet协作完成,管理员可以在此添加、编辑、...

    jsp+servlet+el+jquery+ajax增删改mysql

    总的来说,这个"jsp+servlet+el+jquery+ajax增删改mysql"的项目是一个典型的前后端分离的Web应用实例,通过整合这些技术,可以实现高效、友好的用户交互和数据库操作。对于学习J2EE的开发者来说,这是一个很好的起点...

    jsp+servlet+javabean实现网上商城项目完整源码

    总结起来,"jsp+servlet+javabean"实现的网上商城项目是一个典型的Web应用实例,展示了如何利用这些技术来构建一个功能完备的电子商务平台,包括用户浏览、选购商品、结账支付等一系列流程。这个项目不仅提供了丰富...

    jsp+servlet 品红项目 源代码

    "品红项目"是一个利用JSP和Servlet实现的实例,它包含了完整的源代码,提供了一系列功能,如图片展示、页面效果以及上传和下载功能。这个项目不仅展示了这两种技术的基本用法,还体现了在实际项目中的综合应用。 1....

    AJAX+servlet实例入门

    AJAX+servlet实例入门 AJAX+servlet实例入门是指通过结合AJAX技术和Servlet实现的Web应用程序。...通过这个实例,开发者可以学习如何使用AJAX和Servlet来实现异步交互、响应速度快、复杂UI的成功处理等功能。

    JSP+servlet+ajax+mysql花卉管理系统.rar

    在花卉管理系统中,JSP用于创建用户界面,展示数据,接收用户输入,并调用后台的Servlet进行业务逻辑处理。 Servlet是Java Web应用的核心组件,它运行在服务器端,负责处理HTTP请求,执行业务逻辑,并返回响应。在...

    基于JSP+servlet的网上商城

    - session对象:存储用户会话信息,实现用户登录状态的保持。 - cookie管理:另一种会话管理方式,但数据存储在客户端,安全性较低。 6. **安全与性能优化**: - 认证与授权:实现用户身份验证和权限控制,如...

    基于jsp+servlet+ajax+bootstrap 的超市管理系统.zip

    【基于jsp+servlet+ajax+bootstrap 的超市管理系统】是一个典型的Web应用开发实例,它整合了多种技术来构建一个高效、用户友好的管理平台。在这个系统中,jsp(JavaServer Pages)用于视图展示,servlet作为控制器...

    jsp+servlet+javabean+ajax的综合应用

    本项目以"jsp+servlet+javabean+ajax的综合应用"为主题,通过一个简单的实例展示了如何利用这些技术实现下拉菜单的二级联动,以及一个基本的`ajax`应用。 首先,`jsp`(JavaServer Pages)是一种基于Java的服务器端...

    Jsp+servlet写的宿舍管理系统

    系统利用Ajax技术,通过JavaScript向服务器发送异步请求,获取分页数据,实现用户体验更流畅的动态加载。 8. **Bootstrap**: Bootstrap是一个流行的前端框架,提供了一系列预设的CSS样式和JavaScript组件,用于快速...

    JSP+Ajax+Servlet 自动完成类似谷歌百度搜索

    本项目是关于构建一个使用JSP、Ajax和Servlet技术实现的自动完成搜索功能,类似于谷歌或百度搜索引擎的用户体验。这个功能在用户输入关键字时,后台会实时查询数据库并返回相关的建议搜索词,提高了搜索效率和用户...

    jsp/servlet/Ajax实现的猜数游戏

    【Ajax实现的猜数游戏】是一个基于Web技术的互动应用,它利用了Java...这个猜数游戏实例展示了如何结合JSP、Servlet和Ajax技术实现Web应用的动态交互和页面局部更新,对于学习和理解这些技术的用法具有很好的实践价值。

Global site tag (gtag.js) - Google Analytics