BlogJava-CONAN ZONE-文章分类-HTML/CSS

JSP页面缓存技术--浏览器缓存

CONAN — Tue, 09 Mar 2010 08:20:00 GMT

一、概述

缓存的思想可以应用在软件分层的各个层面。它是一种内部机制，对外界而言，是不可感知的。

数据库本身有缓存，持久层也可以缓存。（比如：hibernate，还分1级和2级缓存）

业务层也可以有缓存（但一般来说，这是一个过程域，不会设缓存）。

表现层/数据服务层（传统web的表现层）也可以设置缓存（jsp cache 就是这一层，实现在app server上的缓存机制）

另外Browser也有缓存（如IE）这个大家也都知道（实现在 web server 上的缓存机制）。越上层的缓存效果越好，越底层的缓存影响越深远。

二、缓存实现（浏览器缓存当前访问的JSP动态页面）

（一）、服务端方法：

<％
response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cache");
response.setDateHeader("Expires", -10);
％>

（二）、客户端方法：

meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的＜head＞与＜/head＞中，meta 标签的用处很多。meta 的属性有两种：name和http-equiv。name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。这其中最重要的是description（站点在搜索引擎上的描述）和keywords（分类关键词），所以应该给每页加一个meta值。比较常用的有以下几个：
name 属性
1、＜meta name="Generator" contect=""＞用以说明生成工具（如Microsoft FrontPage 4.0）等；
2、＜meta name="KEYWords" contect=""＞向搜索引擎说明你的网页的关键词；
3、＜meta name="DEscription" contect=""＞告诉搜索引擎你的站点的主要内容；
4、＜meta name="Author" contect="你的姓名"＞告诉搜索引擎你的站点的制作的作者；
5、＜meta name="Robots" contect="all|none|index|noindex|follow|nofollow"＞

其中的属性说明如下：
设定为all：文件将被检索，且页面上的链接可以被查询；
设定为none：文件将不被检索，且页面上的链接不可以被查询；
设定为index：文件将被检索；
设定为follow：页面上的链接可以被查询；
设定为noindex：文件将不被检索，但页面上的链接可以被查询；
设定为nofollow：文件将不被检索，页面上的链接可以被查询。

http-equiv属性
1、＜meta http-equiv="Content-Type" contect="text/html";charset=gb_2312-80"＞
和＜meta http-equiv="Content-Language" contect="zh-CN"＞用以说明主页制作所使用的文字以及语言；又如英文是ISO-8859-1字符集，还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集；
2、＜meta http-equiv="Refresh" contect="n;url=http://yourlink"＞定时让网页在指定的时间n内，跳转到页面http;//yourlink；
3、＜meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT"＞可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式；
4、＜meta http-equiv="Pragma" contect="no-cache"＞是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出；
5、＜meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT"＞cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式；
6、＜meta http-equiv="Pics-label" contect=""＞网页等级评定，在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的；
7、＜meta http-equiv="windows-Target" contect="_top"＞强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用；
8、＜meta http-equiv="Page-Enter" contect="revealTrans(duration=10,transtion= 50)"＞和＜meta http-equiv="Page-Exit" contect="revealTrans(duration=20，transtion =6)"＞设定进入和离开页面时的特殊效果，这个功能即FrontPage中的“格式/网页过渡”，不过所加的页面不能够是一个frame页面。

三、缓存应用

（一）、防止JSP页面缓存为了防止浏览器缓存当前访问的JSP动态页面，可以采用如下的方式进行设置：
<%
// 将过期日期设置为一个过去时间

response.setHeader("Expires", "Sat, 6 May 199512:00:00 GMT");

// 设置 HTTP/1.1 no-cache 头
response.setHeader("Cache-Control", "no-store,no-cache,must-revalidate");

// 设置 IE 扩展 HTTP/1.1 no-cache headers，用户自己添加
response.addHeader("Cache-Control", "post-check=0, pre-check=0");

// 设置标准 HTTP/1.0 no-cache header.
response.setHeader("Pragma", "no-cache");
%>

当然，每一个页面都包含这些代码会很繁琐，可以通过自定义过滤器（Filter）的方法来处理相关的页面

（二）、jsp,html 清除页面缓存

1.禁止客户端缓存要在中加入类似如下内容：

Wed, 26 Feb 199708:21:57 GMT">

或

2.在服务器的动态网页中禁止缓存，要加入类似如下脚本

response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cache");
response.setDateHeader("Expires", 0);

（三）设置有限时间的缓存

int minutes = 10;

Date d = new Date();

String modDate = d.toGMTString();

String expDate = null;

expDate = (new Date(d.getTime() + minutes * 60000)).toGMTString();

response.setHeader("Last-Modified", modDate);

response.setHeader("Expires", expDate);

response.setHeader("Cache-Control", "public"); // HTTP/1.1

response.setHeader("Pragma", "Pragma"); // HTTP/1.0

补充：关于.jsp cache的几条建议:

1.jsp cache最好做在过滤器上,把需要缓冲的页面集中在同一个目录下,每次更改只须更改web.xml就可以完成缓冲设置,这样比较方便.

2.Gzip压缩可以将页面压缩得很小,平均压缩比为1/3,jsp cache的HashMap缓冲压缩后的页面,肯定比没压缩前更节约内存消耗,并且效率更高.关于Gzip可以参考这个开源项目:http://sourceforge.net/projects/pjl-comp-filter

CONAN 2010-03-09 16:20 发表评论

HTML中事件触发列表与解说[转]

CONAN — Fri, 20 Jun 2008 14:52:00 GMT

HTML中事件触发列表与解说[转]

一般事件
事件	浏览器支持	描述
onClick	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE3 \| N2 \| O3	鼠标点击事件，多用在某个对象控制的范围内的鼠标点击
onDblClick	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE4 \| N4 \| O	鼠标双击事件
onMouseDown	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE4 \| N4 \| O	鼠标上的按钮被按下了
onMouseUp	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE4 \| N4 \| O	鼠标按下后，松开时激发的事件
onMouseOver	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE3 \| N2 \| O3	当鼠标移动到某对象范围的上方时触发的事件
onMouseMove	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE4 \| N4 \| O	鼠标移动时触发的事件
onMouseOut	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE4 \| N3 \| O3	当鼠标离开某对象范围时触发的事件
onKeyPress	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE4 \| N4 \| O	当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]
onKeyDown	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE4 \| N4 \| O	当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]
onKeyUp	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE4 \| N4 \| O	当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]
页面相关事件
事件	浏览器支持	描述
onAbort	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE4 \| N3 \| O	图片在下载时被用户中断
onBeforeUnload	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE4 \| N \| O	当前页面的内容将要被改变时触发的事件
onError	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE4 \| N3 \| O	捕抓当前页面因为某种原因而出现的错误，如脚本错误与外部数据引用的错误
onLoad	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE3 \| N2 \| O3	页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成
onMove	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE \| N4 \| O	浏览器的窗口被移动时触发的事件
onResize	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE4 \| N4 \| O	当浏览器的窗口大小被改变时触发的事件
onScroll	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE4 \| N \| O	浏览器的滚动条位置发生变化时触发的事件
onStop	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE5 \| N \| O	浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断
onUnload	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE3 \| N2 \| O3	当前页面将被改变时触发的事件
表单相关事件
事件	浏览器支持	描述
onBlur	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE3 \| N2 \| O3	当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可]
onChange	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE3 \| N2 \| O3	当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可]
onFocus	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE3 \| N2 \| O3	当某个元素获得焦点时触发的事件
onReset	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE4 \| N3 \| O3	当表单中RESET的属性被激发时触发的事件
onSubmit	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE3 \| N2 \| O3	一个表单被递交时触发的事件
滚动字幕事件
事件	浏览器支持	描述
onBounce	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE4 \| N \| O	在Marquee内的内容移动至Marquee显示范围之外时触发的事件
onFinish	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE4 \| N \| O	当Marquee元素完成需要显示的内容后触发的事件
onStart	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE4 \| N \| O	当Marquee元素开始显示内容时触发的事件
编辑事件
事件	浏览器支持	描述
onBeforeCopy	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE5 \| N \| O	当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件
onBeforeCut	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE5 \| N \| O	当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件
onBeforeEditFocus	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE5 \| N \| O	当前元素将要进入编辑状态
onBeforePaste	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE5 \| N \| O	内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件
onBeforeUpdate	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE5 \| N \| O	当浏览者粘贴系统剪贴板中的内容时通知目标对象
onContextMenu	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE5 \| N \| O	当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 [试试在页面中的中加入onContentMenu="return false"就可禁止使用鼠标右键了]
onCopy	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE5 \| N \| O	当页面当前的被选择内容被复制后触发的事件
onCut	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE5 \| N \| O	当页面当前的被选择内容被剪切时触发的事件
onDrag	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE5 \| N \| O	当某个对象被拖动时触发的事件 [活动事件]
onDragDrop	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE \| N4 \| O	一个外部对象被鼠标拖进当前窗口或者帧
onDragEnd	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE5 \| N \| O	当鼠标拖动结束时触发的事件，即鼠标的按钮被释放了
onDragEnter	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE5 \| N \| O	当对象被鼠标拖动的对象进入其容器范围内时触发的事件
onDragLeave	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE5 \| N \| O	当对象被鼠标拖动的对象离开其容器范围内时触发的事件
onDragOver	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE5 \| N \| O	当某被拖动的对象在另一对象容器范围内拖动时触发的事件 [活动事件]
onDragStart	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE4 \| N \| O	当某对象将被拖动时触发的事件
onDrop	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE5 \| N \| O	在一个拖动过程中，释放鼠标键时触发的事件
onLoseCapture	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE5 \| N \| O	当元素失去鼠标移动所形成的选择焦点时触发的事件
onPaste	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE5 \| N \| O	当内容被粘贴时触发的事件
onSelect	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE4 \| N \| O	当文本内容被选择时的事件
onSelectStart	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE4 \| N \| O	当文本内容选择将开始发生时触发的事件
数据绑定
事件	浏览器支持	描述
onAfterUpdate	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE4 \| N \| O	当数据完成由数据源到对象的传送时触发的事件
onCellChange	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE5 \| N \| O	当数据来源发生变化时
onDataAvailable	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE4 \| N \| O	当数据接收完成时触发事件
onDatasetChanged	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE4 \| N \| O	数据在数据源发生变化时触发的事件
onDatasetComplete	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE4 \| N \| O	当来子数据源的全部有效数据读取完毕时触发的事件
onErrorUpdate	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE4 \| N \| O	当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件
onRowEnter	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE5 \| N \| O	当前数据源的数据发生变化并且有新的有效数据时触发的事件
onRowExit	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE5 \| N \| O	当前数据源的数据将要发生变化时触发的事件
onRowsDelete	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE5 \| N \| O	当前数据记录将被删除时触发的事件
onRowsInserted	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE5 \| N \| O	当前数据源将要插入新数据记录时触发的事件
外部事件
事件	浏览器支持	描述
onAfterPrint	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE5 \| N \| O	当文档被打印后触发的事件
onBeforePrint	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE5 \| N \| O	当文档即将打印时触发的事件
onFilterChange	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE4 \| N \| O	当某个对象的滤镜效果发生变化时触发的事件
onHelp	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE4 \| N \| O	当浏览者按下F1或者浏览器的帮助选择时触发的事件
onPropertyChange	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE5 \| N \| O	当对象的属性之一发生变化时触发的事件
onReadyStateChange	HTML: 2 \| 3 \| 3.2 \| 4 Browser: IE4 \| N \| O	当对象的初始化属性值发生变化时触发的事件

CONAN 2008-06-20 22:52 发表评论

表格边框探秘table[转载]

CONAN — Fri, 20 Jun 2008 14:47:00 GMT

一、表格中单元格之间分隔线的隐藏方法

第	一	行
第	二	行
第	三	行

这个表格去掉了单元格之间的纵向分隔线

第	第	第
一	二	三
列	列	列

这个表格去掉了单元格之间的横向分隔线

横		线
竖		线
都	没	了

这个表格去掉了单元格之间的纵向分隔线和横向分隔线

　　其实上面的三个表格都有三行三列，隐藏分隔线的诀窍在于rules，察看这三个表格的源代码，我们可以看到标签中都有rules。它有三个参数(cols,rows,none)，当rules=cols时，表格会隐藏纵向的分隔线，这样我们就只能看到表格的行；当rules=rows时，则隐藏了横向的分隔线，这样我们只能看到表格的列；而当rules=none时，纵向分隔线和横向分隔线将全部隐藏。

二、表格边框的隐藏

普	表
通	格

这是一普通的表格

不怕	下雨

只显示上边框


下起雨来	该怎么办

只显示下边框

上不着天
	下不着地

只显示左、右边框

	两边走开
老子姓王

只显示上、下边框

左右
为难

只显示左边框

	左右
	为难

只显示右边框

光秃秃
	全脱了

不显示任何边框

表格边框的显示与隐藏，是可以用frame参数来控制的。请注意它只控制表格的边框图，而不影晌单元格。
只显示上边框
只显示下边框

只显示左、右边框

只显示上、下边框

只显示左边框

只显示右边框

不显示任何边框

三、表格边框

普	表
通	格

这是一普通的表格

普	表
通	格

细	表
线	格

表格加上了漂亮的细线
(利用cellspacing1像素间隙和表格与单元格背景的不同)

细	表
线	格

细	表
线	格

这和上面那个可不一样，它用的是CSS，效果却一样。
(对单元格border的定义)

细	表
线	格

细	表
线	格

再进一步，把边框变成虚线，同样是CSS的神奇作用。

细	表
线	格

细线表格的扩展应用，奥妙就是在第个单元格中再套入一个表格。

立	表
体	格

立体感的表格
(简单的亮暗边框设置，注意只有IE支持这种效果)

立	表
体	格

无名表格

给表格加上一个表头
(应用

和标签)

无名表格

表中表效果Ⅰ

给表头再加个框
(用CSS为定义一个边框)

表中表效果Ⅰ

表中表效果Ⅱ

看起来和上面的一样，可是这个才是真正的表中表哦。
(在中插入一个表格)

表中表效果Ⅱ

CONAN 2008-06-20 22:47 发表评论