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[何やら話し込んでますw]]></alt> <url><![CDATA[/content/lib/galleryimages/christmas-party-1.jpg]]></url> </item> <item> <no>2</no> <alt><![CDATA[食べようか食べまいか迷ってますw]]></alt> <url><![CDATA[/content/lib/galleryimages/christmas-party-2.jpg]]></url> </item> <item> <no>3</no> <alt><![CDATA[シャンパンをラッパ飲みしちゃってますw]]></alt> <url><![CDATA[/content/lib/galleryimages/christmas-party-3.jpg]]></url> </item> <item> <no>4</no> <alt><![CDATA[スーツがきつくて足上げたのにパツッてますw]]></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[いい大人が寄ってたかって、社名を考え込んでますw]]></alt> <url><![CDATA[/content/lib/galleryimages/imagination-1.jpg]]></url> </item> <item> <no>2</no> <alt><![CDATA[遊んでるのかと思いきや、ロゴの組み合わせをしてるようですw]]></alt> <url><![CDATA[/content/lib/galleryimages/imagination-2.jpg]]></url> </item> <item> <no>3</no> <alt><![CDATA[おやw何かひらめいたみたいですw]]></alt> <url><![CDATA[/content/lib/galleryimages/imagination-3.jpg]]></url> </item> <item> <no>4</no> <alt><![CDATA[どうやら決まったみたいですねーw]]></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 » 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 & 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 » 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 & 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>