<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    隨筆-46  評論-64  文章-2  trackbacks-0

    廢話不多說,先看看我們最終達到的效果.? 源碼下載在文章最后。
    Style1:
    tagcloudstyle1.png
    Style2:
    tagcloudstyle2.png


    上面的tag cloud實現(xiàn)思想如下:
    1. Server端提供Tag的相關(guān)信息,包括TagName,Posts等,使用JSON格式傳輸數(shù)據(jù)

    ??? 這個例子中,我使用Servlet,使用json-lib將Bean轉(zhuǎn)成JSON字符串。當然Tag的相關(guān)信息這里只是演示,真實環(huán)境中可能就需要從數(shù)據(jù)庫取出來再處理了。
    ??? 代碼如下:???

    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 " , " 春天 " , " 夏天 " , " 秋天 " , " 冬天 " , " 節(jié)日快樂 " ,
    ????????????????
    " 破釜沉舟 " , " 瑞星殺毒 " , " 奶粉事故 "
    ????????????????,
    " 奧運會 " , " Grails " , " Google " , " Baidu " , " XiaoNei " ,
    ????????????????
    " 開心網(wǎng) " , " 校內(nèi)網(wǎng) " , " 海內(nèi)網(wǎng) " , " 都是垃圾 " , " 薩達姆 " , " PK " , " 網(wǎng)摘 "
    ????????}
    ;
    ????????
    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 );
    ????}


    }


    2. 客戶端發(fā)起XMLHttpRequest請求,取得TagCloud需要的JSON數(shù)據(jù),進行處理,生成鏈接,定義樣式
    ??? 當然這里我們設(shè)計是將js文件,css文件,html分離了,為了更好的維護。
    ??? 目錄和文件結(jié)構(gòu)如下:
    ???? tagcloudproject.png

    ??? tagCloud.html 的內(nèi)容很簡單,兩個Button,點擊之后調(diào)用獲取不同Style的Tag Cloud的函數(shù)???

    <! DOCTYPE?html?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN"?"http://www.w3.org/TR/html4/loose.dtd" >
    < html >
    < head >
    < meta? http-equiv ="Content-Type" ?content ="text/html;?charset=UTF-8" >
    < title > Tag?Cloud </ title >
    < script? type ="text/javascript" ?src ="json2.js" ></ script >
    < script? type ="text/javascript" ?src ="tagcloud.js" ></ script >
    < link? rel =StyleSheet? type ="text/css" ?href ="tagCloud.css" >
    </ head >
    < body >
    < p > Version.1?use?raw?XMLHttpRequest?to?get?JSON?data?from?a?Servlet. </ p >
    < input? id ="btn_getTagCloud1" ?type ="button" ?value ="Get?tag?cloud?style1"
    ????onclick
    ="getTagCloud();" ? />
    < div? id ="tagcloud" ></ div >

    < input? id ="btn_getTagCloud2" ?type ="button" ?value ="Get?tag?cloud?style2"
    ????onclick
    ="getTagCloud2();" ? />
    < div? id ="tagcloudwithstyle2" ></ div >
    </ body >
    </ html >

    ??? 再看看我們定義的css文件,主要是字體顏色和大小的設(shè)置
    @CHARSET?"UTF-8";

    #tagcloud,#tagcloudwithstyle2
    {
    ????width
    :?500px;
    ????background
    :#FFFFFF;/*#FFFFCC;*/
    ????padding
    :?10px;
    ????border
    :?1px?solid?#FFE7B6;
    ????text-align
    :center;
    ????font-family
    :'Trebuchet?MS',Arial,Verdana,sans-serif;
    }


    #tagcloud?a:link,?#tagcloud?a:visited?
    {
    ????text-decoration
    :none;
    ????color
    :?#87A800;
    }


    #tagcloud?a:hover,?#tagcloud?a:active?
    {
    ????color
    :?#FFFFFF;
    ????background-color
    :?#87A800;
    }


    #tagcloud?span,?#tagcloudwithstyle2?span
    {
    ????padding
    :?4px;
    }


    #tagcloudwithstyle2?a:link,?#tagcloudwithstyle2?a:visited?
    {
    ????text-decoration
    :none;
    ????color
    :?#ff4500;
    }


    #tagcloudwithstyle2?a:hover,?#tagcloudwithstyle2?a:active?
    {
    ????color
    :?#FF3300;
    ????background-color
    :?#ffff00;
    }

    .smallest?
    {
    ????font-size
    :?10px;
    }


    .small?
    {
    ????font-size
    :?15px;
    }


    .medium?
    {
    ????font-size
    :?20px;
    }


    .large?
    {
    ????font-size
    :?25px;
    }


    .largest?
    {
    ????font-size
    :?30px;
    }

    來看看這里最重要的javascript文件,有些AJAX基本的東西,但是有注釋應(yīng)該不難看懂
    var?XMLHttpReq;
    var?maxTagPosts?=?1;?//?這個變量用來保存包含關(guān)聯(lián)文章最多的那個Tag的文章數(shù)

    //?創(chuàng)建XMLHttpRequest對象
    function?createXMLHttpRequest()?{
    ????
    if?(window.XMLHttpRequest)?{?//?Mozilla?瀏覽器
    ????????XMLHttpReq?=?new?XMLHttpRequest();
    ????}
    ?else?if?(window.ActiveXObject)?{?//?IE瀏覽器
    ????????try?{
    ????????????XMLHttpReq?
    =?new?ActiveXObject("Msxml2.XMLHTTP");
    ????????}
    ?catch?(e)?{
    ????????????
    try?{
    ????????????????XMLHttpReq?
    =?new?ActiveXObject("Microsoft.XMLHTTP");
    ????????????}
    ?catch?(e)?{
    ????????????}

    ????????}

    ????}

    }

    //?發(fā)送請求函數(shù)
    function?sendRequest(url,?callback)?{
    ????createXMLHttpRequest();
    ????XMLHttpReq.open(
    "GET",?url,?true);
    ????
    //XMLHttpReq.onreadystatechange?=?processResponse;//?指定響應(yīng)函數(shù)
    ????XMLHttpReq.onreadystatechange?=?callback;
    ????XMLHttpReq.send(
    null);?//?發(fā)送請求
    }


    //?處理返回信息函數(shù)
    function?processResponseStyle1()?{
    ????
    if?(XMLHttpReq.readyState?==?4)?{?//?判斷對象狀態(tài)
    ????????if?(XMLHttpReq.status?==?200)?{?//?信息已經(jīng)成功返回,開始處理信息
    ????????????????????????
    ????????????
    var?tagCloud?=?JSON.parse(?XMLHttpReq.responseText?);
    ????????????
    for(var?i=0;?i<?tagCloud.length;i++)
    ????????????
    {
    ????????????????
    if(tagCloud[i].relatedPosts>maxTagPosts)
    ????????????????
    {
    ????????????????????maxTagPosts?
    =?tagCloud[i].relatedPosts;
    ????????????????}

    ????????????}


    ????????????
    var?tagCloudHTML?=?"";
    ????????????
    for(var?j=0;?j<?tagCloud.length;j++)
    ????????????
    {
    ????????????????
    var?searchCondition?=?encodeURI(tagCloud[j].categoryName);
    ????????????????
    var?classSize?=?getClass(tagCloud[j].relatedPosts);
    ????????????????
    var?aTag?=?"<span?class='"+classSize+"'><a?href=\"#?search="+searchCondition
    ????????????????+
    "\"?title=\"Posts:?"+tagCloud[j].relatedPosts+"\">"+tagCloud[j].categoryName+"</a></span>\n";
    ????????????????
    ????????????????tagCloudHTML?
    +=?aTag;
    ????????????}

    ????????????
    ????????????document.getElementById(
    "tagcloud").innerHTML?=?tagCloudHTML;
    ????????}
    ?else?{?//?頁面不正常
    ????????????window.alert("Page?Exception!");
    ????????}

    ????}

    }


    function?processResponseStyle2()?{
    ????
    if?(XMLHttpReq.readyState?==?4)?{
    ????????
    if?(XMLHttpReq.status?==?200)?{
    ????????????
    var?tagCloud?=?JSON.parse(?XMLHttpReq.responseText?);
    ????????????
    for(var?i=0;?i<?tagCloud.length;i++)
    ????????????
    {
    ????????????????
    if(tagCloud[i].relatedPosts>maxTagPosts)
    ????????????????
    {
    ????????????????????maxTagPosts?
    =?tagCloud[i].relatedPosts;
    ????????????????}

    ????????????}

    ????????????
    ????????????
    var?tagCloudHTML?=?"";
    ????????????
    for(var?j=0;?j<?tagCloud.length;j++)
    ????????????
    {
    ????????????????
    var?searchCondition?=?encodeURI(tagCloud[j].categoryName);
    ????????????????
    var?classSize?=?getClass(tagCloud[j].relatedPosts);
    ????????????????
    var?aTag?=?"<span?class='"+classSize+"'><a?href='#?search="+searchCondition
    ????????????????????
    +?"'?title='Posts:?"+tagCloud[j].relatedPosts+"'"
    ????????????????????
    +?"?style='color:"?+?getRandomColor()?+"'?>"
    ????????????????????
    +?tagCloud[j].categoryName?+?"</a></span>\n";
    ????????????
    ????????????????tagCloudHTML?
    +=?aTag;
    ????????????}
    ????????????
    ????????????document.getElementById(
    "tagcloudwithstyle2").innerHTML?=?tagCloudHTML;
    ????????}
    ?else?{
    ????????????window.alert(
    "Page?Exception!");
    ????????}

    ????}

    }


    function?getRandomColor()
    {
    ????
    var?r=Math.floor((Math.random()*256)).toString(16);
    ????
    var?g=Math.floor((Math.random()*256)).toString(16);
    ????
    var?b=Math.floor((Math.random()*256)).toString(16);
    ????
    var?colorString="#"+r+g+b;
    ????
    return?colorString;
    }

    function?getTagCloud()?{
    ????sendRequest('getTagCloud',processResponseStyle1);
    }

    function?getTagCloud2()?{
    ????sendRequest('getTagCloud',processResponseStyle2);
    }


    function?getClass(relatedPosts)
    {
    ????
    var?presentage?=?Math.floor((relatedPosts/maxTagPosts)*100);
    ????
    var?classSize;
    ????
    if(presentage<20)
    ????
    {
    ????????classSize?
    =?'smallest';
    ????}

    ????
    else?if(20<=presentage?&&?presentage?<40)
    ????
    {
    ????????classSize?
    =?'small';
    ????}

    ????
    else?if(40<=presentage?&&?presentage?<60)
    ????
    {
    ????????classSize?
    =?'medium';
    ????}

    ????
    else?if(60<=presentage?&&?presentage?<80)
    ????
    {
    ????????classSize?
    =?'large';
    ????}

    ????
    else?if(80<=presentage)
    ????
    {
    ????????classSize?
    =?'largest';
    ????}

    ????
    return?classSize;
    }


    window.onload?
    =?function(){
    ????createXMLHttpRequest();
    ????getTagCloud();
    }


    根據(jù)tag關(guān)聯(lián)的posts的數(shù)量算出這個tag字體大小的class,第一個style的顏色是在css文件指定的,第二個style多彩文字,功勞都在getRandomColor這個函數(shù)上啦。


    希望這個例子能給想DIY自己的TagCloud的朋友們一些幫助。

    最后是這個Demo的Eclipse工程下載,有興趣的同學(xué)吧。 點擊下載
    posted on 2008-09-28 16:10 jht 閱讀(3161) 評論(3)  編輯  收藏 所屬分類: J2EE

    評論:
    # re: 使用JSON和AJAX創(chuàng)建網(wǎng)站的標簽云(TagCloud) 2008-09-29 09:09 | 52ict
    很不錯 夠詳細的 有收獲  回復(fù)  更多評論
      
    # re: 使用JSON和AJAX創(chuàng)建網(wǎng)站的標簽云(TagCloud) 2011-09-01 11:44 | tbw
    恩 不錯啊 下載了   回復(fù)  更多評論
      
    # re: 使用JSON和AJAX創(chuàng)建網(wǎng)站的標簽云(TagCloud) 2014-09-16 16:55 | fffr
    主站蜘蛛池模板: 无码专区—VA亚洲V天堂| 久久亚洲精品成人| 国产亚洲精品xxx| 亚洲AV无码成人精品区天堂| 亚洲伦理一区二区| 亚洲一本之道高清乱码| 亚洲精品无码成人片久久不卡| 欧洲亚洲综合一区二区三区| 国产日韩久久免费影院| 91精品免费不卡在线观看| 日韩精品成人无码专区免费| 国产乱色精品成人免费视频| 亚洲永久无码3D动漫一区| 亚洲高清视频在线播放| 亚洲经典千人经典日产| 亚欧乱色国产精品免费视频| 无码精品人妻一区二区三区免费看 | 亚洲中文字幕乱码AV波多JI| 国产亚洲精品欧洲在线观看| 97在线免费观看视频| 日韩中文字幕精品免费一区| 免费看一级做a爰片久久| 久久亚洲精品成人| 亚洲av片在线观看| 一个人免费视频在线观看www| 99久久综合国产精品免费| 亚洲无线一二三四区手机| 亚洲综合视频在线观看| 黄色网址免费在线| 久久久久国产精品免费免费不卡| 国内自产拍自a免费毛片| 亚洲乱码中文字幕综合| 中国china体内裑精亚洲日本| 中文在线免费看视频| 欧洲精品免费一区二区三区| 日本亚洲欧洲免费天堂午夜看片女人员 | 亚洲AV区无码字幕中文色| 亚洲日本VA午夜在线影院| 国产精品区免费视频| 免费看小12萝裸体视频国产| 久久久久亚洲AV无码永不|