- 浏览: 73013 次
- 性别:
- 来自: 广州
文章分类
最新评论
下面介绍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>
发表评论
-
jdbc连接SQL server2000
2010-10-22 13:16 8881.假设SQL数据库“test”下有表“PRESON” ... -
javac联合编译
2010-09-14 20:25 1863假如在目录“D:\project\src\com\scau”下 ... -
常用SQL语句(在mysql上测验通过)
2010-09-11 15:59 980本文讲解《数据库处理——基础、设计与实现》第30页中3个表的创 ... -
一些编程常用的CMD命令
2010-09-09 00:05 893echo %path% 查看系统path环境变量的值 n ... -
ERROR 2003 (HY000): Can't connect to MySQL server on 'localhost' (10061)
2010-09-08 23:49 12472我的操作系统是WIN7旗舰版,每次开机,我可以在任务管理器里看 ... -
JDK工具 javac命令学习
2010-09-06 22:02 1051JDK工具 javac命令详解 SCJP必考的内容, ... -
jdk+tomcat安装以及配置
2010-09-06 21:57 1976安装配置JDK:其实就是 ... -
修改JSPsmartUpload组件实现无中文乱码上传下载
2010-08-26 09:26 2490使用JSPsmartUpload组件上传文件,文件名出现中文字 ... -
dom4j--XPath获取特定节点应用一例
2010-08-24 16:34 2738xml文件如下: <?xml version=&qu ... -
Ajax通过POST方法发送中文信息乱码解决
2010-08-21 13:22 1570开发项目用Ajax的Post方法提交信息到请求的servlet ... -
Ajax通过post方法向Servlet提交信息
2010-08-19 22:00 4623<script type="text/java ... -
JavaScript检查输入框是否有值再激活提交按钮的方法
2010-08-15 11:16 2437今天,想做一个“JavaScript检查输入框是否有值再激活提 ... -
dom4j写出中文乱码解决方法
2010-08-14 12:43 2207今天,学习了DOM4J,发现在eclipse中通过XMLWri ... -
XML基本语法介绍
2010-08-13 13:27 8302第一部分:文档声明 ... -
java中实例化一个类的一种另类方法
2010-08-11 17:23 1524今天学习J2SE,学习了另一种类的构造方式,在调试的过程中有自 ...
相关推荐
ajax异步实现 两级联动下拉列表和分类显示数据,包含了JS+CSS的简单设计
Ajax技术详细解说,实例解说,基于Servlet的AJAX\基于JSP的AJAX\基于Struts的AJAX
本文主要采用了基于jsp的ajax,jquery,servlet等技术。 1.upload.jsp 点击上传时,调用对应的fileupload函数,通过ajax将文件异步传送到servlet中处理。注意在文件上载时,所使用的编码类型应当是“multipart/...
Java数据压缩与传输实例,可以学习一下实例化套按字、得到文件输入流、压缩输入流、文件输出流、实例化缓冲区、写入数据到文件、关闭输入流、关闭套接字关闭输出流、输出错误信息等Java编程小技巧。 Java数组倒置...
Java数据压缩与传输实例,可以学习一下实例化套按字、得到文件输入流、压缩输入流、文件输出流、实例化缓冲区、写入数据到文件、关闭输入流、关闭套接字关闭输出流、输出错误信息等Java编程小技巧。 Java数组倒置...
主要是利用Ajax异步提交技术和Servlet技术实现的。显示在考试页面中的计时时间是在Servlet中设置的,需要通过Ajax的异步提交不断的请求Servlet,从而获得服务器返回的最新的计时时间的数据。为了便于维护和代码的...
5.7、实例操作:用户登陆程序实现(JSP + JDBC实现) 5.7.1、创建数据库表 5.7.2、程序实现思路 5.7.3、程序实现 5.8、本章摘要 5.9、开发实战讲解(基于Oracle数据库) 第6章 JSP内置对象 6.1、JSP内置对象...
142、使用JSP如何获得客户浏览器的信息? 36 143、能象调用子程序一样调用JSP吗? 36 144、当我重编译我的JSP使用的一个类后,为什么JVM继续使用我的老CLASS? 36 145、 file="abc.jsp"%>与<jsp:include page="abc...
142、使用JSP如何获得客户浏览器的信息? 36 143、能象调用子程序一样调用JSP吗? 36 144、当我重编译我的JSP使用的一个类后,为什么JVM继续使用我的老CLASS? 36 145、<%@include file="abc.jsp"%>与<jsp:include ...
5.7、实例操作:用户登陆程序实现(JSP + JDBC实现) 5.7.1、创建数据库表 5.7.2、程序实现思路 5.7.3、程序实现 5.8、本章摘要 5.9、开发实战讲解(基于Oracle数据库) 第6章 JSP内置对象 6.1、JSP内置对象...
5.7、实例操作:用户登陆程序实现(JSP + JDBC实现) 5.7.1、创建数据库表 5.7.2、程序实现思路 5.7.3、程序实现 5.8、本章摘要 5.9、开发实战讲解(基于Oracle数据库) 第6章 JSP内置对象 6.1、JSP内置对象...
5.7、实例操作:用户登陆程序实现(JSP + JDBC实现) 5.7.1、创建数据库表 5.7.2、程序实现思路 5.7.3、程序实现 5.8、本章摘要 5.9、开发实战讲解(基于Oracle数据库) 第6章 JSP内置对象 6.1、JSP内置对象...
5.7、实例操作:用户登陆程序实现(JSP + JDBC实现) 5.7.1、创建数据库表 5.7.2、程序实现思路 5.7.3、程序实现 5.8、本章摘要 5.9、开发实战讲解(基于Oracle数据库) 第6章 JSP内置对象 6.1、JSP内置对象...
5.7、实例操作:用户登陆程序实现(JSP + JDBC实现) 5.7.1、创建数据库表 5.7.2、程序实现思路 5.7.3、程序实现 5.8、本章摘要 5.9、开发实战讲解(基于Oracle数据库) 第6章 JSP内置对象 6.1、JSP内置对象...
5.7、实例操作:用户登陆程序实现(JSP + JDBC实现) 5.7.1、创建数据库表 5.7.2、程序实现思路 5.7.3、程序实现 5.8、本章摘要 5.9、开发实战讲解(基于Oracle数据库) 第6章 JSP内置对象 6.1、JSP内置对象...
5.7、实例操作:用户登陆程序实现(JSP + JDBC实现) 5.7.1、创建数据库表 5.7.2、程序实现思路 5.7.3、程序实现 5.8、本章摘要 5.9、开发实战讲解(基于Oracle数据库) 第6章 JSP内置对象 6.1、JSP内置对象...
13、JSP和Servlet中的请求转发分别如何实现? 35 14、JSP乱码如何解决? 36 15、session 和 application的区别? 36 16、jsp有哪些内置对象?作用分别是什么? 36 17、Jsp有哪些动作?作用分别是什么? 37 18、JSP中动态...
利用Google:maps JSP标签库就能够在你的Web站点上实现GoogleMaps的所有功能而且不需要javascript或AJAX编程。它还能够与JSTL相结合生成数据库驱动的动态Maps。 OAuth 实现框架 Agorava Agorava 是一个实现了 OAuth ...
利用Google:maps JSP标签库就能够在你的Web站点上实现GoogleMaps的所有功能而且不需要javascript或AJAX编程。它还能够与JSTL相结合生成数据库驱动的动态Maps。 OAuth 实现框架 Agorava Agorava 是一个实现了 OAuth ...