実行結果
XMLデータからイメージギャラリー生成
設置サンプルのソース
<?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>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<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>