RSS(XMLファイル)を読み込んで表示します。
新着情報<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQuery::RSS(XMLファイル)を読み込んで表示 | 非同期通信::Ajaxリクエスト::jQuery.ajax(options)の使用例</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script> $(function(){ $.ajax({ url: "index.xml", type:"GET", dataType:"xml", timeout:1000, cache: false, /* エラー発生時 */ error:function(){ alert("XMLファイルの読み込みに失敗"); }, /* 成功時 */ success:function(xml){ $(xml).find("item").each(function(){ /* 記事リンク */ var item_link=$(this).find("link").text(); /* 記事タイトル */ var item_title=$(this).find("title").text(); /* 記事内容 */ var item_desc=$(this).find("description").text(); /* 公開日 */ var item_date=dateParse($(this).find('pubDate').text()); /* 属性の値を取得 */ //var item_guide=$(this).find("guid").attr("isPermaLink"); /* HTML生成 */ if(item_title!="") $("<li></li>").html("<dl><dt><span>"+item_date+"</span><a href='"+item_link+"'>"+item_title+"</a></dt><dd>"+item_desc+"</dd></dl>").appendTo("ol"); }); } }); }); /* 日付のフォーマット */ function dateParse(dateStr){ var dateObject=new Date(dateStr); y=dateObject.getFullYear(); m=dateObject.getMonth(); d=dateObject.getDate(); if (m < 10) { m ="0"+m; } if (d < 10) { d ="0"+d; } return y+"年"+m+"月"+d+"日"; } </script> <style type="text/css"> .feed { background-color:#fff; margin:0; padding:15px; border:2px solid #999; width:600px; height:300px; overflow:auto; } .feed_title { background-color:#999; padding:2px 10px; color:#fff; font-weight:bold; } ol { list-style:none; margin:0; padding:0; } li { list-style:none; margin:0; padding:0; } dl { margin:0; padding:0; } dt { margin:0; padding:0 0 0 140px; position:relative; } dt span { margin:0 1em 0 0; position:absolute; top:0; left:0; } dd { margin:1em 0 1em 140px; padding:0; } </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> <!-- CONTENT --> <h1>jQuery::非同期通信::Ajaxリクエスト::jQuery.ajax(options)の使用例</h1> <p>RSS(XMLファイル)を読み込んで表示します。</p> <!-- CODE --> <span class="feed_title">新着情報</span> <div class="feed"> <ol></ol> </div> <!-- / CODE --> <!-- /CONTENT --> </body> </html>