実行結果
設置サンプルのソース
<?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でRSSフィードを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'];
/* <rdf>...</rdf> を格納 */
var rdf=new Object();
for(var i=0; xmlobj.childNodes[i]!=null; i++){
/* ノード名がrankingの場合（Firefox対策:#text除外）*/
if(xmlobj.childNodes[i].nodeName=="rdf:RDF"){
rdf=xmlobj.childNodes[i];
}
}
/*
<item rdf:about="http://phpjavascriptroom.com/index.php?t=css&p=hack#he20070609">
<title>【CSS】CSS Hack</title>
<link>http://phpjavascriptroom.com/index.php?t=css&p=hack</link>
<dc:date>2007-06-09</dc:date>
<description>条件付コメント、SafariやIEなどブラウザやそのバージョンによって適用させるスタイル指定方法を追記。</description>
</item>
*/
/* <item>...</item>をDOMに格納 */
document['items']=new Object();
/* カウント用変数 */
var itemcnt=0;
/* 各記事情報（<item>...</item>）を取得 */
for(ix=0; rdf.childNodes[ix]!=null; ix++){
/* ノード名がitemの場合（Firefox対策:#text除外）*/
if(rdf.childNodes[ix].nodeName=="item"){
/* item格納オブジェクト作成 */
var item=rdf.childNodes[ix];
var itemAttr=item.getAttribute('rdf:about');
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=="title" || itemName=="link" || itemName=="dc:date" ||itemName=="description"){
var itemValue=item.childNodes[iy].firstChild.nodeValue;
if(itemValue!=null){
document['items'][itemcnt][itemName]=itemValue;
}else{
document['items'][itemcnt][itemName]="";
}
}
}
itemcnt++;
}
}
}
document.getElementById("rssfeed_xml").innerHTML=s;
fCreateRssFeed();
}
function fCreateRssFeed(){
var s="";
var items=document['items'];
s+="<div class='item'>\n";
for(k1 in items){
s+="<dl>";
var _title=items[k1]["title"]; /* タイトル */
var _link=items[k1]["link"]; /* リンク先URL */
var _date=items[k1]["dc:date"]; /* 更新日時 */
var _description=items[k1]["description"]; /* 記事内容 */
s+="<dt><a href='"+_link+"' title='"+_title+"'>"+_title+"</a></dt>";
s+="<dd><p>"+_description+"</p><p class='date'>"+_date+"</p></dd>\n";
s+="</dl>\n";
}
s+="</div>\n";
if(document.getElementById("rssfeed_xml")){
document.getElementById("rssfeed_xml").innerHTML=s;
}
}
window.onload=function(){
/* ページ読み込み完了時に実行 */
fXmlHttpRequestObj("/module/include/ajax/rssfeed.xml");
}
</script>
<style type="text/css">
body { font-family:vrendana, sans-serif; font-size:13px; }
div.item { margin:0; padding:0; }
div.item dl { margin:15px 0; padding:10px; border:1px solid #ccc; background-color:#f7f7f7; }
div.item dl dt { margin:0 0 10px 0; padding:0; }
div.item dl dt a { font-weight:bold; font-size:1.1em; }
div.item dl dd { margin:10px 0 10px 20px; padding:0; }
div.item dl dd p { margin:10px 0; padding:0; text-align:left; line-height:1.5; }
div.item dl dd p.date { text-align:right; font-style:italic; }
</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="rssfeed_xml"><!-- Ranking Data --></div>
</body>
</html>