<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實現思想如下:
    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 );
    ????}


    }


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

    ??? tagCloud.html 的內容很簡單,兩個Button,點擊之后調用獲取不同Style的Tag Cloud的函數???

    <! 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文件,主要是字體顏色和大小的設置
    @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基本的東西,但是有注釋應該不難看懂
    var?XMLHttpReq;
    var?maxTagPosts?=?1;?//?這個變量用來保存包含關聯文章最多的那個Tag的文章數

    //?創建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)?{
    ????????????}

    ????????}

    ????}

    }

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


    //?處理返回信息函數
    function?processResponseStyle1()?{
    ????
    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+"\">"+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();
    }


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


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

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

    評論:
    # re: 使用JSON和AJAX創建網站的標簽云(TagCloud) 2008-09-29 09:09 | 52ict
    很不錯 夠詳細的 有收獲  回復  更多評論
      
    # re: 使用JSON和AJAX創建網站的標簽云(TagCloud) 2011-09-01 11:44 | tbw
    恩 不錯啊 下載了   回復  更多評論
      
    # re: 使用JSON和AJAX創建網站的標簽云(TagCloud) 2014-09-16 16:55 | fffr
    頂  回復  更多評論
      
    主站蜘蛛池模板: 另类图片亚洲校园小说区| 在线播放高清国语自产拍免费| 亚洲色成人WWW永久在线观看| 亚洲午夜久久久久久久久电影网| AV片在线观看免费| 国产拍拍拍无码视频免费| 国产亚洲精品欧洲在线观看| 久久精品亚洲精品国产色婷 | 久久乐国产精品亚洲综合| 无码视频免费一区二三区| 久久永久免费人妻精品| 中文字幕久无码免费久久| 另类专区另类专区亚洲| 亚洲男人天堂2022| 久久久久亚洲Av无码专| 亚洲人成人网站色www| 国产免费一区二区三区VR| 免费无码黄十八禁网站在线观看| 久久久99精品免费观看| 中文字幕久无码免费久久| 九九九国产精品成人免费视频| 亚洲欧美日韩综合久久久 | 国产国产人免费视频成69堂| 久久精品中文字幕免费| 中国国产高清免费av片| 国产99久久久国产精免费| 偷自拍亚洲视频在线观看| 亚洲爆乳无码专区www| 亚洲综合在线一区二区三区| 亚洲国产片在线观看| 亚洲冬月枫中文字幕在线看| 97se亚洲综合在线| 亚洲五月激情综合图片区| 久久青草亚洲AV无码麻豆| 久久亚洲精品视频| 国产亚洲一区二区三区在线| 国产av天堂亚洲国产av天堂| 亚洲AV无码一区二区三区系列| 亚洲精品无码高潮喷水在线| 四虎免费影院ww4164h| 亚洲一区二区三区香蕉|