使用JSON和AJAX建立網站的標籤雲(TagCloud)

廢話不多說，先看看我們最終達到的效果.　源碼下載在文章最後。

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 );
}
}