ajax+struts基礎知識02
兩種不同的框架
struts 1.X
struts 2.X webwork
struts1：并沒有對ajax的支持（因為struts1流行的時候并沒有太多的異步處理請求）
由于struts1主要是通過action來進行對頁面的轉發和重定向的
而ajax是通過js請求發送給服務器的。
比如validate.action請求到ActionServlet之后，經過Action的處理在這里返回的是null而非success和fail
如果返回null的話，則不將其進行轉發或者重定向了，可以在action用其他代碼來完成工作
由于action里面包含request和response；也沒有必要往request里面去存放數據
一、加載Struts1.2的變化
通過MyEclipse加載struts1.2的變化
1、將antlr.jar,commons-benutils.jar,commons-digester.jar,commons-fileupload.jar,commons-logging.jar
commons-validator.jar,jakarta-oro.jar,struts.jar復制到了/WEB-INF/lib目錄下
2、在/WEB-INF目錄下放置了幾個文件：
//一個TLD就是一個標記庫定義文件
struts-bean.tld
struts-config.xml//struts提供的配置文件
struts-html.tld
struts-logic.tld
struts-nested.tld
struts-tiles.tld
validator-rules.xml
3、修改了web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="2.5" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<display-name />
<servlet>
<servlet-name>action</servlet-name>
<servlet-class>org.apache.struts.action.ActionServlet</servlet-class>
<init-param>
<param-name>config</param-name>
<param-value>/WEB-INF/struts-config.xml</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>3</param-value>
</init-param>
<init-param>
<param-name>detail</param-name>
<param-value>3</param-value>
</init-param>
<load-on-startup>0</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>action</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
4、在src目錄下創建了一個ApplicationResources.properties文件并在struts-config.xml文件中添加
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts-config PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 1.2//EN" "http://struts.apache.org/dtds/struts-config_1_2.dtd">
<struts-config>
<data-sources />
<form-beans></form-beans>
<global-exceptions />
<global-forwards />
<action-mappings><action-mappings>
<message-resources parameter="ApplicationResources" />
</struts-config>
一個功能一個action
5、創建一個測試Action；驗證加載struts是否成功；
假設我們這里先創建一個TestAction
package org.whatisjava.action;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
public class TestAction extends Action {
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
//在這里傳遞進四個參數，其中ActionMapping，ActionForm，request，response
//ActionMapping是配置對象，一個ActionMapping封裝一個action對象的信息
//返回值為ActionForward，struts2中的返回值為String
//一個ActionForward就是封裝了一個將要返回的地址
System.out.println("access db......");
//return new ActionForward("/WEB-INF/jsp/test.jsp");
//return "success";
return mapping.findForward("success");//mapping里面可以找到forward
//這種方式與struts2里面的區別在于：這種方式一起把配置文件中的相關信息都暴露給程序員了
//封裝性較差
}
}
6、修改struts-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts-config PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 1.2//EN" "http://struts.apache.org/dtds/struts-config_1_2.dtd">
<struts-config>
<data-sources />
<form-beans />
<global-exceptions />
<global-forwards />
<action-mappings>
<action path="/test" type="org.whatisjava.action.TestAction">
<forward name="success" path="/WEB-INF/jsp/test.jsp"/>
</action>
</action-mappings>
<message-resources parameter="ApplicationResources" />
</struts-config>
二、如何設計一個框架頁面：
框架頁面index.jsp頁面
header.jsp頂部
menu.jsp左下
main.jsp右下
1、index.jsp頁面
<%@page pageEncoding="utf-8" %>
<BODY style="MARGIN: 0px">
<DIV
style="Z-INDEX: 2; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 65px">
<IFRAME id="header"
style="Z-INDEX: 1; VISIBILITY: inherit; WIDTH: 100%; HEIGHT: 65px"
name=header src="header.do" frameBorder=0 scrolling=no></IFRAME>
</DIV>
<TABLE style="TABLE-LAYOUT: fixed" height="100%" cellSpacing=0
cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD width=165 height=65></TD>
<TD></TD>
</TR>
<TR>
<TD>
<IFRAME id="menu"
style="Z-INDEX: 1; VISIBILITY: inherit; OVERFLOW: auto; WIDTH: 100%; HEIGHT: 100%"
name=menu src="menu.do" frameBorder=0 scrolling=yes></IFRAME>
</TD>
<TD>
<IFRAME id="main"
style="Z-INDEX: 1; VISIBILITY: inherit; OVERFLOW: auto; WIDTH: 100%; HEIGHT: 100%"
name=main src="main.jsp" frameBorder=0 scrolling=yes></IFRAME>
</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
這個頁面是有3 個<iframe></iframe>構成的。如下：
<IFRAME id="header"
style="Z-INDEX: 1; VISIBILITY: inherit; WIDTH: 100%; HEIGHT: 65px"
name=header src="header.do" frameBorder=0 scrolling=no>
</IFRAME>
<IFRAME id="menu"
style="Z-INDEX: 1; VISIBILITY: inherit; OVERFLOW: auto; WIDTH: 100%; HEIGHT: 100%"
name=menu src="menu.do" frameBorder=0 scrolling=yes>
</IFRAME>
<IFRAME id="main"
style="Z-INDEX: 1; VISIBILITY: inherit; OVERFLOW: auto; WIDTH: 100%; HEIGHT: 100%"
name=main src="main.jsp" frameBorder=0 scrolling=yes>
</IFRAME>
<iframe id="" style="" name=header src="">
假設存在一個iframe的話，首先要加載框架，然后再發一個請求去接收iframe src的信息
也就是對于上面index.jsp框架頁面來說，至少有4個請求。
<iframe>類似于<img src="">
<%@page pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<link href="<%=request.getContextPath()%>/css/style.css"
/////
////<%=request.getContextPath()%>,響應絕對地址
///
type=text/css rel=stylesheet />
</head>
<body topMargin="10">
<div id="append_parent"></div>
<img src="images/1.jpg" width="760" height="530">
</body>
</html>
2、對應的<struts-config>修改
<data-sources />
<form-beans />
<global-exceptions />
<global-forwards />
<action-mappings>
<action path="/Test" type="org.whatisjava.action.TestAction">
<forward name="success" path="/WEB-INF/jsp/Test.jsp"></forward>
</action>
<action path="/menu" type="org.apache.struts.actions.ForwardAction"
parameter="/WEB-INF/jsp/menu.jsp"/>
//這句話意思，真實版本struts的ForwardAction,什么也不做，直接將其轉到parameter指定的定制
//切記這里forward可能不行，需要采用parameter來指定轉發路徑
//切記切記。
</action-mappings>
<message-resources parameter="org.whatisjava.struts.ApplicationResources" />
</struts-config>
3、header.jsp
//togglemenu以及sethighlight函數
<%@page pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<link href="<%=request.getContextPath()%>/css/main/style.css"
type=text/css rel=stylesheet />
<script type="text/javascript">
var menus = new Array('g1','g2');
//全局變量；字符串數組
function togglemenu(id) {
for (i = 0; i < menus.length; i++) {
var k = menus[i];
parent.menu.document.getElementById(k).style.display = (k == id ? '' : 'none');
//任何一個div，getElementById("abc").style.display
//parent在這里代表index.jsp框架頁面；menu代表的是menu.jsp的id
}
}
function sethighlight(n) {
//document.getElementById('');
var lis = document.getElementsByTagName('li');
//獲得頁面中標簽為li的標記對象
// obj.getElementsByTagName
for(var i = 0; i < lis.length; i++) {
lis[i].id = '';
}
lis[n].id = 'menuon';
}
</script>
</head>
<body>
<table class="topmenubg" cellspacing="0" cellpadding="0" width="100%"
border="0">
<tbody>
<tr>
<td width="160" rowspan="2">
<div class=logo>
<span class="editiontext">Java 宮殿 <span
class="editionnumber">1.0</span> <br />
</div>
</td>
<td>
<div class="topmenu">
<ul>
<li id="menuon">
<span> <a
onclick="sethighlight(0); togglemenu('g1');"
href="javascript:;">頁面技術1</a> </span>
</li>
<li>
<span> <a
onclick="sethighlight(1); togglemenu('g2');"
href="javascript:;">頁面技術2</a> </span>
</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
4、menu.jsp
//這個頁面中的重點是：menu的display；
<a href="showCourse.do" target="main">
<!-- target是重點，頁面在哪里顯示 -->
<%@page pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<link href="<%=request.getContextPath()%>/css/main/style.css"
type=text/css rel=stylesheet />
<script src="<%=request.getContextPath()%>/js/prototype-1.6.0.3.js"
type=text/javascript></SCRIPT>
<script>
function collapse_change(menucount) {
if ($('menu_' + menucount).style.display == 'none') {
$('menu_' + menucount).style.display = '';
$('menuimg_' + menucount).src = '${pageContext.request.contextPath}/css/main/menu_reduce.gif';
} else {
$('menu_' + menucount).style.display = 'none';
$('menuimg_' + menucount).src = '${pageContext.request.contextPath}/css/main/menu_add.gif';
}
}
</script>
</head>
<body style="">
<table class="leftmenulist" style="MARGIN-BOTTOM: 5px" cellSpacing="0"
cellPadding="0" width="146" align="center" border="0">
<tbody>
<tr class="leftmenutext">
<td>
<div align="center">
<a href="#">首頁</a>
</div>
</td>
</tr>
</tbody>
</table>
<div id="g1">
<table class="leftmenulist" style="MARGIN-BOTTOM: 5px" cellSpacing=0
cellPadding="0" width="146" align="center" border="0">
<tbody>
<tr class="leftmenutext">
<td>
<img id="menuimg_11"
src="${pageContext.request.contextPath}/css/main/menu_reduce.gif"
border="0">
<a onclick="collapse_change(11);return false;" href="#">頁面技術</a>
</td>
</tr>
</tbody>
<tbody id="menu_11">
<tr class="leftmenutd">
<td>
<table class="leftmenuinfo" cellSpacing="0" cellPadding="0"
border="0">
<tbody>
<tr>
<td>
<a href="showCourse.do" target="main">綜合練習一</a>
<!-- target是重點，頁面在哪里顯示 -->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="leftmenutd">
<td>
<table class="leftmenuinfo" cellSpacing="0" cellPadding="0"
border="0">
<tbody>
<tr>
<td>
<a href="listProject.do?page=1" target="main">綜合練習二</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="leftmenutd">
<td>
<table class="leftmenuinfo" cellSpacing="0" cellPadding="0"
border="0">
<tbody>
<tr>
<td>
<a href="bookForm.do" target="main">綜合練習三</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="leftmenutd">
<td>
<table class="leftmenuinfo" cellSpacing="0" cellPadding="0"
border="0">
<tbody>
<tr>
<td>
<a href="loginForm.do" target="main">綜合練習四</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="leftmenutd">
<td>
<table class="leftmenuinfo" cellSpacing="0" cellPadding="0"
border="0">
<tbody>
<tr>
<td>
<a href="005/listModule.do" target="main">綜合練習五</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div id="g2" style="display:none">
<table class="leftmenulist" style="MARGIN-BOTTOM: 5px" cellSpacing=0
cellPadding="0" width="146" align="center" border="0">
<tbody>
<tr class="leftmenutext">
<td>
<img id="menuimg_11"
src="${pageContext.request.contextPath}/css/main/menu_reduce.gif"
border="0">
<a onclick="collapse_change(11);return false;" href="#">頁面技術</a>
</td>
</tr>
</tbody>
<tbody id="menu_11">
<tr class="leftmenutd">
<td>
<table class="leftmenuinfo" cellSpacing="0" cellPadding="0"
border="0">
<tbody>
<tr>
<td>
<a href="showCourse.do" target="main">綜合練習六</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="leftmenutd">
<td>
<table class="leftmenuinfo" cellSpacing="0" cellPadding="0"
border="0">
<tbody>
<tr>
<td>
<a href="listProject.do?page=1" target="main">綜合練習二</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="leftmenutd">
<td>
<table class="leftmenuinfo" cellSpacing="0" cellPadding="0"
border="0">
<tbody>
<tr>
<td>
<a href="bookSearchForm.do" target="main">綜合練習三</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="leftmenutd">
<td>
<table class="leftmenuinfo" cellSpacing="0" cellPadding="0"
border="0">
<tbody>
<tr>
<td>
<a href="loginForm.do" target="main">綜合練習四</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="leftmenutd">
<td>
<table class="leftmenuinfo" cellSpacing="0" cellPadding="0"
border="0">
<tbody>
<tr>
<td>
<a href="005/listModule.do" target="main">綜合練習五</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<table class="leftmenulist" cellSpacing="0" cellPadding="0"
width="146" align="center" border="0">
<tbody>
<tr class="leftmenutext">
<td>
<div style="MARGIN-LEFT: 48px">
<a href="#">退出</a>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
5、main.jsp
<%@page pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<link href="<%=request.getContextPath()%>/css/style.css"
type=text/css rel=stylesheet />
</head>
<body topMargin="10">
<div id="append_parent"></div>
<img src="images/1.jpg" width="760" height="530">
</body>
</html>
******************************************************************************************************
三、頁面上的數據是一次取過來的還是多次取過來的
1、數據1次拿到,有js控制變更
2、數據多次拿到
數據少的時候全部拿過來；如果數據多，分多次拿
我們可以認為，寫一個action，調用dao,然后把數據拿到request里面，然后發到頁面上。這樣的話，頁面沒有那么多的空間來展示頁面
最好的是寫一個action，然后讓action僅僅顯示頁面，然后這個頁面里面有一個js去異步訪問數據庫的獲取數據,action返回的是JSON字符串。然
后js再控制事件去顯示數據
瀏覽器------ActionServlet-------action--------DAO-------action-----JSP-------瀏覽器
第一個action顯示頁面，包含一個foward-------直接用struts里面的簡單的ActionForward就行
第二個action獲取數據,不包含forward
多個字段搜索
設計表的時候，主鍵不要與業務相關聯
category_value????????
turn int(3) not null;
最典型的集成映射
<%@page pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<fmt:formatDate var="publishDate" value="${book.publishDate}" pattern="yyyy年M月" />
<b>${publishDate}</b>
//從value所存的日期，按照pattern的格式來存儲，并存到pageContext中，叫publishDate
<td class="altbg2">
<fmt:formatNumber var="price" value="${book.price}" pattern="￥0.00" />
<b>${price}</b>
</td>
四、如何擴展EL表達式？？
1、寫一個類，里面用靜態方法描述功能
2、寫一個*.tld文件
一個功能定義一個function
<function>
<!--函數標記的名稱，用在EL中-->
<name>len</name>
<!--這個函數的實現類-->
<function-class>org.whatisjava.el.ELFunction</function-class>
<!--方法的簽名聲明-->
<function-signature>
java.lang.Integer length(java.lang.Object)
</function-signature>
3、在頁面中寫一些東西
<%@taglib uri="/WEB-INF/jsp/lib/el-function.tld" prefix="f"%>
五、struts如何進行驗證
步驟：
1、首先將工程里面添加struts2能力
2、創建一個form.jsp頁面
3、創建一個AddAction.java的action，并修改struts-config.xml;創建Action;驗證action是否正常工作
繼承Action
4、再創建一個UserForm.java的action，并修改struts-config.xml;創建Action;并添加form-beans
繼承ActionForm,其屬性與表單頁面提交的內容對應
5、修改AddAction，看其能否正常工作
但是這個時候提交上來的數據可能有些為空，有些不是合格數據
6、修改UserForm,添加validate方法
7、
驗證框架的一種東西
原理commons有一個組件
commons-validator,這個組件準備用于數據的驗證（數據的格式等的驗證）
可以不去寫validate這個方法，可以采用commons-validator
六、常用的form表單
<form action="" method="">
<input type="text" name=""/>
<input type="password" name=""/>
<input type="radio" name="..." value=""/>
<input type="checkbox" name="" value=""/>
<select name="">
<option value="">...</option>
</select>
</form>
struts提供的標記
<html:form action="" method="">
<html:text property=""/> //對應表單的文本框,property對應的name
<html:password property=""/>
<html:radio property="" value=""/>
<html:multibox property="" value=""/>
<html:select property="">
<html:option value="">
......
</html:option>
</html:select>
</html:form>
1、分頁技術
2、選擇導航
3、框架頁面
4、各種順序排序：如按照名稱降序和升序；分頁的時候仍然按照名稱降序或者升序
5、數據的增刪改查
6、登入、登出系統
7、彈出層可以進行選擇
8、發消息，互相發消息
9、關聯選取（異步方式）
10、標簽庫等ajax，STL
加載hibernate+struts2+mysql
mysql
create database palace1;
use palace1;
create table t_user();
//建表的類型 默認是MyISAM，盡量采用InnoDB
ENGINE=InnoDB;
采用MyISAM不支持外鍵約束，也不支持事務
用hibernate只是把方言更改下即可
框架iFrame
css是做好的；
index.jsp
<%@page pageEncoding="utf-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Index</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
</HEAD>
<BODY style="MARGIN: 0px">
<DIV style="Z-INDEX: 2; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 65px">
<IFRAME id="header"
style="Z-INDEX: 1; VISIBILITY: inherit; WIDTH: 100%; HEIGHT: 65px"
name=header src="header.do" frameBorder=0 scrolling=no>
</IFRAME>
<!--IFRAME是一個標記；id屬性、src屬性比較重要；style可以寫在這里也可以現在css里面
首先把標記展示出來，然后再根據src屬性的地址另外發一個請求將其展示出來。
有點類型于<img src=""/>
-->
</DIV>
<TABLE style="TABLE-LAYOUT: fixed" height="100%" cellSpacing=0
cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD width=165 height=65></TD>
<TD></TD>
</TR>
<TR>
<TD>
<IFRAME id="menu"
style="Z-INDEX: 1; VISIBILITY: inherit; OVERFLOW: auto; WIDTH: 100%; HEIGHT: 100%"
name=menu src="menu.do" frameBorder=0 scrolling=yes></IFRAME>
</TD>
<TD>
<IFRAME id="main"
style="Z-INDEX: 1; VISIBILITY: inherit; OVERFLOW: auto; WIDTH: 100%; HEIGHT: 100%"
name=main src="main.jsp" frameBorder=0 scrolling=yes></IFRAME>
</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
<%@page pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<link href="<%=request.getContextPath()%>/css/style.css"
*******************************************************************
type=text/css rel=stylesheet />
</head>
<body topMargin="10">
<div id="append_parent"></div>
<img src="images/1.jpg" width="760" height="530">
</body>
</html>
定義一個包org.whatisjava.action專門來放action
在struts-config.xml文件里面配置org.apache.struts.actions.ForwardAction(只是用于轉發頁面而已，其他什么也不做)
<action-mappings>
<action path="/menu" type="org.apache.struts.actions.ForwardAction" parameter="/WEB-INF/jsp/menu.jsp">
<action path="/header" type="org.apache.struts.action.ForwardAction" parameter="/WEB-INF/jsp/header.jsp">
</action-mappings>
***************************
頂部導航菜單
左邊菜單 右邊主顯示頁面
**************************
實際上這是3個不同的頁面
header.jsp
<%@page pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<link href="<%=request.getContextPath()%>/css/main/style.css"
type=text/css rel=stylesheet />
<script type="text/javascript">
var menus = new Array('g1','g2');
//全局變量；字符串數組；這里，g1，g2是menu里面的菜單的id
function togglemenu(id) {
for (i = 0; i < menus.length; i++) {
var k = menus[i];
parent.menu.document.getElementById(k).style.display = (k == id ? '' : 'none');
//任何一個div，getElementById("abc").style.display
//parent代表外面對象的id，menu代表左邊的框，
//樣式里面的display=none或者是id
}
}
function sethighlight(n) {
//document.getElementById('');
var lis = document.getElementsByTagName('li');
//獲得頁面中標簽為li的標記對象
// obj.getElementsByTagName//不一定是document對象才有
for(var i = 0; i < lis.length; i++) {
lis[i].id = '';
}
lis[n].id = 'menuon';
}
</script>
</head>
<body>
<table class="topmenubg" cellspacing="0" cellpadding="0" width="100%"
border="0">
<tbody>
<tr>
<td width="160" rowspan="2">
<div class=logo>
<span class="editiontext">Java 宮殿 <span
class="editionnumber">1.0</span> <br />
</div>
</td>
<td>
<div class="topmenu">
<ul>
<li id="menuon">
<span> <a
onclick="sethighlight(0); togglemenu('g1');"
href="javascript:;">頁面技術1</a> </span>
</li>
<li>
<span> <a
onclick="sethighlight(1); togglemenu('g2');"
href="javascript:;">頁面技術2</a> </span>
</li>
<!--一個li代表一個導航
如何實現導航菜單，選中后突出顯示呢？
通過<a onclick="sethighlight(0);togglemenu("g1");" href="javascript:;">
sethighlight方法
togglemenu方法
-->
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
menu.jsp
<%@page pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<link href="<%=request.getContextPath()%>/css/main/style.css"
type=text/css rel=stylesheet />
<script src="<%=request.getContextPath()%>/js/prototype-1.6.0.3.js"
type=text/javascript></SCRIPT>
<script>
function collapse_change(menucount) {
if ($('menu_' + menucount).style.display == 'none') {
$('menu_' + menucount).style.display = '';
$('menuimg_' + menucount).src = '${pageContext.request.contextPath}/css/main/menu_reduce.gif';
} else {
$('menu_' + menucount).style.display = 'none';
$('menuimg_' + menucount).src = '${pageContext.request.contextPath}/css/main/menu_add.gif';
}
}
</script>
</head>
<body style="">
<table class="leftmenulist" style="MARGIN-BOTTOM: 5px" cellSpacing="0"
cellPadding="0" width="146" align="center" border="0">
<tbody>
<tr class="leftmenutext">
<td>
<div align="center">
<a href="#">首頁</a>
</div>
</td>
</tr>
</tbody>
</table>
<div id="g1">
<table class="leftmenulist" style="MARGIN-BOTTOM: 5px" cellSpacing=0
cellPadding="0" width="146" align="center" border="0">
<tbody>
<tr class="leftmenutext">
<td>
<img id="menuimg_11"
src="${pageContext.request.contextPath}/css/main/menu_reduce.gif"
border="0">
<a onclick="collapse_change(11);return false;" href="#">頁面技術</a>
</td>
</tr>
</tbody>
<tbody id="menu_11">
<tr class="leftmenutd">
<td>
<table class="leftmenuinfo" cellSpacing="0" cellPadding="0"
border="0">
<tbody>
<tr>
<td>
<a href="showCourse.do" target="main">綜合練習一</a>
<!-- target是重點，頁面在哪里顯示 -->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="leftmenutd">
<td>
<table class="leftmenuinfo" cellSpacing="0" cellPadding="0"
border="0">
<tbody>
<tr>
<td>
<a href="listProject.do?page=1" target="main">綜合練習二</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="leftmenutd">
<td>
<table class="leftmenuinfo" cellSpacing="0" cellPadding="0"
border="0">
<tbody>
<tr>
<td>
<a href="bookForm.do" target="main">綜合練習三</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="leftmenutd">
<td>
<table class="leftmenuinfo" cellSpacing="0" cellPadding="0"
border="0">
<tbody>
<tr>
<td>
<a href="loginForm.do" target="main">綜合練習四</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="leftmenutd">
<td>
<table class="leftmenuinfo" cellSpacing="0" cellPadding="0"
border="0">
<tbody>
<tr>
<td>
<a href="005/listModule.do" target="main">綜合練習五</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div id="g2" style="display:none">
******************************************
<table class="leftmenulist" style="MARGIN-BOTTOM: 5px" cellSpacing=0
cellPadding="0" width="146" align="center" border="0">
<tbody>
<tr class="leftmenutext">
<td>
<img id="menuimg_11"
src="${pageContext.request.contextPath}/css/main/menu_reduce.gif"
border="0">
<a onclick="collapse_change(11);return false;" href="#">頁面技術</a>
</td>
</tr>
</tbody>
<tbody id="menu_11">
<tr class="leftmenutd">
<td>
<table class="leftmenuinfo" cellSpacing="0" cellPadding="0"
border="0">
<tbody>
<tr>
<td>
<a href="showCourse.do" target="main">綜合練習六</a>
*****************************************************
<!--target的目標意義-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="leftmenutd">
<td>
<table class="leftmenuinfo" cellSpacing="0" cellPadding="0"
border="0">
<tbody>
<tr>
<td>
<a href="listProject.do?page=1" target="main">綜合練習二</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="leftmenutd">
<td>
<table class="leftmenuinfo" cellSpacing="0" cellPadding="0"
border="0">
<tbody>
<tr>
<td>
<a href="bookSearchForm.do" target="main">綜合練習三</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="leftmenutd">
<td>
<table class="leftmenuinfo" cellSpacing="0" cellPadding="0"
border="0">
<tbody>
<tr>
<td>
<a href="loginForm.do" target="main">綜合練習四</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="leftmenutd">
<td>
<table class="leftmenuinfo" cellSpacing="0" cellPadding="0"
border="0">
<tbody>
<tr>
<td>
<a href="005/listModule.do" target="main">綜合練習五</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<table class="leftmenulist" cellSpacing="0" cellPadding="0"
width="146" align="center" border="0">
<tbody>
<tr class="leftmenutext">
<td>
<div style="MARGIN-LEFT: 48px">
<a href="#">退出</a>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
關聯選取（異步）
課程：
主題：
一個課程對應多個主題
從后往前分析
首先要有兩張表：課程表、主題表；兩張表存在關聯關系
//t_course課程表字段為id，name其中id為自增長，主鍵；并插入2條數據
DROP TABLE IF EXISTS t_course;
CREATE TABLE t_course (
id int(11) NOT NULL auto_increment,
name varchar(50) default NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 ROW_FORMAT=COMPRESSED;
#
# Dumping data for table t_course
#
INSERT INTO t_course VALUES (1,'Java語言核心');
INSERT INTO t_course VALUES (2,'組件和框架');
//主題表有id，name，course_id，其中id為主鍵，course_id為外鍵與課程表主鍵值一樣
//通過主外鍵來關聯關系
DROP TABLE IF EXISTS t_subject;
CREATE TABLE t_subject (
id int(11) NOT NULL auto_increment,
name varchar(50) default NULL,
course_id int(11) default NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 ROW_FORMAT=REDUNDANT;
#
# Dumping data for table t_subject
#
INSERT INTO t_subject VALUES (1,'JSP技術',1);
INSERT INTO t_subject VALUES (2,'Servlet技術',1);
INSERT INTO t_subject VALUES (3,'Struts框架',2);
INSERT INTO t_subject VALUES (4,'Hibernate框架',2);
INSERT INTO t_subject VALUES (5,'Spring框架',2);
接下來我們看下Course.java Subject.java
package org.whatisjava.domain;
//實體類；
import java.util.Set;
public class Course {
//course表中無subject；為什么在其實體類中加上該屬性呢？
//
private Integer id;
private String name;
private Set<?> subjects;
//為什么在這里設置一個Set<?> subjects呢？
//這是一對多單向關聯
//主要是從業務角度方面考慮
//當我們選擇課程的時候一定會把主題帶出來；
//與此類似的還有省份----地市等
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Set<?> getSubjects() {
return subjects;
}
public void setSubjects(Set<?> subjects) {
this.subjects = subjects;
}
}
package org.whatisjava.domain;
public class Subject {
private Integer id;
private String name;
private Integer courseId;
//courseId關聯關系;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getCourseId() {
return courseId;
}
public void setCourseId(Integer courseId) {
this.courseId = courseId;
}
}
映射文件
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN"
"http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">
<hibernate-mapping package="org.whatisjava.domain">
<!--針對實體類Course-->
<class name="Course" table="t_course">
<id name="id" type="integer">
<generator class="native" /><!--native：主鍵的生成方法；
碰到oracle用序列；
主要看數據庫用的哪種方言？？
-->
</id>
<property name="name" type="string" />
<set name="subjects">
<key column="course_id" />
<one-to-many class="Subject" />
<!--set name為subjects，類名為Subject；其關聯列名為course_id；通過couse_id來進行映射-->
</set>
</class>
<!--針對實體類Subject-->
<class name="Subject" table="t_subject">
<id name="id" type="integer">
<generator class="native" />
</id>
<property name="name" type="string" />
<property name="courseId" column="course_id" type="integer" />
</class>
<!--如果type也省略的話表示是string；如果column也省略的話表示的與列名一樣-->
<query name="findAllCourse">
<![CDATA[
from Course
]]>
<!--這里面是純文本；-->
</query>
<!--在這里的意思是可以在避免在程序中直接使用HQL語句；-->
<query name="findAllCourseWithSubjects">
<![CDATA[
from Course c left outer join fetch c.subjects
]]>
<!--為什么要加left outer；因為如果不加這個，沒有主題的課程就提取不出來-->
</query>
</hibernate-mapping>
將mapping001.xml文件配置項加入到hibernate.cfg.xml
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE hibernate-configuration PUBLIC
"-//Hibernate/Hibernate Configuration DTD 3.0//EN"
"http://hibernate.sourceforge.net/hibernate-configuration-3.0.dtd">
<hibernate-configuration>
<session-factory>
<property name="myeclipse.connection.profile">mysql</property>
<property name="connection.url">
jdbc:mysql://localhost:3306/palace
</property>
<property name="connection.username">root</property>
<property name="connection.password">******</property>
<property name="connection.driver_class">
com.mysql.jdbc.Driver
</property>
<property name="show_sql">true</property>
<!-- 這句話的意思是什么呢？在運行hibernate語句的時候把sql語句打印出來 -->
<property name="dialect">
org.hibernate.dialect.MySQLDialect
</property>
<mapping resource="org/whatisjava/domain/mapping001.xml" />
<mapping resource="org/whatisjava/domain/mapping003.xml" />
<mapping resource="org/whatisjava/domain/mapping002.xml" />
</session-factory>
</hibernate-configuration>
在這里我們主要是采用接口，實現接口來進行
//CourseDao接口，本身無實現；通過CourseDaoImpl來實現
//只有方法定義
package org.whatisjava.dao;
import java.util.List;
public interface CourseDao {
public List<?> findAllCourse();
public List<?> findAllCourseWithSubjects();
}
//*CourseDaoImpl實現類
package org.whatisjava.dao;
import java.util.ArrayList;
import java.util.List;
import org.hibernate.Query;
import org.hibernate.Session;
import org.whatisjava.domain.Course;
public class CourseDaoImpl implements CourseDao {
/**
* 返回所有的課程
*/
public List<?> findAllCourse() {
return list;
}
/**
* 返回所有的課程且帶主題
*/
public List<?> findAllCourseWithSubjects() {
return list;
}
}
在這里就不能再通過***Dao xxx=new xxxDao（）來創建實例了。
最好是通過一個工廠來生產一個實例
構建一個DaoFactory工廠
package org.whatisjava.dao;
public class DaoFactory {
public static CourseDao getCourseDao(){
//切記返回值為CourseDao
return new CourseDaoImpl();
//這個方法是什么意思呢？
//CourseDao XXXXX=new CourseDaoImpl();
}
}
//這樣操作的話，代碼里面就不會出現CourseDaoImpl()了。
考慮到CourseDaoImpl實現中會連接數據庫，在這里采用hibernate，則最好需要一個HibernateSessionFactory
HibernateSessionFactory工廠
package org.whatisjava.dao;
import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.hibernate.cfg.Configuration;
public class HibernateSessionFactory(){
private static Configuration conf;
private static SessionFactory factory;
static {
conf=new Configuration();
conf.configure();
factory=conf.buildSessionFactory();
}
public static Session openSession(){
return factory.openSession();
}
}
構建一個測試類：
package org.whatisjava.test;
import org.whatisjava.dao.CourseDao;
import org.whatisjava.dao.DaoFactory;
public class TestCourseDao {
public static void main(String [] args){
CourseDao dao=DaoFactory.getCourseDao();
dao.findAllCourse();
}
}
//*CourseDaoImpl實現
package org.whatisjava.dao;
import java.util.ArrayList;
import java.util.List;
import org.hibernate.Query;
import org.hibernate.Session;
import org.whatisjava.domain.Course;
public class CourseDaoImpl implements CourseDao {
/*
* 返回所有的課程
*/
public List<?> findAllCourse() {
//先獲得session；
//通過createQuery返回值為query對象
Session session = HibernateSessionFactory.openSession();
//Query query=session.createQuery("from Course");
Query query=session.createQuery("from Course c join fetch c.subjects");
//Query query=session.createQuery("select distinct c from Course c join fetch c.subjects");
//聯合抓取
//采用select distinct c from Course c join fetch c.subjects在3.2的版本之后可以清除重復的
//一般情況下，我們不想把HQL寫到這里，最好的是寫到映射文件里面
//Query query=session.getNamedQuery("findAllCourse");
//定義到映射文件里面
List<?> list=query.list();
//假設createQuery("from Course")返回的 list里面應該有課程的數據,但無主題的數據；
System.out.println(list);
Course c1=(Course)list.get(0); //list.get(0);
//list.get(0);
System.out.println(c1.getName()); //getName();
System.out.println(c1.getSubjects());
//由于延遲加載，session從這里關閉后就不能再引用數據了。
//1、請求不在這里關可以等數據拿出來之后再關；比如通過過濾器來關閉
//2、或者在mapping.xml文件里面<set name="subjects" lazy=false></set>對應位置加上lazy=false???
//一旦加上lazy=false之后，就不會再有延遲加載了。
//執行的時候就可以看到n+1條sql語句
//什么叫n+1查詢語句？就是說如果用默認的方式取數據的話，就看couse表里面有n條記錄；
//等用到的時候再根據每一個couse_id把數據查詢出來
//這樣查詢的話，效率是比較低的。但是延遲加載的話，必須是n+1
//hibernate即使設置不使用延遲加載的時候，還是n+1
//我們改變這種方式的話，兩個表做連接即可
//就是把上面的query語句由A變成B即可
A:Query query=session.createQuery("from Course");
B:Query query=session.createQuery("from Course c join fetch c.subjects");
//在查詢subject表；
//先取出一條couse記錄
session.close();
return list;
}
/**
* 返回所有的課程且帶主題
*/
public List<?> findAllCourseWithSubjects() {
// TODO Auto-generated method stub
Session session=HibernateSessionFactory.openSession();
Query query=session.getNamedQuery("findAllCourseWithSubjects");
List <?> list=query.list();
session.close();
List list1=new ArrayList();
for (int i=0;i<list.size();i++){
if (!list1.contains(list.get(i))){
list1.add(list.get(i));
//集合里面的方法contains
//拿里面的對象用equals來進行比較
//看是否重寫equals
//對象的相等邏輯是否真正相等的。
}
}
return list1;
}
}
課程：
java基礎
框架
主題：
java基礎--jsp基礎；corejava；
框架----hibernate；struts；spring；
當選擇課程時，主題變化
可以分為兩種方式來解決：
1、數據量大的時候，可以全部取出來由JS來控制。
請求先發給前端控制器----action----dao----返回數據到action----jsp-----瀏覽器
在這里并不是把數據全部顯示在頁面上，而是由js來控制分層顯示
2、
請求----畫出頁面---頁面中js異步請求數據；這樣
寫一個action只顯示頁面；
第二個action去獲取數據----只是解析成json字符串
struts-config.xml
<action path="" type="">
</action>
ListCourseAction
package org.whatisjava.action;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import org.whatisjava.dao.CourseDao;
import org.whatisjava.dao.DaoFactory;
public class ListCourseAction extends Action {
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception{
CourseDao dao=DaoFactory.getCourseDao();
//建立dao
List list=dao.findAllCourseWithSubjects();
//獲得課程和主題
JSONArray json = JSONArray.fromObject(list);
response.setContentType("text/html;charset=utf-8");
response.getWriter().write(json.toString());
return null;
}
}
Course_form.jsp頁面文件
<%@page contentType="text/html;charset=utf-8"%>
<%@include file="../common.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<link href="<%=request.getContextPath() %>/css/main/style.css"
type=text/css rel=stylesheet />
<script type="text/javascript"
src="<%=request.getContextPath() %>/js/prototype-1.6.0.3.js"></script>
<script type="text/javascript">
var courseObj = null;//全局變量
// 異步加載課程信息
function loadCourse() {
new Ajax.Request("listCourse.do", {
method :"get",
onSuccess : function(req) {//表示狀態變成4之后，調用的方法；req是被封裝起來的request對象
courseObj = req.responseText.evalJSON();
//響應回來的是一些文本對象，通過JSON將其轉換成數組
//返回的是一組課程，數組；數組里面的元素是對象；
fillCourse();
}
//Ajax.Request有2個參數,第一個是字符串;第二個是對象(有2個屬性,第一個屬性是字符串;第二個屬性是一個方法)
//是prototype來提供的
//new Ajax.Request("url",{method:"",onSucess:function(resp){...} }有兩個參數
//向url地址發送請求；method是請求的類型，響應成功后會調用一個方法，這個方法會被傳進來一個參數。
//傳進來的這個參數就是Ajax.Request封裝好的一個原始的請求對象
//｛里面內容｝：意思是響應成功之后要做什么事
});
}
/*
* 填充課程和主題
*/
function fillCourse() {
if (courseObj != null) {
var courseSelect = $('course'); //$ 即為：document.getElementByID
//這里的course為下面的select的id；
for (i = 0; i < courseObj.length; i++) {
// select 對象的屬性options，表示其下所有的Option
// JS 中通過new Option 創建 option 對象；在java中是不能增加數組的長度的而js是可以隨便增加的；
courseSelect.options[i] = new Option(courseObj[i].name,courseObj[i].id);
//第一個參數是中間顯示的內容，第二個參數是提交的值
//以前就有的話，則會覆蓋，如果沒有的話就是新增
}
courseSelect.options[0].selected = true;
//courseSelect對象是select元素所對應的對象；第0個option被選中
fillSubject(courseObj[0].subjects);
//填充下面那個選擇項（傳輸了一個參數過來）
}
}
function fillSubject(subjectObj) {
var subjectSelect = $('subject');
//subjectSelect.length=0; 目的是清空option；防止遺留上次的option
subjectSelect.length = 0;
for (i = 0; i < subjectObj.length; i++) {
subjectSelect.options[i] = new Option(subjectObj[i].name,
subjectObj[i].id);
}
}
/*
* 變更課程
*/
function changeCourse(index) {
var courseSelect = $('course');
courseSelect.options[index].selected = true; //index表示要改成誰？
fillSubject(courseObj[index].subjects);
}
</head>
<body topMargin="10">
<div id="append_parent"></div>
<table cellSpacing=6 cellPadding=2 width="100%" border=0>
<tbody>
<tr>
<td>
<table class=guide cellSpacing=0 cellPadding=0 width="100%"
border=0>
<tbody>
<tr>
<td>
<a href="#">頁面技術</a> ?
<a href="#">001</a> ? 關聯選取（異步方式）
</td>
</tr>
</tbody>
</table>
<br />
<form id="settings" name="settings" action="#" method="post">
<table class="tableborder" cellSpacing="0" cellPadding="0"
width="100%" border="0">
<tbody>
<tr class="header">
<td colSpan="2">
關聯選取
</td>
</tr>
<tbody>
<tr>
<td class="altbg1" width="20%">
<b>課程:</B>
</td>
<td class="altbg2">
<select name="courseId" id="course"
onchange="changeCourse(this.selectedIndex)">
<!-- this表示當前選中的select的id;這個需要看w3cshcool文檔 -->
<option value="-1">
--請選擇課程--
</option>
</select>
</td>
</tr>
<tr>
<td class="altbg1" width="20%">
<b>主題:</b>
</td>
<td class="altbg2">
<select name="subjectId" id="subject">
<option value="-1">
--請選擇主題--
</option>
<!--提交的是值，以及顯示的內容、
-->
</select>
</td>
</tr>
</tbody>
</table>
<!--異步加載數據
//為什么不要寫在這里？
如果代碼放在前面的話，瀏覽器是從上到下面加載頁面
loadCourse使用了select元素所以必須放在select元素的后面
-->
<script type="text/javascript">
loadCourse();
</script>
<br />
<center>
<input type="hidden" name="from">
<input class="button" type="submit" value="提 交"
name="settingsubmit">
</center>
</form>
</td>
</tr>
</tbody>
</table>
</body>
</html>
honghu79 
seailove