发现自己无法完整地写出一个网页的源代码，便只能借助别人的源码来研究当中涉及的技术，希望久而久之可以提高自己的技术水平。

一、概述

   许愿墙是指可以许愿或发送祝福的程序，通过该程序用户可以许下心中的愿望，并能得到他人的支持。在这个项目里，可以了解到的技术主要有：

1、应用 div + css 样式进行页面布局

2、通过过滤器解决中文乱码

3、定义生成指定范围随机数标签的方法

4、支持字条后人气自动增加的方法

5、利用Ajax 实现滚动显示最新10条许愿

6、无刷新添加字条并预览

7、关闭添加字条窗口时初始化菜单

二、系统预览

    主页效果图：

    贴子条窗口运行效果图：

    字条列表效果图：

三、应用 div + css 布局

    div + css 布局是网站开发常用的方式之一，是一种比较新的排版观念。采用 div + css 样式进行布局时，首先应将页面在整体上进行<div> 标签分块，然后对各个块进行css定位，最后再向各个块中添加相应的内容。

    页面布局的形式是多变的，可以根据网站的信息划分和排列进行布局划分。一般来说，一个页面可以包含以下几个板块：header（网站logo和图片），sidebar（边侧的工具栏），content（主要内容区域）和footer（脚注）等，当中sidebar有时会存在两个（左右工具栏）。在谈布局策略之前，了解几个在布局时常用的的名词：居中，固定和液态。“居中”顾名思义就是居中放置；“固定”指的是用 px 来指定宽度和高度（也可以指指定宽度或高度），指定后，其宽度或高度便固定为多少像素了；“液态”指的是使用百分比来指定宽度或高度，受当前字体或其内元素的长宽的影响。

    div + css 布局策略大概可以分为以下几大类：

1、列固定（液态），居中

2、列固定（液态），居中，标题和脚注

3、列固定（液态），居中，左侧栏，标题和脚注

4、列固定（液态），居中，右侧栏，标题和脚注

    现在给出四大布局的概览图：

     下面给出列固定，居中，左侧栏，标题和脚注的布局代码，其他的类似：

body {

font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;

background-color: #42413C;

margin: 0;

padding: 0;

color: #000;

}

.container {

960px;

background-color: #FFF;

margin: 0 auto; /* 侧边的自动值与宽度结合使用，可以将布局居中对齐 */

}

/* ~~ 标题未指定宽度。它将扩展到布局的完整宽度。标题包含一个图像占位符，该占位符应替换为您自己的链接徽标 ~~ */

.header {

background-color: #ADB96E;

}

.sidebar1 {

float: right;

180px;

background-color: #EADCAE;

padding-bottom: 10px;

}

.content {

padding: 10px 0;

780px;

float: right;

}

.footer {

padding: 10px 0;

background-color: #CCC49F;

position: relative;/* 这可以使 IE6 hasLayout 以正确方式进行清除 */

clear: both; /* 此清除属性强制 .container 了解列的结束位置以及包含列的位置 */

}

链接一

链接二

链接三

链接四

 以上链接说明了一种基本导航结构，该结构使用以 CSS 设置样式的无序列表。请以此作为起点修改属性，以生成您自己的独特外观。如果需要弹出菜单，请使用 Spry 菜单、Adobe Exchange 中的菜单构件 或其它各种 javascript 或 CSS 解决方案创建您自己的菜单。

如果您想要在顶部进行导航，只需将 ul.nav 移到页面顶部并重新创建样式即可。

说明

请注意，这些布局的 CSS 带有大量注释。如果您的大部分工作都在设计视图中进行，请快速浏览一下代码，获取有关如何使用固定布局 CSS 的提示。您可以先删除这些注释，然后启动您的站点。要了解有关这些 CSS 布局中使用的方法的更多信息，请阅读 Adobe 开发人员中心上的以下文章：http://www.adobe.com/go/adc_css_layouts。您可以先删除这些注释，然后启动您的站点。若要了解有关这些 CSS 布局中使用的方法的更多信息，请阅读 Adobe 开发人员中心上的以下文章：http://www.adobe.com/go/adc_css_layouts。

清除方法

由于所有列都是浮动的，因此，此布局在 .footer 规则中采用 clear:both 声明。此清除方法强制使 .container 了解列的结束位置，以便显示在 .container 中放置的任何边框或背景颜色。如果您的设计要求您从 .container 中删除 .footer，则需要采用其它清除方法。最可靠的方法是在最后一个浮动列之后（但在 .container 结束之前）添加 
 or 
       
。这具有相同的清除效果。

徽标替换

此布局的 .header 中使用了图像占位符，您可能希望在其中放置徽标。建议您删除此占位符，并将其替换为您自己的链接徽标。 

 请注意，如果您使用属性检查器导航到使用 SRC 字段的徽标图像（而不是删除并替换占位符），则应删除内嵌背景和显示属性。这些内嵌样式仅用于在浏览器中出于演示目的而显示徽标占位符。 

要删除内嵌样式，请确保将 CSS 样式面板设置为“当前”。选择图像，然后在“CSS 样式”面板的“属性”窗格中右键单击并删除显示和背景属性。（当然，您始终可以直接访问代码，并在其中删除图像或占位符的内嵌样式。）

背景

本质上，任何 div 中的背景颜色将仅显示与内容一样的长度。这意味着，如果要使用背景颜色或边框创建侧面列的外观，将不会一直扩展到脚注，而是在内容结束时停止。如果 .content div 将始终包含更多内容，则可以在 .content div 中放置一个边框将其与列分开。

此 .footer 包含声明 position:relative，以便为 .footer 指定 Internet Explorer 6 hasLayout，并使其以正确方式清除。如果您不需要支持 IE6，则可以将其删除。

    更多的布局方式和代码设计可以参考 Dreamweaver cs6 的模板文件。

四、Ajax 中文乱码的解决方案

    Ajax 不支持多种字符集，其默认的字符集是 utf-8，因此在应用 ajax 时 应及时进行编码转换，否则程序就会出现乱码。一般情况下，有以下两种情况会产生中文乱码问题。

    1、发送路径中的参数有中文，在服务器段接收参数值时产生乱码，如：

xmlHTTP.open ("post",url,true);

    将数据提交到服务器有两种方法， 一种是 get 方法， 另外一种是 post 方法。使用不同的方法提交数据，在服务器端接收参数时解决中文乱码的方法是不同的。具体如下;

    (1）当接收 get 方法提交的数据时，要将编码转换为 gbk，代码设计如下：

    String wishMan = request.getParameter(“wishMan”);

    out.println(“祝福对象：" + new String(wishMan.getBytes(“ISO-8859-1”),"gbk“));//解决中文乱码

   （2）由于应用 post 方法提交数据时，默认的字符编码是 utf-8，因此当接收使用 post 方法提交的数据时，要将编码转换为 utf-吧，如下：

    String wishMan = request.getParameter(“wishMan”);

    out.println(“祝福对象：" + new String(wishMan.getBytes(“ISO-8859-1”),"utf-8“));//解决中文乱码

    2、返回到 responseText 或 responseXML 的值中包含中文时会产生乱码

    在接收responseText 或 responseXML 的值时，如果包含中文，则需要将其转换为 gbk 或 gb2312 编码，并且将显示该值页面的编码格式设置为 gbk 或 gb2312，否则会产生乱码。

    jsp页面可以如下设置：

<%@ page contenttype="text/html;charset=gb2312%>

    html页面可以如下设置：

<meta http-equiv="content-type" content="text/html; charset=gb2312" />

    servlet 则可以如下设置：

response.setcontenttype("text/html;charset=gb2312");