■Ajax : WebDesigning 2006年6月号サンプル

 WebDesigning 6月号掲載のサンプルです。他サイトのRSSを読み込みページ上に表示するものです。掲載されているものとはレイアウトなどは異なります。CGIは元はRubyで作成されたものをPerlに書き直したものなので、両方のソースを掲載しています。

サンプルを実行する
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>RSSリーダー</title>
<style type="text/css"><!--
#result {
width:240px;
height:120px;
border:1px solid black;
background-color:#f0f0f8;
overflow:hidden;
white-space:nowrap;
}
#result a {
font-size:8pt;
line-height:15pt;
text-decoration:none;
}
--></style>
<script type="text/javascript" src="jkl-parsexml.js"></script>
<script type="text/javascript"><!--
rssURL = "www3.asahi.com/rss/index.rdf";
// rssURL = "japan.zdnet.com/rss/news/index.rdf";
// rssURL = "feeds.feedburner.jp/cnet/rss";
window.onload = function() {
var list = "";
var maxItem = 5; // 最大表示項目数
var url = "curl.cgi?sURL="+encodeURIComponent(rssURL)+"&cache="+(new Date()).getTime();
var httpObj = new JKL.ParseXML(url);
xmlData = httpObj.parse();
n = xmlData["rdf:RDF"]["item"].length;
if (n > maxItem) n = maxItem;
for (var i=0; i<n; i++) {
var rssTitle = xmlData["rdf:RDF"]["item"][i].title;
var rssLink = xmlData["rdf:RDF"]["item"][i].link;
list += '<a href="'+rssLink+'">'+rssTitle + "</a><br>";
}
document.getElementById("result").innerHTML = list;
}
// --></script>
</head>
<body>
<h1>RSSリーダー (他ドメイン)</h1>
<div id="result"></div>
</body>
</html>

【curl.cgi】
#!/usr/bin/perl
use Jcode;
use CGI;
$input = new CGI;
$inputdata = $input->param("sURL");
print "Content-type: text/html\n\n";
print "\xef\xbb\xbf";
open(FH,"curl '".$inputdata."' |");
while (<FH>) {
print Jcode::convert($_,"utf8");
}
close(FH);

【curl.rb】
#!/usr/local/bin/ruby
require "kconv"
require "cgi-lib"
input = CGI.new
print "Content-type: text/xml\n\n"
print "\xef\xbb\xbf"
fh = open("| curl '"+input["sURL"]+"'")
while !fh.eof
print Kconv::toutf8(fh.gets)
end
fh.close