<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分钟以后显示！

发表须知：
一、用户须严格遵守国家法律和政策，包括但不限于《全国人大常委会关于维护互联网安全的决定》、《信息网络传播权保护条例》等规定，审慎、合法地利用伊妃（E-file）平台发表言论、作品。
二、用户的言论、行为若涉嫌违法或侵权，用户可能被强制承担因该行为直接或间接导致的全部法律责任。依照法律法规规定，伊妃（E-file）运营方有义务提供用户资料，有义务和权利采取删除、屏蔽、断开链接等各种必要措施。
三、伊妃（E-file）中心授权网络法律专业研究服务机构“网络法苑”为用户及客户提供包括免费咨询在内的全方位的法律支持。