转自：http://blog.csdn.net/rushkid02/article/details/7515058

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

一、说明：

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

二、基本流程：

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

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

  1. <%@page contentType="text/html" pageEncoding="UTF-8"%>
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  3. "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <script type="javascript" src="Ajax.js"></script>
  8. </head>
  9. <body>
  10. <h1>Test Ajax</h1><p>
  11. <form action="" method="get" name="form">
  12. <br>
  13. 输入用户名：
  14. <input type="text" size="10" maxlength="8" id="userName" name="name" onblur="validate()">
  15. <span id="info"></span>
  16. <br>
  17. 输入商品名：
  18. <input type="text" size="10" maxlength="8" >
  19. </form>
  20. </body>
  21. </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")来获取。

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

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

  1. if(window.XMLHttpRequest) {
  2. //IE7, Firefox, Opera支持
  3. req = new XMLHttpRequest();
  4. }else if(window.ActiveXObject) {
  5. //IE5,IE6支持
  6. req = new ActiveXObject("Microsoft.XMLHTTP");
  7. }

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

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

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

  1. req.send(null);

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

  1. req.onreadystatechange = callback;

2.2、function callback()要点：

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

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

  1. var check = req.responseText;

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

完整的Ajax.js文件：

  1. var req;
  2. function validate() {
  3. //获取表单提交的内容
  4. var idField = document.getElementById("userName");
  5. //访问validate.do这个servlet，同时把获取的表单内容idField加入url字符串，以便传递给validate.do
  6. var url = "validate.do?id=" + escape(idField.value);
  7. //创建一个XMLHttpRequest对象req
  8. if(window.XMLHttpRequest) {
  9. //IE7, Firefox, Opera支持
  10. req = new XMLHttpRequest();
  11. }else if(window.ActiveXObject) {
  12. //IE5,IE6支持
  13. req = new ActiveXObject("Microsoft.XMLHTTP");
  14. }
  15. /*
  16. open(String method,String url, boolean )函数有3个参数
  17. method参数指定向servlet发送请求所使用的方法，有GET,POST等
  18. boolean值指定是否异步，true为使用，false为不使用。
  19. 我们使用异步才能体会到Ajax强大的异步功能。
  20. */
  21. req.open("GET", url, true);
  22. //onreadystatechange属性存有处理服务器响应的函数,有5个取值分别代表不同状态
  23. req.onreadystatechange = callback;
  24. //send函数发送请求
  25. req.send(null);
  26. }
  27. function callback() {
  28. if(req.readyState == 4 && req.status == 200) {
  29. var check = req.responseText;
  30. show (check);
  31. }
  32. }
  33. function show(str) {
  34. if(str == "OK") {
  35. var show = "<font color='green'>恭喜！！用户名可用！</font>";
  36. document.getElementById("info").innerHTML = show;
  37. }
  38. else if( str == "NO") {
  39. var show = "<font color='red'>对不起，用户名不可用！！请重新输入！</font>";
  40. document.getElementById("info").innerHTML = show;
  41. }
  42. }

三、servlet处理：

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

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

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

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

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

  1. if(name.equals("1")) {
  2. out.write("OK");
  3. }
  4. else {
  5. out.write("NO");
  6. }

完整的servlet代码：

  1. package com.model;
  2. import java.io.IOException;
  3. import java.io.PrintWriter;
  4. import javax.servlet.ServletException;
  5. import javax.servlet.http.HttpServlet;
  6. import javax.servlet.http.HttpServletRequest;
  7. import javax.servlet.http.HttpServletResponse;
  8. public class DoAjaxServlet extends HttpServlet {
  9. protected void processRequest(HttpServletRequest request, HttpServletResponse response)
  10. throws ServletException, IOException {
  11. response.setContentType("text/html;charset=UTF-8");
  12. PrintWriter out = response.getWriter();
  13. try {
  14. response.setContentType("text/html");
  15. response.setHeader("Cache-Control", "no-store");
  16. response.setHeader("Pragma", "no-cache");
  17. response.setDateHeader("Expires", 0);
  18. String name = request.getParameter("id");
  19. if(name.equals("1")) {
  20. out.write("OK");
  21. }
  22. else {
  23. out.write("NO");
  24. }
  25. } finally {
  26. out.close();
  27. }
  28. }
  29. @Override
  30. protected void doGet(HttpServletRequest request, HttpServletResponse response)
  31. throws ServletException, IOException {
  32. processRequest(request, response);
  33. }
  34. @Override
  35. protected void doPost(HttpServletRequest request, HttpServletResponse response)
  36. throws ServletException, IOException {
  37. processRequest(request, response);
  38. }
  39. @Override
  40. public String getServletInfo() {
  41. return "Short description";
  42. }
  43. }

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

    1. <servlet>
    2. <servlet-name>DoAjaxServlet</servlet-name>
    3. <servlet-class>com.model.DoAjaxServlet</servlet-class>
    4. </servlet>
    5. <servlet-mapping>
    6. <servlet-name>DoAjaxServlet</servlet-name>
    7. <url-pattern>/validate.do</url-pattern>
    8. </servlet-mapping>

jsp ajax 数据库Demo的更多相关文章

  1. jsp+ajax实现无刷新

    jsp+ajax实现无刷新,鼠标离开文本框即验证用户名 jsp+ajax实现无刷新,鼠标离开文本框即验证用户名(本功能多用于注册) input.jsp(表单提交页面): %@ page content ...

  2. jsp链接数据库

    数据库表代码: /*Navicat MySQL Data Transfer Source Server : localhost_3306Source Server Version : 50528Sou ...

  3. JSP+Ajax站点开发小知识

    一.JSP基础 1.<select  name="love"  size="3">当中的size属性指定了列表框显示选项的条数.假设全部选项多于这个 ...

  4. jsp与数据库的连接

    经过一段时间的学习与上网查资料,我已经成功的用java语言连接上了数据库, 本以为同理jsp跟数据库的连接肯定水到渠成的,但是在经过尝试很多次后我发现现实永远是骨感的,最终结果是花了一个下午的时间去建 ...

  5. springMVC+jsp+ajax上传文件

    工作中遇到的小问题,做个笔记 实现springMVC + jsp + ajax 上传文件 HTML <body> <form id="myform" method ...

  6. 第一个ajax小demo

    第一个ajax小demo 文章来源:http://blog.csdn.net/magi1201/article/details/44569657

  7. 通过 jsp+ajax+servlet+webservice 远程访问天气预报服务

    通过 jsp+ajax+servlet+webservice 远程访问天气预报服务   - webservice 客户端访问的方式     1. java代码来访问     2. ajax 方式异步加 ...

  8. JSP-Runoob：JSP 链接数据库

    ylbtech-JSP-Runoob:JSP 链接数据库 1.返回顶部 1. JSP 连接数据库 本教程假定您已经了解了 JDBC 应用程序的工作方式.在您开始学习 JSP 数据库访问之前,请访问 J ...

  9. java jdbc使用SSH隧道连接mysql数据库demo

    java jdbc使用SSH隧道连接mysql数据库demo   本文链接:https://blog.csdn.net/earbao/article/details/50216999   packag ...

随机推荐

  1. 梦想CAD控件安卓选择集

    在本示例中将使用构造选择集对被过滤对象进行过滤,该类封装了选择集及其处理函数,支持如下过滤条件. 参数类型 类型 RTDXF0 TEXT 文字 MTEXT 多行文字 CIRCLE 圆 ARC 圆弧 L ...

  2. ThinkPHP---TP功能类之公文管理功能2----------继续完善

    [前言] 之前已经完成了公文的添加和列表展示功能,今天继续完善.做下公文的编辑和删除功能. [主体] (1)分析 控制器:DocController.class.php 方法:edit(将模板展示和数 ...

  3. php第二十九节课

    文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...

  4. 40条常见的移动端Web页面问题解决方案

    1.安卓浏览器看背景图片,有些设备会模糊.想让图片在手机里显示更为清晰,必须使用2x的背景图来代替img标签(一般情况都是用2倍).例如一个div的宽高是100100,背景图必须得200200,然后b ...

  5. Daydreaming Stockbroker(2016 NCPC 贪心)

    题目: Gina Reed, the famous stockbroker, is having a slow day at work, and between rounds of solitaire ...

  6. tarjan求强连通分量模板

    什么是强连通分量? 百度百科 有向图强连通分量:在有向图G中,如果两个顶点vi,vj间(vi>vj)有一条从vi到vj的有向路径,同时还有一条从vj到vi的有向路径,则称两个顶点强连通(stro ...

  7. Android jdbc连接mysql报错解决方案 (Communications link failure)

    最近调试安卓连接mysql真是心态爆炸,快两天才搞出来.以下整理一些常见问题. 检查manifest文件里网络权限是否打开 检查数据库IP是否有问题(包括一些沙雕错误,比如是不是在ip首或尾多了个空格 ...

  8. python之cookbook-day02

    第一章:数据结构和算法 1.2 解压可迭代对象赋值给多个变量 问题: 如果一个可迭代对象的元素个数超过变量个数时,会抛出一个 ValueError .那么 怎样才能从这个可迭代对象中解压出 N 个元素 ...

  9. Wind rotor states

    test test Table of Contents 1. Wind rotor states 1.1. Turbulent Wake State 1.2. Vortex Ring State 1. ...

  10. 洛谷 4302 BZOJ 1090 SCOI2003 字符串折叠 UVA1630 Folding（输出方案版）

    [题解] 区间DP.  设f[i][j]表示i~j的最小代价.再枚举中间点k,很容易想到转移方程为f[i][j]=min(f[i][j],f[i][k]+f[k][j]),同时如果i~k可以通过重复获 ...