利用DOM动态更新列表-(最终版源码Ajax+JSP+Servlet+Spring+SQL Server)

hcwzwx

大概有一段时间没有进入blog写些东西了。今天我将利用DOM动态更新列表-(最终版源码Ajax+JSP+Servlet+Spring+SQL Server)，奉献给大家。当然，还是那个宗旨喜欢就看看吧。
1、首先给出这个程序设计的流程
表现层：JSP+JavaScript+Ajax
控制层：Servlet
业务逻辑层：Spring的IOC容器
数据持久层：Spring中的JDBC
数据库层：由SQL Server提供支持
上面给出了程序设计的流程，那么我在程序设计的时候就是通过上述流程来实现的。
2、实现步骤如下
整个程序设计的步骤由数据持久层向表现层实现
第一：数据持久层
DAO接口实现代码：

package com.gxa.edu.spring.dao;
/**
*@author 国信安百杰
*/
import java.util.List;
import com.gxa.edu.spring.bean.Shopping;
public interface ShoppingDao {
int insertShopping(Shopping shopping);
int deleteShopping(Shopping shopping);
List queryShopping();
int queryMaxShoppingId();
}

实现DAO接口的类代码：

package com.gxa.edu.spring.dao.impl;
/**
*@author 国信安百杰
*/
import java.util.List;
import org.springframework.jdbc.core.support.JdbcDaoSupport;
import com.gxa.edu.spring.bean.Shopping;
import com.gxa.edu.spring.dao.ShoppingDao;
import com.gxa.edu.spring.rowmapper.ShoppingRowMapper;
public class ShoppingDaoImpl extends JdbcDaoSupport implements ShoppingDao{
public int deleteShopping(Shopping shopping) {
// TODO Auto-generated method stub
String sql = "delete from shopping where shoppingName = ?";
Object[] obj = {shopping.getShoppingName()};
return getJdbcTemplate().update(sql, obj);
}
public int insertShopping(Shopping shopping) {
// TODO Auto-generated method stub
String sql = "insert into shopping values(?,?)";
Object[] obj = {shopping.getShoppingId(), shopping.getShoppingName()};
return getJdbcTemplate().update(sql, obj);
}
public List queryShopping() {
// TODO Auto-generated method stub
String sql = "select * from shopping";
return getJdbcTemplate().query(sql, new ShoppingRowMapper());
}
public int queryMaxShoppingId() {
// TODO Auto-generated method stub
String sql = "select max(shoppingId) from shopping";
return getJdbcTemplate().queryForInt(sql);
}
}

编写完上面的接口和类，那么就需要在Spring的配置文件中配置相应的信息

<bean id="shoppingDao" class="com.gxa.edu.spring.dao.impl.ShoppingDaoImpl">
<property name="dataSource">
<ref local="dataSource"/>
</property>
</bean>

实现Spring的RowMapper接口的类：

package com.gxa.edu.spring.rowmapper;
/**
*RowMapper接口主要是通过Spring对JDBC的封装将数据封装给一个JavaBean
*@author 国信安百杰
*/
import java.sql.ResultSet;
import java.sql.SQLException;
import org.springframework.jdbc.core.RowMapper;
import com.gxa.edu.spring.bean.Shopping;
public class ShoppingRowMapper implements RowMapper{
public Object mapRow(ResultSet arg0, int arg1) throws SQLException {
// TODO Auto-generated method stub
Shopping shopping = new Shopping();
shopping.setShoppingId(arg0.getInt("shoppingId"));
shopping.setShoppingName(arg0.getString("shoppingName"));
return shopping;
}
}

实现Shopping JavaBean的代码：

package com.gxa.edu.spring.bean;
/**
*@author 国信安百杰
*/
public class Shopping {
private int shoppingId;
private String shoppingName;
public int getShoppingId() {
return shoppingId;
}
public void setShoppingId(int shoppingId) {
this.shoppingId = shoppingId;
}
public String getShoppingName() {
return shoppingName;
}
public void setShoppingName(String shoppingName) {
this.shoppingName = shoppingName;
}
}

第二：业务逻辑层

package com.gxa.edu.spring.logic;
/**
*@author 国信安百杰
*/
import java.util.List;
import com.gxa.edu.spring.bean.Shopping;
import com.gxa.edu.spring.dao.ShoppingDao;
public class ShoppingLogic {
private ShoppingDao dao;
public void setDao(ShoppingDao dao) {
this.dao = dao;
}
public List queryShopping() {
return dao.queryShopping();
}
public int deleteShopping (Shopping shopping) {
return dao.deleteShopping(shopping);
}
public int insertShopping(Shopping shopping) {
return dao.insertShopping(shopping);
}
public int queryMaxShoppingId() {
return dao.queryMaxShoppingId();
}
}

业务逻辑类在Spring中配置信息

<bean id="shoppingLogic" class="com.gxa.edu.spring.logic.ShoppingLogic">
<property name="dao">
<ref local="shoppingDao"/>
</property>
</bean>

第三：控制层的实现

package com.gxa.edu.servlet;
/**
*@author 国信安百杰
*/
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;
import org.springframework.web.context.WebApplicationContext;
import org.springframework.web.context.support.WebApplicationContextUtils;
import com.gxa.edu.spring.bean.Shopping;
import com.gxa.edu.spring.logic.ShoppingLogic;
public class ShoppingServlet extends HttpServlet {
/**
* Constructor of the object.
*/
public ShoppingServlet() {
super();
}
/**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/xml; charset=UTF-8");
String name = request.getParameter("name");
String action = request.getParameter("action");
System.out.println("name===" + name);
System.out.println("action===" + action);
PrintWriter out = response.getWriter();
WebApplicationContext wc = WebApplicationContextUtils.getRequiredWebApplicationContext(this.getServletContext());
ShoppingLogic logic = (ShoppingLogic) wc.getBean("shoppingLogic");
if ("add".equals(action)) {
int i = logic.queryMaxShoppingId();
System.out.println(i);
Shopping shopping = new Shopping();
shopping.setShoppingId(i + 1);
shopping.setShoppingName(name);
if (logic.insertShopping(shopping) > 0) {
out.println("添加商品成功");
} else {
out.println("添加商品失败");
}
}
if ("del".equals(action)) {
Shopping shopping = new Shopping();
shopping.setShoppingName(name);
if (logic.deleteShopping(shopping) > 0) {
out.println("删除商品成功");
} else {
out.println("删除商品失败");
}
}
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
/**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occure
*/
public void init() throws ServletException {
// Put your code here
}
}

第四：表现层的实现
表现层中创建一个dynamicShopping.jsp页面，在该页面里面编写了Ajax代码

<%@ page language="java" import = "java.util.*" pageEncoding="gb2312"%>
<%@ page import = "org.springframework.web.context.WebApplicationContext" %>
<%@ page import = "org.springframework.web.context.support.WebApplicationContextUtils" %>
<%@ page import = "com.gxa.edu.spring.logic.*" %>
<%@ page import = "com.gxa.edu.spring.bean.*" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>实现Web页面局部动态更新品牌信息</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">   
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css" href="images/css.css">
<script type="text/javascript">
var XMLHttpReq = false;
//创建XMLHttpRequest对象      
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
//添加商品的相应函数
function addSortProcessResponse() {
if (XMLHttpReq.readyState == 4) {//和服务器端交互完毕
if (XMLHttpReq.status == 200) {//返回成功信息
addSortList();
}
}
}
//确认按钮出发事件函数
function addSort() {
var name = document.getElementById("name").value;
if (name == "") {
return;
}
var url = "ShoppingServlet?action=add" + "&name=" + name;
createXMLHttpRequest();
XMLHttpReq.open("GET", url, true);//建立服务器端连接
XMLHttpReq.onreadystatechange = addSortProcessResponse;//指定添加商品的相应函数
XMLHttpReq.send(null);
}
//一旦添加商品信息进入后台数据库，就执行此函数将信息打印到页面
function addSortList() {
var name = document.getElementById("name").value;
if (name == "") {
return;
}
var row = document.createElement("tr");
row.setAttribute("id", name);
var cell = document.createElement("td");
cell.appendChild(document.createTextNode(name));
row.appendChild(cell);
//添加删除按钮
var deleteButton = document.createElement("input");
deleteButton.setAttribute("type", "button");
deleteButton.setAttribute("value", "删除");
deleteButton.onclick = function () {deleteSort(name)};
cell = document.createElement("td");
cell.appendChild(deleteButton);
row.appendChild(cell);
//将设置好的元素动态添加到tbody里面
document.getElementById("sortList").appendChild(row);
//添加完品牌后就清空输入框
document.getElementById("name").value="";
}
//删除品牌信息相应函数
function deleteSortProcessResponse() {
if (XMLHttpReq.readyState == 4) {//和服务器端交互完毕
if (XMLHttpReq.status == 200) {//返回成功信息
window.alert("删除成功");
}
}
}
//删除品牌信息
function deleteSort(id) {
if (id != null) {
//var row = document.getElementById(id);
//var sorlist = document.getElementById("sortlist");
//sorlist.removeChild(row);
var url = "ShoppingServlet?action=del" + "&name=" + id;
createXMLHttpRequest();
XMLHttpReq.open("GET", url, true);//建立服务器端连接
XMLHttpReq.onreadystatechange = deleteSortProcessResponse;//指定添加商品的相应函数
XMLHttpReq.send(null);
clearSort(id);//清空表格中信息
}
}
//清空表格中信息
function clearSort(id) {
if (id != null) {
var row = document.getElementById(id);
var sorlist = document.getElementById("sortlist");
sorlist.removeChild(row);
}
}
</script>
</head>
<%
WebApplicationContext ctx = WebApplicationContextUtils.getWebApplicationContext(getServletContext());
ShoppingLogic logic = (ShoppingLogic) ctx.getBean("shoppingLogic");
List list = logic.queryShopping();
%>
<body>
<table style="BORDER-COLLAPSE: collapse" bordercolor="#111111" cellspacing="0" cellpadding="2" width="400" bgcolor="#f5efe7" border="0">
<tr>
<td align="middle" height="4" colspan="3">
<img height="4" src="images/promo_list_top.gif" width="100%" border="0" alt="">
</td>
</tr>
<tr>
<td align="middle" bgcolor="#dbc2b0" height="19" colspan="3">
<b>品牌信息管理</b>
</td>
</tr>
<tr>
<td height="20">
增加新品牌:
</td>
<td height="20">
<input id="name" type="text" size="15">
</td>
<td height="20">
<img src="images/ok.gif"  alt="">
</td>
</tr>
<tr>
<td height="20">
品牌信息管理:
</td>
</tr>
<table border="1" width="400">
<tr>
<td height="20" valign="top" align="center">
品牌名称:
</td>
<td id="pos_1" height="20">
操作
</td>
</tr>
<tbody id="sortList">
<%
for (int i = 0; i < list.size(); i++) {
Shopping shopping = (Shopping) list.get(i);%>
<tr id="<%=shopping.getShoppingName() %>">
<td><%=shopping.getShoppingName() %></td>
<td><input type="button" value="删除" ></input></td>
</tr>
<%}%>
</tbody>
</table>
</table>
</body>
</html>

最后，给出整个Spring的配置文件applicationContext.xml的代码

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN//EN" "http://www.springframework.org/dtd/spring-beans.dtd">
<beans>
<!-- 配置SQL Server数据源 -->
<bean id="dataSource"
class="org.apache.commons.dbcp.BasicDataSource"
destroy-method="close">
<property name="driverClassName">
<value>com.microsoft.jdbc.sqlserver.SQLServerDriver</value>
</property>
<property name="url">
<value>jdbc:microsoft:sqlserver://127.0.0.1:1433;DatabaseName=stu</value>
</property>
<property name="username">
<value>sa</value>
</property>
<property name="password">
<value>123456</value>
</property>
</bean>
<!-- =====DataSourceTransactionManager来对数据源进行事务管理===== -->
<bean id="transactionManager"
class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<property name="dataSource">
<ref local="dataSource" />
</property>
</bean>
<!-- =====TransactionProxyFactoryBean一个事务管理代理工厂bean，它是我们Spring中一个拦截器====== -->
<bean id="basicTransactionProxy"
class="org.springframework.transaction.interceptor.TransactionProxyFactoryBean"
abstract="true">
<property name="transactionManager">
<ref local="transactionManager" />
</property>
<property name="transactionAttributes">
<props>
<prop key="get*">PROPAGATION_REQUIRED,readOnly</prop>
<prop key="insert*">PROPAGATION_REQUIRED</prop>
<prop key="update*">PROPAGATION_REQUIRED</prop>
</props>
</property>
<!-- <property name="proxyTargetClass" value="true"></property> -->
</bean>
<!-- ====配置ShoppingDao===== -->
<bean id="shoppingLogic" class="com.gxa.edu.spring.logic.ShoppingLogic">
<property name="dao">
<ref local="shoppingDao"/>
</property>
</bean>
<bean id="shoppingDao" class="com.gxa.edu.spring.dao.impl.ShoppingDaoImpl">
<property name="dataSource">
<ref local="dataSource"/>
</property>
</bean>
</beans>

3、总结
上面的代码其实在我们开发和运用肯定是微乎其微，但是在我们平时刚开始学习的时候，这段代码确实我们进步的基础。
要给大家说一下的是Spring框架的版本是1.2的。在applicationContext.xml文件加入了1.2版本的事务管理。Spring1.2版本的事务管理和高版本的有比较大的区别。当然，大家对Spring比较了解的可以使用高一些的版本，如Spring2.0或是Spring2.5.