使用JSON和AJAX创建网站的标签云（TagCloud）

使用JSON和AJAX创建网站的标签云（TagCloud）2011-09-06 blogjava 季浩废话不多说，先看看我们最终达到的效果. 源码下载在文章最后。

Style1:

Style2:

上面的tag cloud实现思想如下：

1. Server端提供Tag的相关信息，包括TagName，Posts等，使用JSON格式传输数据

这个例子中，我使用Servlet，使用json-lib将Bean转成JSON字符串。当然 Tag 的相关信息这里只是演示，真实环境中可能就需要从数据库取出来再处理了。

代码如下：

import java.io.IOException;
import java.util.ArrayList;
import java.util.Random;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONSerializer;
public class TagCloudAction extends HttpServlet {
private static String cache = "" ;
/** */ /** 
* 
*/ 
private static final long serialVersionUID = - 7031695721764039045L ;
@Override
protected void doGet（HttpServletRequest req, HttpServletResponse resp）
throws ServletException, IOException {
resp.setHeader（ " Pragma " , " no-cache " ）;
resp.addHeader（ " Cache-Control " , " must-revalidate " ）;
resp.addHeader（ " Cache-Control " , " no-cache " ）;
resp.addHeader（ " Cache- Control " , " no-store " ）;
resp.setDateHeader（ " Expires " , 0 ）;
resp.setContentType（ " text/xml " ）;
resp.setCharacterEncoding（ " UTF-8 " ）;
if （cache.isEmpty（））
{
cache = getTagCloudJSONString（）;
} 
resp.getOutputStream（）.write（cache.getBytes（ " UTF-8 " ））;
resp.flushBuffer（）;
} 
private String getTagCloudJSONString（）
{
Category c = new Category（ " Name " , " This is comments " , 10 ）;
c.setCategoryID（ 10 ）;
// System.out.println（ JSONSerializer.toJSON（c）.toString（） ）;
// System.out.println（ JSONSerializer.toJSON（c）.toString（2） ）; 

ArrayList < Category > categoriesList = new ArrayList < Category > （）;
Random r = new Random（）;
String[] tags = new String[] {
" JAVA " , " Groovy " , " Servlet " , " J2EE " , " JSP " , " J2SE " 
, " JSON " , " AJAX " , " CaiClient " , " .NET " , " C# " , " Perl " ,
" Python " , " Rails " , " Ruby " , " Boss " , " Nokia " , " GPhone " , " iPhone " 
, " HiPhone " , " Ericsson " , " Semens " , " Novels " , " 春天 " , " 夏天 " , " 秋天 " , " 冬天 " , " 节日快乐 " ,
" 破釜沉舟 " , " 瑞星杀毒 " , " 奶粉事故 " 
, " 奥运会 " , " Grails " , " Google " , " Baidu " , " XiaoNei " ,
" 开心网 " , " 校内网 " , " 海内网 " , " 都是垃圾 " , " 萨达姆 " , " PK " , " 网摘 " 
} ;
int len = tags.length - 1 ;
for （ int i = 0 ; i < 100 ; i ++ ） {
Category item = new Category（tags[r.nextInt（len）], " This is comments for " + i,r.nextInt（ 100 ））;
item.setCategoryID （i）;
categoriesList.add（item）;
} 
System.err.println（ JSONSerializer.toJSON（categoriesList）.toString（） ）;
// System.err.println（ JSONSerializer.toJSON （categoriesList）.toString（2） ）; 
return JSONSerializer.toJSON（categoriesList）.toString（ 2 ）;
} 
}