AjaxでXMLデータをHTML出力｜XML->DOM生成->HTML出力｜Ajax｜PHP & JavaScript Room
Search

XML->DOM生成->HTML出力AjaxでXMLデータをHTML出力


XMLデータからイメージギャラリー作成

2008/2/4

XMLデータを読み込んで、簡易イメージギャラリーを作成する例です。 ボタン切替で読み込むXMLファイルを変更しています。

christmasparty.xml
<?xml version="1.0" encoding="utf-8"?>
<images>
    <item>
        <no>1</no>
        <alt><![CDATA[何やら話し込んでますｗ]]></alt>
        <url><![CDATA[/content/lib/galleryimages/christmas-party-1.jpg]]></url>
    </item>
    <item>
        <no>2</no>
        <alt><![CDATA[食べようか食べまいか迷ってますｗ]]></alt>
        <url><![CDATA[/content/lib/galleryimages/christmas-party-2.jpg]]></url>
    </item>
    <item>
        <no>3</no>
        <alt><![CDATA[シャンパンをラッパ飲みしちゃってますｗ]]></alt>
        <url><![CDATA[/content/lib/galleryimages/christmas-party-3.jpg]]></url>
    </item>
    <item>
        <no>4</no>
        <alt><![CDATA[スーツがきつくて足上げたのにパツッてますｗ]]></alt>
        <url><![CDATA[/content/lib/galleryimages/christmas-party-4.jpg]]></url>
    </item>
    <item>
        <no>5</no>
        <alt><![CDATA[もしや∑(OДO)セクハラ!?]]></alt>
        <url><![CDATA[/content/lib/galleryimages/christmas-party-5.jpg]]></url>
    </item>
</images>
imagination.xml
<?xml version="1.0" encoding="utf-8"?>
<images>
    <item>
        <no>1</no>
        <alt><![CDATA[いい大人が寄ってたかって、社名を考え込んでますｗ]]></alt>
        <url><![CDATA[/content/lib/galleryimages/imagination-1.jpg]]></url>
    </item>
    <item>
        <no>2</no>
        <alt><![CDATA[遊んでるのかと思いきや、ロゴの組み合わせをしてるようですｗ]]></alt>
        <url><![CDATA[/content/lib/galleryimages/imagination-2.jpg]]></url>
    </item>
    <item>
        <no>3</no>
        <alt><![CDATA[おやｗ何かひらめいたみたいですｗ]]></alt>
        <url><![CDATA[/content/lib/galleryimages/imagination-3.jpg]]></url>
    </item>
    <item>
        <no>4</no>
        <alt><![CDATA[どうやら決まったみたいですねーｗ]]></alt>
        <url><![CDATA[/content/lib/galleryimages/imagination-4.jpg]]></url>
    </item>
</images>
例：XMLデータからイメージギャラリー生成サンプルを見る
<? echo '<?xml version="1.0" encoding="utf-8"?>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax &raquo; XML読込->DOM格納->HTML出力 :: XMLデータからイメージギャラリー作成 : PHP & JavaScript Room</title>
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="copyright" content="Copyright (c) PHP &amp; JavaScript Room" />
<script type="text/javascript">
function fXmlHttpRequestObj(xmlURL){
    /* XMLHttpRequestオブジェクト作成 */
    var xmlhttp=false;
    if(typeof ActiveXObject!="undefined"){ /* IE5, IE6 */
        try {
            xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); /* MSXML3 */
        }
        catch(e){
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); /* MSXML2 */
        }
    }
    if(!xmlhttp && typeof XMLHttpRequest!="undefined"){
        xmlhttp=new XMLHttpRequest(); /* Firefox, Safari, IE7 */
    }
    if(!xmlhttp){
        alert("XMLHttpRequest非対応ブラウザ");
        return false;
    }
    /* レスポンスデータ処理 */
    xmlhttp.onreadystatechange=function(){
        if(xmlhttp.readyState==4 && xmlhttp.status==200){
            document['xmlObject']=new Object();
            document['xmlObject']=xmlhttp.responseXML;
            fXmltoDom();
        }
    }
    /* HTTPリクエスト実行 */
    xmlhttp.open("GET",xmlURL,true);
    xmlhttp.send(null);
}
function fXmltoDom(){
    var s="";
    /* XMLデータ */
    var xmlobj=document['xmlObject'];
    /* <ranking>...</ranking> を格納 */
    var ranking=new Object();
    for(var i=0; xmlobj.childNodes[i]!=null; i++){
        /* ノード名がrankingの場合（Firefox対策:#text除外）*/
        if(xmlobj.childNodes[i].nodeName=="images"){
            ranking=xmlobj.childNodes[i];
        }
    }
    /* ランキング配列格納オブジェクト作成（戻り値代わり） */
    document['items']=new Object();
    /* カウント用変数 */
    var itemcnt=0;
    /* 各ランキング情報（<item>...</item>）を格納 */
    for(ix=0; ranking.childNodes[ix]!=null; ix++){
        /* ノード名がitemの場合（Firefox対策:#text除外）*/
        if(ranking.childNodes[ix].nodeName=="item"){
            /* item格納オブジェクト作成 */
            var item=ranking.childNodes[ix];
            if(item!=null){
                document['items'][itemcnt]=new Object();
                for(var iy=0; item.childNodes[iy]!=null; iy++){
                    var itemName=item.childNodes[iy].nodeName;
                    if(itemName=="no" || itemName=="alt" ||itemName=="url"){
                        var itemValue=item.childNodes[iy].firstChild.nodeValue;
                        if(itemValue!=null){
                            document['items'][itemcnt][itemName]=itemValue;
                            s+=document['items'][itemcnt][itemName]+"\n";
                        }
                    }
                }
                itemcnt++;
            }
        }
    }
    document['itemcnt']=new Object();
    document['itemcnt']=itemcnt;
    fCreateRanking(0);
}
function fCreateRanking(id){
    /* idを取得して画像を表示 */
    var s="";
    var naviStr="";
    if(!id) id=0;
    if(parseInt(document['itemcnt']) <= parseInt(id)) id=0;
    var items=document['items'];
    s+="<h2>"+document['galleryTitle']+"</h2>\n";
    naviStr+="<ul>\n";
    for(k1 in items){
        naviStr+="<li><a href='javascript:fCreateRanking("+k1+")'>"+(eval(k1)+1)+"</a></li>\n";
    }
    naviStr+="</ul>\n";
    s+=naviStr;
    /* 画像表示 */
    var _no=items[id]["no"];    /* No. */
    var _alt=items[id]["alt"];    /* タイトル */
    var _url=items[id]["url"];    /* リンク先URL */
    s+="<p><img src='"+_url+"' alt='"+_alt+"' id/></p><p>"+_alt+"</p>";
    s+=naviStr;
    if(document.getElementById("pageview_images")){
        document.getElementById("pageview_images").innerHTML=s;
    }
}
function fLoad(category,title){
    /* ページ読み込み完了時に実行 */
    fXmlHttpRequestObj("/module/include/ajax/xmltodom/"+category+".xml");
    document['galleryTitle']=new Object();
    document['galleryTitle']=title;
}
</script>
<style type="text/css">
body {
    color:#c9af9d;
    background-color:#422720;
    font-size:81%;
    font-family:verdana,sans-serif;
    text-align:center;
}
a {
    color:#dbffdf;
    font-weight:bold;
}
h1 {
    margin:1em auto; padding:0;
    font-size:130%;
}
h2 {
    margin:1em auto; padding:5px 0;
    color:#422720;
    background-color:#c9af9d;
    font-size:130%;
}
ul {
    list-style:none;
    margin:1em auto; padding:0;
}
li {
    margin:0; padding:0 10px;
    display:inline;
}
</style>
</head>
<body>
<h1>XMLデータからイメージギャラリー生成</h1>
<p>
    <input type="button" onclick="fLoad('christmasparty',this.value)" value="クリパ" />
    <input type="button" onclick="fLoad('imagination',this.value)" value="経営企画会議" />
</p>
<div id="pageview_images"><!-- Ranking Data --></div>
</body>
</html>

ランキングXMLデータを読み込んで表示してみよう

2007/6/10

Ajaxを使えば、RSSフィードを読み込んでサイトの更新情報を表示したり、ランキング表示も簡単です。

以下の例では、ランキングXML（ranking.xml）をAjaxで読み込み、いったんDOMに格納後、ランキングデータをHTML出力しています。

XMLの構成や各要素名は自由に決められます。 文字列を入れる場合は、<![CDATA[文字列]]>で囲っておくのが安全です。

XMLのエンコードがUTF8の場合は、XML宣言を省略できますが、それ以外のエンコードの場合は、<?xml version="1.0" encoding="Shift_JIS"?>のようにencoding属性に文字エンコードを宣言してください。（省略不可）

また、Ajaxを利用する場合はXHTMLの方がよいみたいです（HTMLでも動作はしますが。）

ranking.xml
<?xml version="1.0" encoding="utf-8"?>
<ranking>
    <item>
        <no>1</no>
        <title><![CDATA[文字列関数]]></title>
        <view>5,748</view>
        <url><![CDATA[./index.php?t=php&p=string]]></url>
    </item>
    <item>
        <no>2</no>
        <title><![CDATA[日付・時間関数]]></title>
        <view>5,109</view>
        <url><![CDATA[./index.php?t=php&p=datetime]]></url>
    </item>
    <item>
        <no>3</no>
        <title><![CDATA[ファイルシステム関数]]></title>
        <view>4,572</view>
        <url><![CDATA[./index.php?t=php&p=file]]></url>
    </item>
    <item>
        <no>4</no>
        <title><![CDATA[マルチバイト文字列関数]]></title>
        <view>4,450</view>
        <url><![CDATA[./index.php?t=php&p=mbstring]]></url>
    </item>
    <item>
        <no>5</no>
        <title><![CDATA[php.ini の設定例]]></title>
        <view>4,170</view>
        <url><![CDATA[./index.php?t=php&p=ini]]></url>
    </item>
</ranking>
例：ページビューランキングサンプルを見る
<? echo '<?xml version="1.0" encoding="utf-8"?>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax &raquo; XML読込->DOM格納->HTML出力 :: AjaxでランキングデータをHTML出力 : PHP & JavaScript Room</title>
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="copyright" content="Copyright (c) PHP &amp; JavaScript Room" />
<script type="text/javascript">
function fXmlHttpRequestObj(xmlURL){
    /* XMLHttpRequestオブジェクト作成 */
    var xmlhttp=false;
    if(typeof ActiveXObject!="undefined"){ /* IE5, IE6 */
        try {
            xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); /* MSXML3 */
        }
        catch(e){
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); /* MSXML2 */
        }
    }
    if(!xmlhttp && typeof XMLHttpRequest!="undefined"){
        xmlhttp=new XMLHttpRequest(); /* Firefox, Safari, IE7 */
    }
    if(!xmlhttp){
        alert("XMLHttpRequest非対応ブラウザ");
        return false;
    }
    /* レスポンスデータ処理 */
    xmlhttp.onreadystatechange=function(){
        if(xmlhttp.readyState==4 && xmlhttp.status==200){
            document['xmlObject']=new Object();
            document['xmlObject']=xmlhttp.responseXML;
            fXmltoDom();
        }
    }
    /* HTTPリクエスト実行 */
    xmlhttp.open("GET",xmlURL,true);
    xmlhttp.send(null);
}
function fXmltoDom(){
    var s="";
    /* XMLデータ */
    var xmlobj=document['xmlObject'];

    /* <ranking>...</ranking> を格納 */
    var ranking=new Object();
    for(var i=0; xmlobj.childNodes[i]!=null; i++){
        /* ノード名がrankingの場合（Firefox対策:#text除外） */
        if(xmlobj.childNodes[i].nodeName=="ranking"){
            ranking=xmlobj.childNodes[i];
        }
    }
    
    /* ランキング配列格納オブジェクト作成（戻り値代わり） */
    document['items']=new Object();
    /* カウント用変数 */
    var itemcnt=0;
    /* 各ランキング情報（<item>...</item>）を格納 */
    for(ix=0; ranking.childNodes[ix]!=null; ix++){
        /* ノード名がitemの場合（Firefox対策:#text除外） */
        if(ranking.childNodes[ix].nodeName=="item"){
            /* item格納オブジェクト作成 */
            var item=ranking.childNodes[ix];
            if(item!=null){
                document['items'][itemcnt]=new Object();
                for(var iy=0; item.childNodes[iy]!=null; iy++){
                    var itemName=item.childNodes[iy].nodeName;
                    if(itemName=="no" || itemName=="title" || itemName=="view" ||itemName=="url"){
                        var itemValue=item.childNodes[iy].firstChild.nodeValue;
                        if(itemValue!=null){
                            document['items'][itemcnt][itemName]=itemValue;
                            s+=document['items'][itemcnt][itemName]+"\n";
                        }
                    }
                }
                itemcnt++;
            }
        }
    }
    fCreateRanking();
}
function fCreateRanking(){
    var s="";
    var items=document['items'];
    s+="<table class='pvr'>\n";
    s+="<tr><th colspan='2'>ページビュー・ランキング</th></tr>\n";
    for(k1 in items){
        var _no=items[k1]["no"];        /* 順位 */
        var _title=items[k1]["title"];    /* タイトル */
        var _view=items[k1]["view"];    /* View数 */
        var _url=items[k1]["url"];        /* リンク先URL */

        s+="<tr>\n";
        s+="<td class='no'>"+_no+"</td>\n";
        s+="<td><a href='"+_url+"' title='"+_title+"'>"+_title+"</a><br>ページビュー数: "+_view+"</td>";
        s+="</tr>\n";
    }
    s+="</table>\n";
    if(document.getElementById("pageview_ranking")){
        document.getElementById("pageview_ranking").innerHTML=s;
    }
}
window.onload=function(){
    /* ページ読み込み完了時に実行 */
    fXmlHttpRequestObj("/module/include/ajax/xmltodom/ranking.xml");
}
</script>
<style type="text/css">
body { font-size:13px; font-family:Verdana, sans-serif; }
table.pvr { margin:0; padding:0; border-spacing:1px; background-color:#e8e8e8; border:1px solid #ccc; }
table.pvr th { margin:0; padding:5px; font-weight:bold; text-align:center; background-color:#eee; }
table.pvr td { margin:0; padding:5px; background-color:#fff; line-height:1.5; }
table.pvr td.no { background-color:#f7f7f7; font-weight:bold;}
</style>
</head>
<body>
<div id="pageview_ranking"><!-- Ranking Data --></div>
</body>
</html>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて

©2026 PHP & JavaScript Room All Rights Reserved.

pagetop