1. xmlhttp.setRequestHeader("Cache-Control","no-cache");
2. url += "&random="+Math.random();
3. url += "&timestamp="+new Date().getTime();

方法二：

正则表达式经典 (转)
"^\d+$"　　//非负整数（正整数 + 0）

"^[0-9]*[1-9][0-9]*$"　　//正整数

"^((-\d+)|(0+))$"　　//非正整数（负整数 + 0）

"^-[0-9]*[1-9][0-9]*$"　　//负整数

"^-?\d+$"　　　　//整数

"^\d+(\.\d+)?$"　　//非负浮点数（正浮点数 + 0）

"^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$"　　//正浮点数

"^((-\d+(\.\d+)?)|(0+(\.0+)?))$"　　//非正浮点数（负浮点数 + 0）

"^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$"　　//负浮点数

"^(-?\d+)(\.\d+)?$"　　//浮点数

"^[A-Za-z]+$"　　//由26个英文字母组成的字符串

"^[A-Z]+$"　　//由26个英文字母的大写组成的字符串

"^[a-z]+$"　　//由26个英文字母的小写组成的字符串

"^[A-Za-z0-9]+$"　　//由数字和26个英文字母组成的字符串

"^\w+$"　　//由数字、26个英文字母或者下划线组成的字符串

"^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$"　　　　//email地址

"^[a-zA-z]+://(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$"

----------------------------------------------------------------------------------------------------------------------

字符描述： \：将下一个字符标记为特殊字符或字面值。例如"n"与字符"n"匹配。"\n"与换行符匹配。序列"\\"与"\"匹配，"\("与"("匹配。

^ ：匹配输入的开始位置。

$ ：匹配输入的结尾。

* ：匹配前一个字符零次或几次。例如，"zo*"可以匹配"z"、"zoo"。

+ ：匹配前一个字符一次或多次。例如，"zo+"可以匹配"zoo",但不匹配"z"。

? ：匹配前一个字符零次或一次。例如，"a?ve?"可以匹配"never"中的"ve"。

.：匹配换行符以外的任何字符。

(pattern) 与模式匹配并记住匹配。匹配的子字符串可以从作为结果的 Matches 集合中使用 Item [0]...[n]取得。如果要匹配括号字符(和 )，可使用"\(" 或 "\)"。

x|y：匹配 x 或 y。例如 "z|food" 可匹配 "z" 或 "food"。"(z|f)ood" 匹配 "zoo" 或 "food"。

{n}：n 为非负的整数。匹配恰好n次。例如，"o{2}" 不能与 "Bob 中的 "o" 匹配，但是可以与"foooood"中的前两个o匹配。

{n,} ：n 为非负的整数。匹配至少n次。例如，"o{2,}"不匹配"Bob"中的"o"，但是匹配"foooood"中所有的o。"o{1,}"等价于"o+"。"o{0,}"等价于"o*"。

{n,m} ：m 和 n 为非负的整数。匹配至少 n 次，至多 m 次。例如，"o{1,3}" 匹配 "fooooood"中前三个o。"o{0,1}"等价于"o?"。

[xyz] ：一个字符集。与括号中字符的其中之一匹配。例如，"[abc]" 匹配"plain"中的"a"。

[^xyz] ：一个否定的字符集。匹配不在此括号中的任何字符。例如，"[^abc]" 可以匹配"plain"中的"p".

[a-z] ：表示某个范围内的字符。与指定区间内的任何字符匹配。例如，"[a-z]"匹配"a"与"z"之间的任何一个小写字母字符。

[^m-z] ：否定的字符区间。与不在指定区间内的字符匹配。例如，"[m-z]"与不在"m"到"z"之间的任何字符匹配。

\b ：与单词的边界匹配，即单词与空格之间的位置。例如，"er\b" 与"never"中的"er"匹配，但是不匹配"verb"中的"er"。

\B ：与非单词边界匹配。"ea*r\B"与"never early"中的"ear"匹配。

\d ：与一个数字字符匹配。等价于[0-9]。

\D ：与非数字的字符匹配。等价于[^0-9]。

\f ：与分页符匹配。

\n ：与换行符字符匹配。

\r ：与回车字符匹配。

\s ：与任何白字符匹配，包括空格、制表符、分页符等。等价于"[ \f\n\r\t\v]"。

\S ：与任何非空白的字符匹配。等价于"[^ \f\n\r\t\v]"。

\t ：与制表符匹配。

\v ：与垂直制表符匹配。

\w ：与任何单词字符匹配，包括下划线。等价于"[A-Za-z0-9_]"。

\W ：与任何非单词字符匹配。等价于"[^A-Za-z0-9_]"。

\num ：匹配 num个，其中 num 为一个正整数。引用回到记住的匹配。例如，"(.)\1"匹配两个连续的相同的字符。

\n：匹配 n，其中n 是一个八进制换码值。八进制换码值必须是 1, 2 或 3 个数字长。

例如，"\11" 和 "\011" 都与一个制表符匹配。"\0011"等价于"\001" 与 "1"。八进制换码值不得超过 256。否则，只有前两个字符被视为表达式的一部分。允许在正则表达式中使用ASCII码。

\xn：匹配n，其中n是一个十六进制的换码值。十六进制换码值必须恰好为两个数字长。例如，"\x41"匹配"A"。"\x041"等价于"\x04" 和 "1"。允许在正则表达式中使用 ASCII 码。

　　 好了，常用的方法和属性就是这些了，上面的语法介绍的已经很详细了，我们就没有必要在罗嗦了，接下来我们来看看在具体的例子里面如何使用这些方法和属性来校验数据的合法性，我们还是举个例子吧，比如，我们想要对用户输入的电子邮件进行校验，那么，什么样的数据才算是一个合法的电子邮件呢？我可以这样输入：uestc95@263.net，当然我也会这样输入：xxx@yyy.com.cn,但是这样的输入就是非法的：xxx@@com.cn或者@xxx.com.cn，等等，所以我们得出一个合法的电子邮件地址至少应当满足以下几个条件：

1. 必须包含一个并且只有一个符号“@”

2. 必须包含至少一个至多三个符号“.”

3. 第一个字符不得是“@”或者“.”

4. 不允许出现“@.”或者.@

5. 结尾不得是字符“@”或者“.”

所以根据以上的原则和上面表中的语法，我们很容易的就可以得到需要的模板如下："(\w)+[@]{1}(\w)+[.]{1，3}(\w)+"

　　接下来我们仔细分析一下这个模板,首先“\w”表示邮件的开始字符只能是包含下划线的单词字符，这样，满足了第三个条件；“[@]{1}”表示在电子邮件中应当匹配并且只能匹配一次字符“@”,满足了条件一；同样的“[.]{1，3}”表示在电子邮件中至少匹配1个至多匹配3个字符“.” ，满足了第二个条件；模板最后的“(\w)+”表示结尾的字符只能是包含下划线在内的单词字符，满足了条件五；模板中间的“(\w)+”满足了条件四。

　　然后，我们就直接调用刚才的那个函数CheckExp("(\w)+[@]{1}(\w)+[.]{1}(\w)+",待校验的字符串)就好了，如果返回True就表示数据是合法的，否则就是不正确的，怎么样，简单吧。我们还可以写出来校验身份证号码的模板："([0-9]){15}"；校验URL的模板："^http://{1}((\w)+[.]){1,3}"等等；我们可以看到，这些模板为我们提供了很好的可重利用的模块，利用自己或者别人提供的各种模板，我们就可以方便快捷的进行数据的合法性校验了，相信你一定会写出非常通用的模板的。

　　这样，我们只要定制不同的模板，就可以实现对不同数据的合法性校验了。所以，正则表达式对象中最重要的属性就是：“Pattern”属性,只要真正掌握了这个属性，才可以自由的运用正则表达式对象来为我们的数据校验进行服务。

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=560411

TCP协议　

==> TCP首部

    源端口号、目的端口号、位序号、位确认序号、首部长度、标志位、窗口大小、检验和、紧急指针和其它选项。
   
    一个IP地址和一个端口号也成为一个插口(socket)。插口对可唯一确定互联网中每个TCP连接的双方。

==> TCP连接的建立与终止

    TCP是一个面向连接的协议，无论哪方向另一方发送数据之前，都必须先在双方之间建立一条连接。
    TCP连接的建立——三次握手。
    TCP连接的终止——四次握手。这是由TCP的半关闭造成的。因为TCP是全双工的，因此每个方向必须单独的进行关闭。

==> 最大报文段长度MSS

    MSS越大，允许每个报文段传递的数据越多，相对TCP和IP的首部有更高的利用率。

    有些情况下，MSS是可以在建立TCP连接时进行协商的选项，但是有些情况下不行 。

    * 如果是本地网络，TCP可以根据网络外出接口处的MTU值减去固定的IP首部(20)和TCP长度(20)，对于以太网，可以达到1460。

    * 如果IP地址为非本地的，则MSS通常定为默认值536字节（允许20字节的IP首部和20字节的TCP首部以适合576字节的IP数据报）。

    MSS让主机限制另一端发送数据的长度，同时也能控制它自己发送数据报的长度，避免较小MTU发生分片。

==> TCP的半关闭

    TCP连接的一端在结束它的发送后还能接收来自另一端数据（直到它也发送FIN）的能力，这就是所谓的半关闭。应用程序很少用到。

==> 复位报文段

    * 不存在的端口（目的端口没有进程监听）。目的主机将对SYN请求返回一个RST报文段。（UDP则将产生一个端口不可达的信息）

    * 异常终止。

    * 检测半打开的连接。

==> TCP服务器的设计

    * 大多数TCP服务器的进程是并发的.

    * 只有处于监听的进程才能处理客户端的连接请求.

    * TCP服务器可以对本地IP地址进行限制,但是一般不能对远程IP地址进行限制.

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=561075

关于Java栈与堆的思考
1. 栈(stack)与堆(heap)都是Java用来在Ram中存放数据的地方。与C++不同，Java自动管理栈和堆，程序员不能直接地设置栈或堆。

2. 栈的优势是，存取速度比堆要快，仅次于直接位于CPU中的寄存器。但缺点是，存在栈中的数据大小与生存期必须是确定的，缺乏灵活性。另外，栈数据可以共享，详见第3点。堆的优势是可以动态地分配内存大小，生存期也不必事先告诉编译器，Java的垃圾收集器会自动收走这些不再使用的数据。但缺点是，由于要在运行时动态分配内存，存取速度较慢。

3. Java中的数据类型有两种。
  一种是基本类型(primitive types), 共有8种，即int, short, long, byte, float, double, boolean, char(注意，并没有string的基本类型)。这种类型的定义是通过诸如int a = 3; long b = 255L;的形式来定义的，称为自动变量。值得注意的是，自动变量存的是字面值，不是类的实例，即不是类的引用，这里并没有类的存在。如int a = 3; 这里的a是一个指向int类型的引用，指向3这个字面值。这些字面值的数据，由于大小可知，生存期可知(这些字面值固定定义在某个程序块里面，程序块退出后，字段值就消失了)，出于追求速度的原因，就存在于栈中。
  另外，栈有一个很重要的特殊性，就是存在栈中的数据可以共享。假设我们同时定义

  int a = 3;
  int b = 3；

   编译器先处理int a = 3；首先它会在栈中创建一个变量为a的引用，然后查找有没有字面值为3的地址，没找到，就开辟一个存放3这个字面值的地址，然后将a指向3的地址。接着处理int b = 3；在创建完b的引用变量后，由于在栈中已经有3这个字面值，便将b直接指向3的地址。这样，就出现了a与b同时均指向3的情况。

   特别注意的是，这种字面值的引用与类对象的引用不同。假定两个类对象的引用同时指向一个对象，如果一个对象引用变量修改了这个对象的内部状态，那么另一个对象引用变量也即刻反映出这个变化。相反，通过字面值的引用来修改其值，不会导致另一个指向此字面值的引用的值也跟着改变的情况。如上例，我们定义完a与 b的值后，再令a=4；那么，b不会等于4，还是等于3。在编译器内部，遇到a=4；时，它就会重新搜索栈中是否有4的字面值，如果没有，重新开辟地址存放4的值；如果已经有了，则直接将a指向这个地址。因此a值的改变不会影响到b的值。

  另一种是包装类数据，如Integer, String, Double等将相应的基本数据类型包装起来的类。这些类数据全部存在于堆中，Java用new()语句来显示地告诉编译器，在运行时才根据需要动态创建，因此比较灵活，但缺点是要占用更多的时间。

4. String是一个特殊的包装类数据。即可以用String str = new String("abc");的形式来创建，也可以用String str = "abc"；的形式来创建(作为对比，在JDK 5.0之前，你从未见过Integer i = 3;的表达式，因为类与字面值是不能通用的，除了String。而在JDK 5.0中，这种表达式是可以的！因为编译器在后台进行Integer i = new Integer(3)的转换)。前者是规范的类的创建过程，即在Java中，一切都是对象，而对象是类的实例，全部通过new()的形式来创建。Java 中的有些类，如DateFormat类，可以通过该类的getInstance()方法来返回一个新创建的类，似乎违反了此原则。其实不然。该类运用了单例模式来返回类的实例，只不过这个实例是在该类内部通过new()来创建的，而getInstance()向外部隐藏了此细节。那为什么在String str = "abc"；中，并没有通过new()来创建实例，是不是违反了上述原则？其实没有。

5. 关于String str = "abc"的内部工作。Java内部将此语句转化为以下几个步骤：
  (1)先定义一个名为str的对String类的对象引用变量：String str；
   (2)在栈中查找有没有存放值为"abc"的地址，如果没有，则开辟一个存放字面值为"abc"的地址，接着创建一个新的String类的对象o，并将o 的字符串值指向这个地址，而且在栈中这个地址旁边记下这个引用的对象o。如果已经有了值为"abc"的地址，则查找对象o，并返回o的地址。
  (3)将str指向对象o的地址。
  值得注意的是，一般String类中字符串值都是直接存值的。但像String str = "abc"；这种场合下，其字符串值却是保存了一个指向存在栈中数据的引用！
 
  为了更好地说明这个问题，我们可以通过以下的几个代码进行验证。

  String str1 = "abc";
  String str2 = "abc";
  System.out.println(str1==str2);  //true
 
  注意，我们这里并不用str1.equals(str2)；的方式，因为这将比较两个字符串的值是否相等。==号，根据JDK的说明，只有在两个引用都指向了同一个对象时才返回真值。而我们在这里要看的是，str1与str2是否都指向了同一个对象。
  结果说明，JVM创建了两个引用str1和str2，但只创建了一个对象，而且两个引用都指向了这个对象。

  我们再来更进一步，将以上代码改成：

  String str1 = "abc";
  String str2 = "abc";
  str1 = "bcd";
  System.out.println(str1 + "," + str2);  //bcd, abc
  System.out.println(str1==str2);  //false

  这就是说，赋值的变化导致了类对象引用的变化，str1指向了另外一个新对象！而str2仍旧指向原来的对象。上例中，当我们将str1的值改为"bcd"时，JVM发现在栈中没有存放该值的地址，便开辟了这个地址，并创建了一个新的对象，其字符串的值指向这个地址。
   事实上，String类被设计成为不可改变(immutable)的类。如果你要改变其值，可以，但JVM在运行时根据新值悄悄创建了一个新对象，然后将这个对象的地址返回给原来类的引用。这个创建过程虽说是完全自动进行的，但它毕竟占用了更多的时间。在对时间要求比较敏感的环境中，会带有一定的不良影响。

  再修改原来代码：

  String str1 = "abc";
  String str2 = "abc";
 
  str1 = "bcd";
 
  String str3 = str1;
  System.out.println(str3);  //bcd

  String str4 = "bcd";
  System.out.println(str1 == str4);  //true
   
  str3 这个对象的引用直接指向str1所指向的对象(注意，str3并没有创建新对象)。当str1改完其值后，再创建一个String的引用str4，并指向因str1修改值而创建的新的对象。可以发现，这回str4也没有创建新的对象，从而再次实现栈中数据的共享。

  我们再接着看以下的代码。

  String str1 = new String("abc");
  String str2 = "abc";
  System.out.println(str1==str2);  //false

  创建了两个引用。创建了两个对象。两个引用分别指向不同的两个对象。

  String str1 = "abc";
  String str2 = new String("abc");
  System.out.println(str1==str2);  //false

  创建了两个引用。创建了两个对象。两个引用分别指向不同的两个对象。

  以上两段代码说明，只要是用new()来新建对象的，都会在堆中创建，而且其字符串是单独存值的，即使与栈中的数据相同，也不会与栈中的数据共享。

6. 数据类型包装类的值不可修改。不仅仅是String类的值不可修改，所有的数据类型包装类都不能更改其内部的值。

7. 结论与建议：

   (1)我们在使用诸如String str = "abc"；的格式定义类时，总是想当然地认为，我们创建了String类的对象str。担心陷阱！对象可能并没有被创建！唯一可以肯定的是，指向 String类的引用被创建了。至于这个引用到底是否指向了一个新的对象，必须根据上下文来考虑，除非你通过new()方法来显要地创建一个新的对象。因此，更为准确的说法是，我们创建了一个指向String类的对象的引用变量str，这个对象引用变量指向了某个值为"abc"的String类。清醒地认识到这一点对排除程序中难以发现的bug是很有帮助的。

  (2)使用String str = "abc"；的方式，可以在一定程度上提高程序的运行速度，因为JVM会自动根据栈中数据的实际情况来决定是否有必要创建新对象。而对于String str = new String("abc")；的代码，则一概在堆中创建新对象，而不管其字符串值是否相等，是否有必要创建新对象，从而加重了程序的负担。这个思想应该是享元模式的思想，但JDK的内部在这里实现是否应用了这个模式，不得而知。

  (3)当比较包装类里面的数值是否相等时，用equals()方法；当测试两个包装类的引用是否指向同一个对象时，用==。

  (4)由于String类的immutable性质，当String变量需要经常变换其值时，应该考虑使用StringBuffer类，以提高程序效率。

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=561129

public class ControllerServlet extends HttpServlet
{
　private javax.sql.DataSource testDS = null; 
　public void init(ServletConfig config) throws ServletException
　{
　　super.init(config); 
　　Context ctx = null;
　　try
　　{ 
　　　ctx = new InitialContext();
　　　testDS = (javax.sql.DataSource)ctx.lookup("jdbc/testDS");
　　}
　　catch(NamingException ne)
　　{
　　　ne.printStackTrace(); 
　　}
　　catch(Exception e)
　　{
　　　e.printStackTrace();
　　}
　}
　public javax.sql.DataSource getTestDS()
　{
　　return testDS;
　}
　...
　... 
}

＜%@ page session="false"%＞

public void doGet(HttpServletRequest request, 
HttpServletResponse response)
throws IOException, ServletException 
{
　OutputStream out = null
　String encoding = request.getHeader("Accept-Encoding"); 
　if (encoding != null && encoding.indexOf("gzip") != -1)
　{
　　request.setHeader("Content-Encoding" , "gzip");
　　out = new GZIPOutputStream(request.getOutputStream());
　}
　else if (encoding != null && encoding.indexOf("compress") != -1)
　{
　　request.setHeader("Content-Encoding" , "compress");
　　out = new ZIPOutputStream(request.getOutputStream());
　} 
　else
　{
　　out = request.getOutputStream();
　}
　...
　... 
}

＜%@ includee file=”test.jsp” %＞

＜jsp:includee page=”test.jsp” flush=”true”/＞

＜jsp:useBean id="name" scope="page|request|session|application" class="package.className" type="typeName"＞
＜/jsp:useBean＞

版权所有，转载请声明出处 zhyiwww@163.com

在读我自己的认识之前 , 我们先来看一下 servet 的结构图 :

以下是我自己的一点浅见：

①　 Servlet 在初始化的时候 , 是通过 init(ServletConfig  config) 或 init() 来执行的。

ServletConfig 是一个接口，它怎样传递给他一格对象来进行初始化呢？其实，是这个对象是由 servlet 容器来实例化的，由容器产生一格 ServletConfig 的实现类的对象，然后传递给 Servlet

结论： ServletConfig 由容器实例化

②　 我们有些时候可能在 Servlet 初始化时给它一些固定的配置参数，那么这些参数是怎样传递到 Servlet 呢？

其实，我们在 web.xml 中给 servlet 配置启动参数，在容器对 servlet 进行初始化的时候，会收集你所配置的参数，记录在 ServletConfig 的实现类中，所以你才可以通过 ServletConfig 对象的

    public String getInitParameter(String name); 或

    public Enumeration getInitParameterNames();

方法来取得你已经配置好的参数，也就是说，你对 servlet 的配置都已经记录在 ServletConfig 对象中了。

结论：你对 Servlet 的配置，在 Servlet 的初始化时都由容器来收集并且记录到 ServletConfig 的实现类中。

③　 我们来看一个 Servlet 的配置

  <servlet>

    <servlet-name>index</servlet-name>

    <servlet-class>org.zy.pro.sw.servlet.IndexServlet</servlet-class>

    <init-param>

      <param-name>dbconfig</param-name>

      <param-value>/WEB-INF/dbconfig.xml</param-value>

    </init-param>

  </servlet>

在此，我们实现对数据库的配置文件的加载。

当 Servlet 初始化完成后，我们可以通过

String  dbconf=this.getServletConfig().getInitParameter("dbconfig")

来取得我们的配置的参数的值。

但是，我们仅能得到一个配置的字符串。之后我们可以通过配置文件取得我们的数据库的配置参数，然后对数据库进行初始化。

其实我们也可以通过传递一个类的名字串，然后再实例化。

    <init-param>

      <param-name>dbconfig</param-name>

      <param-value>org.zy.util.db.DBUtil</param-value>

    </init-param>

我们先取得配置参数：

String  dbconf=this.getServletConfig().getInitParameter("dbconfig") ；

然后通过

Class.forName(dbconf).getInstance();

来实例化对象，就可以实现对数据库的调用了。

结论：在 web.xml 中对 Servlet 的初始化，只能传递字符串类型的数据

④　 ServletContext

ServletContext 是负责和 Servlet 的上文和下文交互，上面和 Servlet 容器交互，下面和 Servlet 中的请求和相应进行交互。

在 ServletConfig 中，    

public ServletContext getServletContext(); 方法实现取得当前 ServletContext 的对象。

你可能要问， ServletContext 是一个接口，那么你如何取得他的对象呢？

其实这个问题和 ServletConfig 相同，都是在 Servlet 进行初始化的时候产生的对象，是由容器来初始化的。

关于web打印的总结
方案一：
       调用浏览器的打印函数利用浏览器的模版
   源程序代码：
         
< OBJECT id = " WebBrowser "  classid = " CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 "  height = " 0 "
                width = " 0 "  VIEWASTEXT >
             </ OBJECT >
     说明：此代码放在html 中 打印模版的指定框架为此代码在的模块；
      调用程序：
       < onclick = " parent.main.focus();parent.main.WebBrowser.ExecWB(7,1); "
调用浏览器的对象中的方法
< 2 >  调用直接打印
       < onclick = " parent.main.focus();parent.main.WebBrowser..print (7,1); "
< 3 >  当打印的时候不显示时的css样式
       < style media = " print " >
.Noprint {display:none;}
.PageNext {page - break - after: always;}
</ style >
< style > .TdCs1  { border:solid windowtext  1 .0pt;}
.TdCs2  { border:solid windowtext  1 .0pt; border - left:none;}
.TdCs3  {border - top:none;border - left:solid windowtext  1 .0pt; border - bottom:solid windowtext  1 .0pt; border - right:solid windowtext  1 .0pt;}
.TdCs4  {border - top:none;  border - left:none;border - bottom:solid windowtext  1 .0pt;border - right:solid windowtext  1 .0pt;}
.underline 
{border - top - style: none;border - right - style: none; border - bottom - style: solid; border - left - style: none;border - bottom - color: # 000000 ;}
         </ style >
    
< 4 >  其余的设置
    < input type = " button "  value = " 打印 "  onclick = " document.all.WebBrowser.ExecWB(6,1) " class = " NOPRINT " >
< input type = " button "  value = " 直接打onclick= " document.all.WebBrowser.ExecWB( 6 , 6 ) "  class= " NOPRINT " >
< input type = " button "  value = " 页面设置 "  onclick = " document.all.WebBrowser.ExecWB(8,1) "   class = " NOPRINT " >
< input type = " button "  value = " 打印预览 "  onclick = " document.all.WebBrowser.ExecWB(7,1) "   class = " NOPRINT " >

<html>
<head>
<title>看看</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<!--media=print 这个属性可以在打印时有效-->
<style media=print>
.Noprint{display:none;}
.PageNext{page-break-after: always;}
</style>
<style>
.tdp
{
border-bottom: 1 solid #000000;
border-left: 1 solid #000000;
border-right: 0 solid #ffffff;
border-top: 0 solid #ffffff;
}
.tabp
{
border-color: #000000 #000000 #000000 #000000;
border-style: solid;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 1px;
border-left-width: 1px;
}
.NOPRINT {
font-family: "宋体";
font-size: 9pt;
}
</style>
</head>
<body >
<center class="Noprint" >
<p>
<OBJECT id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 width=0>
</OBJECT>
<input type=button value=打印 onclick=document.all.WebBrowser.ExecWB(6,1)>
<input type=button value=直接打印 onclick=document.all.WebBrowser.ExecWB(6,6)>
<input type=button value=页面设置 onclick=document.all.WebBrowser.ExecWB(8,1)>
</p>
<p> <input type=button value=打印预览 onclick=document.all.WebBrowser.ExecWB(7,1)>
<br/>
</p>
<hr align="center" width="90%" size="1" noshade>
</center>
<table width="90%" border="0" align="center" cellpadding="2" cellspacing="0" class="tabp">
<tr>
<td colspan="3" class="tdp">第1页</td>
</tr>
<tr>
<td width="29%" class="tdp"> </td>
<td width="28%" class="tdp"> </td>
<td width="43%" class="tdp"> </td>
</tr>
<tr>
<td colspan="3" class="tdp"> </td>
</tr>
<tr>
<td colspan="3" class="tdp"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" class="tdp"><p>这样的报表</p>
<p>对一般的要求就够了。</p></td>
<td> </td>
</tr>
</table></td>
</tr>
</table>
<hr align="center" width="90%" size="1" noshade class="NOPRINT" >
<!--分页-->
<div class="PageNext"></div>
<table width="90%" border="0" align="center" cellpadding="2" cellspacing="0" class="tabp">
<tr>
<td class="tdp">第2页</td>
</tr>
<tr>
<td class="tdp">看到分页了吧</td>
</tr>
<tr>
<td class="tdp"> </td>
</tr>
<tr>
<td class="tdp"> </td>
</tr>
<tr>
<td class="tdp"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" class="tdp"><p>这样的报表</p>
<p>对一般的要求就够了。</p></td>
<td> </td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>Pure CSS Scrollable Table with Fixed Header</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="language" content="en-us" />
<script type="text/javascript">
<!--
/* http://www.alistapart.com/articles/zebratables/ */
function removeClassName (elem, className) {
 elem.className = elem.className.replace(className, "").trim();
}

function addCSSClass (elem, className) {
 removeClassName (elem, className);
 elem.className = (elem.className + " " + className).trim();
}

String.prototype.trim = function() {
 return this.replace( /^\s+|\s+$/, "" );
}

function stripedTable() {
 if (document.getElementById && document.getElementsByTagName) { 
  var allTables = document.getElementsByTagName('table');
  if (!allTables) { return; }

  for (var i = 0; i < allTables.length; i++) {
   if (allTables[i].className.match(/[\w\s ]*scrollTable[\w\s ]*/)) {
    var trs = allTables[i].getElementsByTagName("tr");
    for (var j = 0; j < trs.length; j++) {
     removeClassName(trs[j], 'alternateRow');
     addCSSClass(trs[j], 'normalRow');
    }
    for (var k = 0; k < trs.length; k += 2) {
     removeClassName(trs[k], 'normalRow');
     addCSSClass(trs[k], 'alternateRow');
    }
   }
  }
 }
}

/* onload state is fired, append onclick action to the table's DIV */
/* container. This allows the HTML document to validate correctly. */
/* addIEonScroll added on 2005-01-28                               */
/* Terence Ordona, portal[AT]imaputz[DOT]com                       */
function addIEonScroll() {
 var thisContainer = document.getElementById('tableContainer');
 if (!thisContainer) { return; }

 var onClickAction = 'toggleSelectBoxes();';
 thisContainer.onscroll = new Function(onClickAction);
}

/* Only WinIE will fire this function. All other browsers scroll the TBODY element and not the DIV */
/* This is to hide the SELECT elements from scrolling over the fixed Header. WinIE only.           */
/* toggleSelectBoxes added on 2005-01-28 */
/* Terence Ordona, portal[AT]imaputz[DOT]com         */
function toggleSelectBoxes() {
 var thisContainer = document.getElementById('tableContainer');
 var thisHeader = document.getElementById('fixedHeader');
 if (!thisContainer || !thisHeader) { return; }

 var selectBoxes = thisContainer.getElementsByTagName('select');
 if (!selectBoxes) { return; }

 for (var i = 0; i < selectBoxes.length; i++) {
  if (thisContainer.scrollTop >= eval(selectBoxes[i].parentNode.offsetTop - thisHeader.offsetHeight)) {
   selectBoxes[i].style.visibility = 'hidden';
  } else {
   selectBoxes[i].style.visibility = 'visible';
  }
 }
}

window.onload = function() { stripedTable(); addIEonScroll(); }
-->
</script>
<style type="text/css">
<!--
/* Terence Ordona, portal[AT]imaputz[DOT]com         */
/* http://creativecommons.org/licenses/by-sa/2.0/    */

/* begin some basic styling here                     */
body {
 background: #FFF;
 color: #000;
 font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
 margin: 10px;
 padding: 0
}

table, td, a {
 color: #000;
 font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
}

h1 {
 font: normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
 margin: 0 0 5px 0
}

h2 {
 font: normal normal 16px Verdana, Geneva, Arial, Helvetica, sans-serif;
 margin: 0 0 5px 0
}

h3 {
 font: normal normal 13px Verdana, Geneva, Arial, Helvetica, sans-serif;
 color: #008000;
 margin: 0 0 15px 0
}

/* end basic styling                                 */

/* define height and width of scrollable area. Add 16px to width for scrollbar          */
/* allow WinIE to scale 100% width of browser by not defining a width                   */
/* WARNING: applying a background here may cause problems with scrolling in WinIE 5.x   */
div.tableContainer {
 clear: both;
 border: 1px solid #963;
 height: 285px;
 overflow: auto;
 width: 756px;
}

/* WinIE 6.x needs to re-account for it's scrollbar. Give it some padding */
\html div.tableContainer/* */ {
 padding: 0 16px 0 0;
 width: 740px;
}

/* clean up for allowing display Opera 5.x/6.x and MacIE 5.x */
html>body div.tableContainer {
 height: auto;
 padding: 0;
}

/* Reset overflow value to hidden for all non-IE browsers. */
/* Filter out Opera 5.x/6.x and MacIE 5.x                  */
head:first-child+body div[class].tableContainer {
 height: 285px;
 overflow: hidden;
 width: 756px
}

/* define width of table. IE browsers only                 */
/* if width is set to 100%, you can remove the width       */
/* property from div.tableContainer and have the div scale */
div.tableContainer table {
 float: left;
 width: 100%
}

/* WinIE 6.x needs to re-account for padding. Give it a negative margin */
\html div.tableContainer table/* */ {
 margin: 0 -16px 0 0
}

/* define width of table. Opera 5.x/6.x and MacIE 5.x */
html>body div.tableContainer table {
 float: none;
 margin: 0;
 width: 740px
}

/* define width of table. Add 16px to width for scrollbar.           */
/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */
head:first-child+body div[class].tableContainer table {
 width: 756px
}

/* set table header to a fixed position. WinIE 6.x only                                       */
/* In WinIE 6.x, any element with a position property set to relative and is a child of       */
/* an element that has an overflow property set, the relative value translates into fixed.    */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
thead.fixedHeader tr {
 position: relative;
 /* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution      */
 top: expression(document.getElementById("tableContainer").scrollTop);
}

/* set THEAD element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* Filter out Opera 5.x/6.x and MacIE 5.x                                                 */
head:first-child+body thead[class].fixedHeader tr {
 display: block;
}

/* make the TH elements pretty */
thead.fixedHeader th {
 background: #C96;
 border-left: 1px solid #EB8;
 border-right: 1px solid #B74;
 border-top: 1px solid #EB8;
 font-weight: normal;
 padding: 4px 3px;
 text-align: left
}

/* make the A elements pretty. makes for nice clickable headers                */
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
 color: #FFF;
 display: block;
 text-decoration: none;
 width: 100%
}

/* make the A elements pretty. makes for nice clickable headers                */
/* WARNING: swapping the background on hover may cause problems in WinIE 6.x   */
thead.fixedHeader a:hover {
 color: #FFF;
 display: block;
 text-decoration: underline;
 width: 100%
}

/* define the table content to be scrollable                                              */
/* set TBODY element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* induced side effect is that child TDs no longer accept width: auto                     */
/* Filter out Opera 5.x/6.x and MacIE 5.x                                                 */
head:first-child+body tbody[class].scrollContent {
 display: block;
 height: 262px;
 overflow: auto;
 width: 100%
}

/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/                             */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
 background: #FFF;
 border-bottom: none;
 border-left: none;
 border-right: 1px solid #CCC;
 border-top: 1px solid #DDD;
 padding: 2px 3px 3px 4px
}

tbody.scrollContent tr.alternateRow td {
 background: #EEE;
 border-bottom: none;
 border-left: none;
 border-right: 1px solid #CCC;
 border-top: 1px solid #DDD;
 padding: 2px 3px 3px 4px
}

/* define width of TH elements: 1st, 2nd, and 3rd respectively.      */
/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */
/* Add 16px to last TH for scrollbar padding                         */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors    */
head:first-child+body thead[class].fixedHeader th {
 width: 200px
}

head:first-child+body thead[class].fixedHeader th + th {
 width: 240px
}

head:first-child+body thead[class].fixedHeader th + th + th {
 border-right: none;
 padding: 4px 4px 4px 3px;
 width: 316px
}

/* define width of TH elements: 1st, 2nd, and 3rd respectively.      */
/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */
/* Add 16px to last TH for scrollbar padding                         */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors    */
head:first-child+body tbody[class].scrollContent td {
 width: 200px
}

head:first-child+body tbody[class].scrollContent td + td {
 width: 240px
}

head:first-child+body tbody[class].scrollContent td + td + td {
 border-right: none;
 padding: 2px 4px 2px 3px;
 width: 300px
}
-->
</style>
</head><body>

<h1>(Almost) Pure CSS Scrollable Table with Fixed Header</h1>
<h2>Using CSS to allow scrolling within a single HTML table</h2>

<div><br/></div>

<h2>The Bullet Resistant Version</h2>
<h3>Lots of CSS Browser Filtering</h3>

<form id="sampleForm" action="bulletVersion.html" method="post">
<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
<thead class="fixedHeader" id="fixedHeader">
 <tr>
  <th><a href="#">Header 1</a></th>
  <th><a href="#">Header 2</a></th>
  <th><a href="#">Header 3</a></th>
 </tr>
</thead>
<tbody class="scrollContent">
 <tr>
  <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla vitae wisi. Nulla euismod aliquet tellus.</td>
  <td>In sit amet enim. Praesent vulputate tortor nec ante. Morbi sollicitudin est non neque.</td>
  <td>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</td>
 </tr>
 <tr>
  <td>Cell Content 1</td>
  <td>Cell Content 2</td>
  <td><select name="sampleSelect1" id="sampleSelect1"><option>Option 1</option><option>Option 2</option><option>Option 3</option><option>Option 4</option><option>Option 5</option></select></td>
 </tr>
 <tr>
  <td>Cell Content 1</td>
  <td>Cell Content 2</td>
  <td><select name="sampleSelect2" id="sampleSelect2" size="5" multiple="multiple"><option>Option 1</option><option>Option 2</option><option>Option 3</option><option>Option 4</option><option>Option 5</option></select></td>
 </tr>
 <tr>
  <td>More Cell Content 1</td>
  <td>More Cell Content 2</td>
  <td><input type="text" name="sampleText" id="sampleText" value="This is a sample Text form element" /></td>
 </tr>
 <tr>
  <td>Even More Cell Content 1</td>
  <td>Even More Cell Content 2</td>
  <td><input type="password" name="samplePassword" id="samplePassword" value="password" /></td>
 </tr>
 <tr>
  <td>And Repeat 1</td>
  <td>And Repeat 2</td>
  <td><input type="submit" name="sampleSubmit" id="sampleSubmit" value="Sample Submit Button" /></td>
 </tr>
 <tr>
  <td>Cell Content 1</td>
  <td>Cell Content 2</td>
  <td><input type="reset" name="sampleReset" id="sampleReset" value="Sample Reset Button" /></td>
 </tr>
 <tr>
  <td>More Cell Content 1</td>
  <td>More Cell Content 2</td>
  <td><input type="button" name="sampleButton" id="sampleButton" value="Sample Button Element" /></td>
 </tr>
 <tr>
  <td>Even More Cell Content 1</td>
  <td>Even More Cell Content 2</td>
  <td><input type="checkbox" name="sampleCheckbox" id="sampleCheckboxA" value="sampleCheckboxA" /> <label for="sampleCheckboxA">Sample Checkbox A</label></td>
 </tr>
 <tr>
  <td>And Repeat 1</td>
  <td>And Repeat 2</td>
  <td><input type="checkbox" name="sampleCheckbox" id="sampleCheckboxB" value="sampleCheckboxB" /> <label for="sampleCheckboxB">Sample Checkbox B</label></td>
 </tr>
 <tr>
  <td>Cell Content 1</td>
  <td>Cell Content 2</td>
  <td><input type="radio" name="sampleRadio" id="sampleRadioA" value="sampleRadioA" /> <label for="sampleRadioA">Sample Radio A</label></td>
 </tr>
 <tr>
  <td>More Cell Content 1</td>
  <td>More Cell Content 2</td>
  <td><input type="radio" name="sampleRadio" id="sampleRadioB" value="sampleRadioB" /> <label for="sampleRadioB">Sample Radio B</label></td>
 </tr>
 <tr>
  <td>Even More Cell Content 1</td>
  <td>Even More Cell Content 2</td>
  <td><select name="sampleSelect3" id="sampleSelect3"><option>Option 1</option><option>Option 2</option><option>Option 3</option><option>Option 4</option><option>Option 5</option></select></td>
 </tr>
 <tr>
  <td>And Repeat 1</td>
  <td>And Repeat 2</td>
  <td><select name="sampleSelect4" id="sampleSelect4" size="5" multiple="multiple"><option>Option 1</option><option>Option 2</option><option>Option 3</option><option>Option 4</option><option>Option 5</option></select></td>
 </tr>
 <tr>
  <td>Cell Content 1</td>
  <td>Cell Content 2</td>
  <td><textarea cols="20" rows="5" name="sampleTextarea" id="sampleTextarea">Cell Content 3</textarea></td>
 </tr>
 <tr>
  <td>More Cell Content 1</td>
  <td>More Cell Content 2</td>
  <td>More Cell Content 3</td>
 </tr>
 <tr>
  <td>Even More Cell Content 1</td>
  <td>Even More Cell Content 2</td>
  <td>Even More Cell Content 3</td>
 </tr>
 <tr>
  <td>And Repeat 1</td>
  <td>And Repeat 2</td>
  <td>And Repeat 3</td>
 </tr>
 <tr>
  <td>Cell Content 1</td>
  <td>Cell Content 2</td>
  <td><select name="sampleSelect5" id="sampleSelect5"><option>Option 1</option><option>Option 2</option><option>Option 3</option><option>Option 4</option><option>Option 5</option></select></td>
 </tr>
 <tr>
  <td>More Cell Content 1</td>
  <td>More Cell Content 2</td>
  <td><select name="sampleSelect6" id="sampleSelect6"><option>Option 1</option><option>Option 2</option><option>Option 3</option><option>Option 4</option><option>Option 5</option></select></td>
 </tr>
 <tr>
  <td>Even More Cell Content 1</td>
  <td>Even More Cell Content 2</td>
  <td>Even More Cell Content 3</td>
 </tr>
 <tr>
  <td>And Repeat 1</td>
  <td>And Repeat 2</td>
  <td>And Repeat 3</td>
 </tr>
 <tr>
  <td>Cell Content 1</td>
  <td>Cell Content 2</td>
  <td>Cell Content 3</td>
 </tr>
 <tr>
  <td>More Cell Content 1</td>
  <td>More Cell Content 2</td>
  <td>More Cell Content 3</td>
 </tr>
 <tr>
  <td>Even More Cell Content 1</td>
  <td>Even More Cell Content 2</td>
  <td>Even More Cell Content 3</td>
 </tr>
 <tr>
  <td>And Repeat 1</td>
  <td>And Repeat 2</td>
  <td>And Repeat 3</td>
 </tr>
 <tr>
  <td>Cell Content 1</td>
  <td>Cell Content 2</td>
  <td>Cell Content 3</td>
 </tr>
 <tr>
  <td>More Cell Content 1</td>
  <td>More Cell Content 2</td>
  <td>More Cell Content 3</td>
 </tr>
 <tr>
  <td>Even More Cell Content 1</td>
  <td>Even More Cell Content 2</td>
  <td>Even More Cell Content 3</td>
 </tr>
 <tr>
  <td>And Repeat 1</td>
  <td>And Repeat 2</td>
  <td>And Repeat 3</td>
 </tr>
 <tr>
  <td>Cell Content 1</td>
  <td>Cell Content 2</td>
  <td>Cell Content 3</td>
 </tr>
 <tr>
  <td>More Cell Content 1</td>
  <td>More Cell Content 2</td>
  <td>More Cell Content 3</td>
 </tr>
 <tr>
  <td>Even More Cell Content 1</td>
  <td>Even More Cell Content 2</td>
  <td>Even More Cell Content 3</td>
 </tr>
 <tr>
  <td>And Repeat 1</td>
  <td>And Repeat 2</td>
  <td>And Repeat 3</td>
 </tr>
 <tr>
  <td>Cell Content 1</td>
  <td>Cell Content 2</td>
  <td>Cell Content 3</td>
 </tr>
 <tr>
  <td>More Cell Content 1</td>
  <td>More Cell Content 2</td>
  <td>More Cell Content 3</td>
 </tr>
 <tr>
  <td>Even More Cell Content 1</td>
  <td>Even More Cell Content 2</td>
  <td>Even More Cell Content 3</td>
 </tr>
 <tr>
  <td>And Repeat 1</td>
  <td>And Repeat 2</td>
  <td>And Repeat 3</td>
 </tr>
 <tr>
  <td>Cell Content 1</td>
  <td>Cell Content 2</td>
  <td>Cell Content 3</td>
 </tr>
 <tr>
  <td>More Cell Content 1</td>
  <td>More Cell Content 2</td>
  <td>More Cell Content 3</td>
 </tr>
 <tr>
  <td>Even More Cell Content 1</td>
  <td>Even More Cell Content 2</td>
  <td>Even More Cell Content 3</td>
 </tr>
 <tr>
  <td>And Repeat 1</td>
  <td>And Repeat 2</td>
  <td>And Repeat 3</td>
 </tr>
 <tr>
  <td>Cell Content 1</td>
  <td>Cell Content 2</td>
  <td>Cell Content 3</td>
 </tr>
 <tr>
  <td>More Cell Content 1</td>
  <td>More Cell Content 2</td>
  <td>More Cell Content 3</td>
 </tr>
 <tr>
  <td>Even More Cell Content 1</td>
  <td>Even More Cell Content 2</td>
  <td>Even More Cell Content 3</td>
 </tr>
 <tr>
  <td>End of Cell Content 1</td>
  <td>End of Cell Content 2</td>
  <td>End of Cell Content 3</td>
 </tr>
</tbody>
</table>
</div>
</form>

<div>

 <p>Also see the <a href="http://www.imaputz.com/cssStuff/bigFourVersion.html">The Big Four Version</a> :: Support for current generation of the four major Browsers</p>

 <h3>Browser Support (table is scrollable with fixed headers)</h3>

 <ul>
  <li>Opera 7.x + (All Platforms) :: Tested with 7.2x and 7.5x</li>
  <li>Mozilla 1.x + (All Platforms) :: Tested with 1.0x and 1.6x</li>
  <li>IE 6.x + (Windows) :: Tested with 6.0x</li>
  <li>IE 5.x + (Windows) :: Tested with 5.0x and 5.5x</li>
  <li>Safari 1.x + (MacOS) :: Tested with 1.2x</li>
  <li>Konqueror 3.x + (Linux / BSD) :: Tested with 3.2x</li>
 </ul>

 <h3>Almost works (table is viewable)</h3>

 <ul>
  <li>IE 5.x + (MacOS) :: Tested with 5.2x</li>
  <li>Opera 5.x and 6.x :: Tested with 5.1x and 6.x</li>
 </ul>

 <h3>Degrades gracefully</h3>

 <ul>
  <li>All other non-supporting browsers</li>
 </ul>

 <h3>Notes:</h3>

 <ul>
  <li>Opera v5 to v7 adds margins to the THEAD and TBODY and their children</li>
  <li>On Konqueror 3.x the scrollbar may be slightly off.</li>
  <li>On Konqueror 3.x form elements may not hide correctly.</li>
  <li>On MacIE 5.x the last table header cell may obscure the up arrow of the scrollbar.</li>
  <li>Gecko/20041217 may have table cell alignment issues (bug?), Prior versions (eg: Gecko/20040113) do not have this</li>
 </ul>

 <h3>Updates:</h3>

 <ul>
  <li>2004.10.15 11am: Added link to Big Four Version</li>
  <li>2004.11.02 01pm: Fixed incorrect width on 2nd Cell. Was 250px, should be 240px.</li>
  <li>2005.01.28 07pm: Added form elements to aid in testing scrolling abilities</li>
  <li>2005.01.28 08pm: Added JS IE Select element workaround.</li>
 </ul>

</div>

<div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
put a bunch of breaks to test scrolling within the HTML document itself.
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
put a bunch of breaks to test scrolling within the HTML document itself.
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
put a bunch of breaks to test scrolling within the HTML document itself.
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
done.
</div>

</body></html>

方法一：
String.prototype.trim= function() 
{ 
    // 用正则表达式将前后空格 
    // 用空字符串替代。 
    return this.replace(/(^\s*)|(\s*$)/g, ""); 
}

方法二：
function  trim(str)
{
    for(var  i  =  0  ;  i<str.length  &&  str.charAt(i)=="  "  ;  i++  )  ;
    for(var  j  =str.length;  j>0  &&  str.charAt(j-1)=="  "  ;  j--)  ;
    if(i>j)  return  "";  
    return  str.substring(i,j);  
}