実行結果
設置サンプルのソース
<?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>
<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>
<div id="pageview_ranking"><!-- Ranking Data --></div>
</body>
</html>