<arkoo:title>__麻雀苑</arkoo:title>

3-6应用application更新网站

作者：老麻雀 2006-10-22 23:45:46

应用application实现动态网站功能
　　动态网页从字面含义来理解，就是网页中的内容可以随时更新。如果一个网页的页面结构稳定，而内容需有频繁更换，可以使用application技术来实现。本节介绍的只是原理和基本方法，在网页动态更新实用技术中，还要使用数据库技术。在后面学习连接数据库后，读者可以应用application制作真正的动态更新网页。
一、范例的演示和代码清单
　　演示步骤：
1. 启动JSP引擎后，启动IE，在地址栏键入http://127.0.0.1:8080/ch3/ch3-5a.htm，如图3-18所示窗口：
　　
　　图 3-18
　　
2. 点击“查看当前网页” 按钮，可以看到原有的网页界面，点击“新闻一”或“新闻二”链接，可以看到相应的内容。如图3-19
　　
　　
　　图 3-19
3. 点击“更新管理”超链接，可以回到图3-18的界面，
　　　　在“主题栏图片”下拉列表中选择所需的图片；
　　　　在“第一条新闻”的“标题”文本框中输入所需的文字（本例是“学院新闻一”）；
　　　　在“第一条新闻”的“内容”下拉列表中选择所需的内容（本例是“头条A稿”）；
　　　　然后用上述方法，设置第二条和第三条新闻的“标题”和“内容”；如图3-20所示窗口，最后点击“更新查看网页”按钮。
　　
　　图 3-20
　　　　
4. 可以看到原来的网页中主题栏图片、新闻标题、新闻标题链接的内容都更新发生了变化，如图3-21所示：

　　图 3-21

5. 点击“更新管理”超链接，回到图3-18的界面，再次选择新的更新内容，进行更新操作，又可以看到另一种更新页面。
　　这组网页由ch3-5a.htm、ch3-5a.jsp、ch3-5b.jsp三个网页构成，ch3-5a.htm是一个HTML表单的管理界面，用于管理员输入更新的数据。ch3-5a.jsp是将ch3-5a.htm提供的数据写入application，停顿二秒钟转入更新后的页面。ch3-5b.jsp是可以更新的网页页面，页面上所有能够更新的内容，用JSP变量的值来展现，而JSP变量的值通过读取application取得。
　　以下是三个网页的代码：
◇－◇－◇－◇－◇－◇ 新闻页更新管理 ◇－◇－◇－◇－◇
范例ch3-5a.htm
1) <%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" %>
2) <html>
3) <head>
4) <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
5) <title>使用application更新网页</title>
6) <script language="JavaScript" type="text/JavaScript">
7) function MM_goToURL() ｛ //v3.0
8)   var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
9)   for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location=""+args[i+1]+""");
10) ｝
11) </script>
12) <style type="text/css">
13) 
17) </style>
18) </head>
19) <body>
20) <h1>新闻页更新管理</h1>
21) <form name="form1" method="post" action="ch3-5a.jsp">
22)   <table width="520" border="1">
23)
24)     <tr>
25)       <td align="center" bordercolor="#FFFFFF" class="STYLE8">更新内容设置</td>
26)       <td colspan="2" bordercolor="#FFFFFF">
27)         <div align="right">
28)           <input name="Submit" type="button" onClick="MM_goToURL("parent","ch3-5b.jsp");return document.MM_returnValue" value="查看当前网页">
29)         </div></td>
30)     </tr>
31)     <tr>
32)       <td width="163" align="center"><span class="STYLE7">主题栏图片</span></td>
33)       <td colspan="2">        <select name="myimg" id="myimg">
34)         <option value="a.jpg">图片一</option>
35)         <option value="b.jpg">图片二</option>
36)         <option value="c.jpg">图片三</option>
37)         <option value="d.jpg">图片四</option>
38)         <option value="e.jpg">图片五</option>
39)         <option value="f.jpg">图片六</option>
40)         </select>      </td>
41)     </tr>
42)     <tr>
43)       <td align="center"><span class="STYLE7">第一条新闻</span></td>
44)       <td width="207"><span class="STYLE7">
45)         <label>标题
46)           <input name="bt1" type="text" value="新闻一">
47)         </label>
48)       </span></td>
49)       <td width="128"><span class="STYLE7">内容
50)           <select name="text1" id="text1">
51)             <option value="newa1.htm">头条A稿</option>
52)             <option value="newb1.htm">头条B稿</option>
53)             <option value="newc1.htm">头条C稿</option>
54)             </select>
55)       </span></td>
56)     </tr>
57)     <tr>
58)       <td align="center"><span class="STYLE7">第二条新闻</span></td>
59)       <td><span class="STYLE7">
60)         <label>标题
61)           <input name="bt2" type="text" value="新闻二">
62)         </label>
63)       </span></td>
64)       <td><span class="STYLE7">内容
65)           <select name="text2" id="text2">
66)             <option value="newa2.htm">二条A稿</option>
67)             <option value="newb2.htm">二条B稿</option>
68)             <option value="newc2.htm">二条C稿</option>
69)             </select>
70)       </span></td>
71)     </tr>
72)     <tr>
73)       <td align="center"><span class="STYLE7">第三条新闻</span></td>
74)       <td><span class="STYLE7">
75)         <label>标题
76)         <input name="bt3" type="text" value="新闻三">
77)         </label>
78)       </span></td>
79)       <td><span class="STYLE7">内容
80)           <select name="text3" id="text3">
81)             <option value="newa3.htm">三条A稿</option>
82)             <option value="newb3.htm">三条B稿</option>
83)             <option value="newc3.htm">三条C稿</option>
84)                               </select>
85)       </span></td>
86)     </tr>
87)     <tr>
88)       <td align="center" bordercolor="#FFFFFF"> </td>
89)       <td colspan="2" bordercolor="#FFFFFF"><div align="center"><span class="STYLE7">
90)         </span><span class="STYLE7">
91)         </span></div>
92)         <span class="STYLE7"><label>        </label>
93)         </span>
94)         <label>
95)         <div align="right"><span class="STYLE7">
96)           <input type="submit" name="Submit2" value="更新查看网页">
97)           </span>
98)           </label>
99)       <span class="STYLE7"></span></div></td>
100)     </tr>
101)   </table>
102) </form>
103) <p><a href="index.htm">返回</a></p>
104) </body>
105) </html>

◇－◇－◇－◇－◇－◇ 定义application中的数据 ◇－◇－◇－◇－◇
范例ch3-5a.jsp
1) <%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" %>
2) <html>
3) <title>定义application中的数据</title>
4) <body>
5) <p>
6)   <%@page import="java.util.*"%>
7)   <%
8) String myimg=request.getParameter("myimg");
9) String bt1=request.getParameter("bt1");
10) String bt2=request.getParameter("bt2");
11) String bt3=request.getParameter("bt3");
12) String mytext1=request.getParameter("text1");
13) String mytext2=request.getParameter("text2");
14) String mytext3=request.getParameter("text3");
15) application.setAttribute("dirimg",myimg);
16) application.setAttribute("bt1",bt1);
17) application.setAttribute("bt2",bt2);
18) application.setAttribute("bt3",bt3);
19) application.setAttribute("dirtext1",mytext1);
20) application.setAttribute("dirtext2",mytext2);
21) application.setAttribute("dirtext3",mytext3);
22) out.print("更新完成。二秒钟后进入更新后的网页<P>");
23) response.setHeader("Refresh","2;URL=ch3-5b.jsp");
24) %>
25) </p>
26) <p><a href="ch3-5b.jsp">查看</a></p>
27) </body>
28) </html>

◇－◇－◇－◇－◇－◇ 定义application中的数据 ◇－◇－◇－◇－◇
范例ch3-5b.jsp
1) <%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" %>
2) <html>
3) <title>取得application 中的数据</title>
4) <style type="text/css">.STYLE1 ｛
5) font-family: "楷体_GB2312"; font-weight: bold; font-size: large; color: #0000FF;｝
6) </style>
7) <body>
8) <%@page import="java.util.*"%>
9) <%!
10) String tp,xw1,xw2,xw3,bt1,bt2,bt3,btimg,new1,new2,new3;
11) %>
12) <%
13) tp=(String)application.getAttribute("dirimg");
14) bt1=(String)application.getAttribute("bt1");
15) bt2=(String)application.getAttribute("bt2");
16) bt3=(String)application.getAttribute("bt3");
17) xw1=(String)application.getAttribute("dirtext1");
18) xw2=(String)application.getAttribute("dirtext2");
19) xw3=(String)application.getAttribute("dirtext3");
20)
21) if(tp==null)
22)    tp="1.jpg";
23) if(bt1==null)
24)    bt1="新闻一";
25) if(bt2==null)
26)    bt2="新闻二";
27) if(bt3==null)
28)    bt3="新闻三";
29) if(xw1==null)
30)    xw1="newc1.htm";
31) if(xw2==null)
32)    xw2="newc2.htm";
33) if(xw3==null)
34)    xw3="newc3.htm";
35)
36) btimg="img/"+tp;
37) new1="new/"+xw1;
38) new2="new/"+xw2;
39) new3="new/"+xw3;
40) %>
41) <table width="771" height="514" border="1">
42)   <tr>
43)     <td height="113" colspan="4"><img src="<%=btimg%>" width="764" height="114"></td>
44)   </tr>
45)   <tr>
46)     <td width="151" height="42"><div align="center" class="STYLE1">新闻</div></td>
47)     <td width="604" colspan="3" rowspan="3"> </td>
48)   </tr>
49)   <tr>
50)     <td valign="top"><p>1.<a href="<%=new1%>" target="_blank"><%=bt1%></a></p>
51)       <p>2.<a href="<%=new2%>" target="_blank"><%=bt2%></a></p>
52)     <p>3.<a href="<%=new3%>" target="_blank"><%=bt3%></a></p></td>
53)   </tr>
54)   <tr>
55)     <td align="center" valign="middle"><a href="ch3-5a.htm">更新管理</a></td>
56)   </tr>
57) </table>
58) <p align="center"> </p>
59) </body>
60) </html>
二、设计思路和制作方法
　　一个内容需要经常更新的网页，更新内容在页面上的位置应相对不变，所占幅面也应相对稳定。在页面布局时，用JSP变量替代页面元素，安放在页面的相应位置。当JSP变量的值（内容）发生变化时，页面就可以随之发生变化。另外要有一个后台的控制页面，为前台页面中的JSP变量输送数据。系统管理员使用后台的控制页面，就可以轻易的实现前台页面的更新。
　　实现上面的思路要认识到，更新的网页，让每个用户都得能正常访问，需用application。还要合理的组织站点文件夹，将更新的内容保存在站点指定文件夹内，以便application的变量中，存放更新内容的路径和文件名。
　　本范例能够更新“主题栏图片”、“新闻标题”和“新闻内容”三种页面元素。设计制作的过程如下：
　　第一步：设计制作前台网页ch3-5b.jsp
1. 先在站点文件夹内创建img和new两个子文件夹，img文件夹存放用于更新用的主题图片（本例存放了1.jpg、a.jpg、b.jpg、c.img等七个图片文件），new文件夹存放用于更新用的新闻网页（本例存放了newa1.htm、newb1.htm、newc1.htm、newa2.htm等九个网页文件）。
2. 使用Dreamweaver图形设计界面创建前台网页，采用表格方式布局，如图3-22所示：

主题图片（1.jpg）
新闻

1.标题一
2.标题二
3.标题三

　　图 3-22
在图中“主题图片”位置插入一幅图片（1.img）；在“标题一”、“标题二”、“标题三”位置键入三个新闻标题的文字（标题一、标题二、标题三），并给三个标题文字加上“目标”为_blank（弹出新窗口）的“超连接”，分别链接到new文件夹内三个新闻网页文件（newc1.htm、newc2.htm、newc3.htm）。
3. 从Dreamweaver图形“设计”界面，转换的“代码”界面。在表格标记的代码前，插入JSP代码行。代码的内容为定义JSP变量（tp、bt1、bt2、bt3、xw1、xw2、xw3），读取application，再根据上面的代码，定义图片URL的变量（btimg）和三个新闻网页文件URL的变量（new1、new2、new3）。
4. 最后在用图形用“设计”界面的代码行中，用图片URL的变量（btimg）替换原来的图片文件名（1.img），用三个新闻标题的变量（bt1、bt2、bt3）替换原来的三个新闻标题文字（标题一、标题二、标题三），用三个新闻网页文件URL的变量（new1、new2、new3）替换原来链接的三个新闻网页文件名（newc1.htm、newc2.htm、newc3.htm）。
第二步：设计制作后台控制网页ch3-5a.htm
1. 使用Dreamweaver图形设计界面创建后台控制网页的页面，如图3-23所示：

图 3-23所示
2. 在“主题栏图片”对应下拉列表的属性面板中，列表值设计如图3-24、表3-1所示：
项目标签
值
图片一
a.jpg
图片二
b.jpg
图片三
c.jpg
图片四
d.jpg
图片五
e.jpg
图片六
f.jpg

　　　　　　　　　　图3-24 表 3-1

3. 在“第一条新闻”“内容”对应下拉列表的属性面板中，列表值设计如下，如图3-25、表3-2所示：
项目标签
值
头条A稿
newa1.htm
头条B稿
newb1.htm
头条C稿
newc1.htm

　　　　　　　　　　　图 3-25 表 3-2
　　　　　　　　　　　
4. 在“第二条新闻”“内容”对应下拉列表的属性面板中，列表值设计如下，如图3-26、表3-3所示：
项目标签
值
二条A稿
newa2.htm
二条B稿
newb2.htm
二条C稿
newc2.htm

　　　　　　　　　　　　图 3-26 表 3-3
　　　　　　　　　　　　
5. 在“第二条新闻”“内容”对应下拉列表的属性面板中，列表值设计如下，如图3-27、表3-4所示：
项目标签
值
三条A稿
newa3.htm
三条B稿
newb3.htm
三条C稿
newc3.htm

　　　　　　　　　　　图 3-27 表3-4

6. 将“查看当前网页”的按钮链接到ch3-5b.jsp（本例为按钮添加了一个转向URL为ch3-5b.jsp的“行为”）。
7. “更新查看网页”的按钮，是这个表单的“提交”表单的按钮，只是将按钮的文字改成“更新查看网页”。
8. “第一条新闻”“标题”对应的文本框中，设置初始值“新闻一”
　　　　“第二条新闻”“标题”对应的文本框中，设置初始值“新闻二”
　　　　“第三条新闻”“标题”对应的文本框中，设置初始值“新闻三”
第三步：设计制作写入application的动态网页ch3-5a.jsp
　　这个动态网页的作用是，获得ch3-5a.htm表单网页提交的数据，将数据写入application。然后转到前台网页ch3-5b.jsp。设计制作过程完全是编写JSP代码，代码的内容如下：
1. 定义七个JSP变量，获得ch3-5a.htm表单网页提交的数据。
2. 将七个JSP变量的数据分别写入application的变量中。
3. 延时二秒，转向前台网页ch3-5b.jsp。
三、网页重点代码的分析
　　这个范例三个网页之间的关系很重要，前台网页ch3-5b.jsp每次被访问时，都读取application，因此只要application的值（更新内容）不变，页面上内容也不会发生变化。当需要更新页面内容时，ch3-5a.htm和ch3-5a.jsp两个网页配合，改变application的值就实现了前台页面的更新。
和更新功能有关的代码行提示如下：
　　数据写入application的代码行：
在ch3-5a.jsp的15－21行：
15) application.setAttribute("dirimg",myimg);
16) application.setAttribute("bt1",bt1);
17) application.setAttribute("bt2",bt2);
18) application.setAttribute("bt3",bt3);
19) application.setAttribute("dirtext1",mytext1);
20) application.setAttribute("dirtext2",mytext2);
21) application.setAttribute("dirtext3",mytext3);
　　application是JSP的默认对象。setAttribute（）是将数据写入的方法，（）括号内的第一个参数，是定义的application变量名，第二个参数是写入该变量的值。
　　
　　从application中读取数据的代码行：
在ch3-5b.jsp的13－19行
13) tp=(String)application.getAttribute("dirimg");
14) bt1=(String)application.getAttribute("bt1");
15) bt2=(String)application.getAttribute("bt2");
16) bt3=(String)application.getAttribute("bt3");
17) xw1=(String)application.getAttribute("dirtext1");
18) xw2=(String)application.getAttribute("dirtext2");
19) xw3=(String)application.getAttribute("dirtext3");
　　第13行的含义是，从application的dirimg变量中读取数据，将数据转换成字符串型赋值给变量yp。代码中getAttribute( ) 是从application中读取数据的方法，（）括号内的参数是application的变量名。
　　
　　网页更新过程的代码行：
　　从后台提供更新数据，将数据写入application，再从application中读取数据，然后在前台网页上显示更新的内容，经历了三个网页的工作。下面以“标题栏图片”更新的过程为例，进行具体的说明。
　　输入“标题栏图片”更新数据的代码是ch3-5a.htm中33－40行
33)       <td colspan="2">        <select name="myimg" id="myimg">
34)         <option value="a.jpg">图片一</option>
35)         <option value="b.jpg">图片二</option>
36)         <option value="c.jpg">图片三</option>
37)         <option value="d.jpg">图片四</option>
38)         <option value="e.jpg">图片五</option>
39)         <option value="f.jpg">图片六</option>
40)         </select>      </td>
　　这是一个下拉列表的代码（图3-24是它进行设置的图形界面），列表中有六项，图片一的值是a.jpg，图片二的值是b.jpg等。更新操作时如果从下拉列表选择了图片一。点击“更新查看网页”按钮提交后，33行中的“myimg”中的数据（图片文件名a.jpg）将被提交。
　　
　　将“标题栏图片”更新数据写入application的代码是ch3-5a.jsp中的8行、15行
8) String myimg=request.getParameter("myimg");
15) application.setAttribute("dirimg",myimg);
　　第8行：定义变量获得数据，图片一的文件名“a.jpg”被赋值给JSP变量myimg。
　　第15行：变量myimg的值（图片文件名a.jpg）被写入application的变量dirimg中。
　　
　　从application中读取“标题栏图片”更新数据，送到屏幕上显示的代码行是ch3-5b.jsp中的13行、36行、43行
13) tp=(String)application.getAttribute("dirimg");
36) btimg="img/"+tp;
43) <td height="113" colspan="4"><img src="<%=btimg%>" width="764" height="114"></td>
　　第13行：从application的变量dirimg中读取数据（图片文件名a.jpg）赋值给变量tp。
　　第36行：为图片文件名a.jpg加上路径img/，成为“img/a.jpg”赋值给变量btimg。（所有图片应事先复制到img文件夹内）
　　第43行：在指定的单元格中，放置变量btimg，显示图片
　　以上三个网页不同代码的配合下，图片“a.jpg”成了前台页面的主题栏图片。
　　三个标题文字、三个链接内容的更新过程和上述图片更新的过程大同小异。

我也说两句

E-File帐号：用户名：密码： [注册]

评论：（内容不能超过500字，如果您不填写用户名和密码只能以游客的身份发表评论。）

*评论内容将在30分钟以后显示！

发文时请务必注意：
一、遵守国家相关法律规定，如《北京地区互联网站电子公告服务倡议书》，《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规。一旦违犯法律法规，您将承担一切因您的行为而直接或间接导致的民事或刑事法律责任，本站工作人员有义务配合相关部门，提供必要的技术资料（如IP地址等）。
二、自觉遵守爱国、守法、自律、真实、文明的原则，严禁发表有人身攻击倾向、有造谣生事嫌疑的言论，严禁发表虚假广告、色情、网络传销性质的内容，本站管理人员有权删除违反规定的内容或取消违规网友的发文权限甚至删除其ID。