jsp ajax 数据库Demo
2016-06-11 19:34
239 查看
转自: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文件中声明。
Html代码
<%@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")来获取。
Js代码
var url = "validate.do?id=" + escape(idField.value);
2.1.3、 通过if()语句以兼容IE,Firefox等多个浏览器版本的方式创建一个XMLHttpRequest对象。
Java代码
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发送请求(此时只是“准备发送”,并没有发送)
Js代码
req.open("GET", url, true);
2.1.5、 调用XMLHttpRequest对象函数send(param)向servlet发送请求。param参数的值null(关于send()方法使用请另外查阅)
Js代码
req.send(null);
2.1.6、调用一个触发事件onreadystatechange,每当 readyState 改变时,onreadystatechange 函数就会被执行。readyState有5个可能值:0:请求未初始化(在调用open()之前);1:请求已经提出(调用send()之前);2:请求已经发送(这里通常可以从响应得到内容头部);3:请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应);4:请求已经完成(可以访问服务器响应并使用它)
Js代码
req.onreadystatechange = callback;
2.2、function callback()要点:
2.2.1 XMLHttpRequest.status = 200表示服务器已经成功响应。
通过XMLHttpRequest.responseText获取servlet端的getPrintWriter().write()输出的响应。得到的值是 一个String类型数据。
Js代码
var check = req.responseText;
2.3、通过show()函数输出结果到标签标记的位置。
完整的Ajax.js文件:
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处理页面的缓存(如果出现缓存,将导致一些不可预知的麻烦)
Java代码
response.setContentType("text/html");
response.setHeader("Cache-Control", "no-store");
response.setHeader("Pragma", "no-cache");
response.setDateHeader("Expires", 0);
重点2:通过request.getParameter()来获取Ajax传递的参数。
Java代码
String name = request.getParameter("id");
重点3:通过response.getWriter().write()向Ajax输出参数,在Ajax一端通过var check = XMLHttpRequest.responseText获取参数值。
Java代码
if(name.equals("1")) {
out.write("OK");
}
else {
out.write("NO");
}
完整的servlet代码:
Java代码
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:
Xml代码
<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前台表单内容通过Ajax异步提交到后台Servlet进行校验(校验方式多种,包括提取数据库信息,校验用户名是否重复等),异步在JSP表单页面显示校验结果信息的基本过程。
一、说明:
1.由于本文只限于介绍JSP+Servlet+Ajax运用的基本流程,重点不在于后台数据库的访问和校验内容,因此省略Servlet对数据库的访问。
二、基本流程:
1. JSP页面login.jsp提供一个表单“form”,表单中有两个“text”类型的输入框,其中我们将用第一个输入框来做实验。
在第一个输入框中(输入用户名),通过onblur=validate();,当用户光标离开输入框时,触发JS函数validate() ,函数validate()在Ajax.js文件中声明。
Html代码
<%@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")来获取。
Js代码
var url = "validate.do?id=" + escape(idField.value);
2.1.3、 通过if()语句以兼容IE,Firefox等多个浏览器版本的方式创建一个XMLHttpRequest对象。
Java代码
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发送请求(此时只是“准备发送”,并没有发送)
Js代码
req.open("GET", url, true);
2.1.5、 调用XMLHttpRequest对象函数send(param)向servlet发送请求。param参数的值null(关于send()方法使用请另外查阅)
Js代码
req.send(null);
2.1.6、调用一个触发事件onreadystatechange,每当 readyState 改变时,onreadystatechange 函数就会被执行。readyState有5个可能值:0:请求未初始化(在调用open()之前);1:请求已经提出(调用send()之前);2:请求已经发送(这里通常可以从响应得到内容头部);3:请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应);4:请求已经完成(可以访问服务器响应并使用它)
Js代码
req.onreadystatechange = callback;
2.2、function callback()要点:
2.2.1 XMLHttpRequest.status = 200表示服务器已经成功响应。
通过XMLHttpRequest.responseText获取servlet端的getPrintWriter().write()输出的响应。得到的值是 一个String类型数据。
Js代码
var check = req.responseText;
2.3、通过show()函数输出结果到标签标记的位置。
完整的Ajax.js文件:
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处理页面的缓存(如果出现缓存,将导致一些不可预知的麻烦)
Java代码
response.setContentType("text/html");
response.setHeader("Cache-Control", "no-store");
response.setHeader("Pragma", "no-cache");
response.setDateHeader("Expires", 0);
重点2:通过request.getParameter()来获取Ajax传递的参数。
Java代码
String name = request.getParameter("id");
重点3:通过response.getWriter().write()向Ajax输出参数,在Ajax一端通过var check = XMLHttpRequest.responseText获取参数值。
Java代码
if(name.equals("1")) {
out.write("OK");
}
else {
out.write("NO");
}
完整的servlet代码:
Java代码
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:
Xml代码
<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>
相关文章推荐
- 阿里云window环境安装oracle数据库 报错的问题
- informix数据库选型及系统规划
- redis内存数据库
- navicat执行sql文件失败
- PDO预处理防sql注入
- java调用Oracle分页存储过程
- 创建Oracle数据库
- C# ACCESS数据库操作类
- mongodb的基本操作与插入文档(document)
- haproxy实现mysql从库负载均衡
- 关于MySQL的一些命令
- haproxy实现mysql从库负载均衡
- 不操作数据库,js解析json三级联动
- 数据库连接池
- Mysql创建新用户方法
- sql函数操作
- 1、MySql的安装和连接测试并给root用户赋密码
- Python Web 1 —— python和MongoDB安装
- redis的hGetAll函数的性能问题
- Linux6.5系统Oracle11g的安装