以下範例是利用google feeds api 讀取 yahoo weather RSS 的範例
可以分成幾段
一、head 部分
引用google api ，用google account可以申請
如下
<script type="text/javascript" src="http://www.google.com/jsapi?
key=ABQIAAAAy-Ulx72brHCd0DtCPGmBFRRbZEp8C4_MgJNX2IGnI57Zyu60bBSf-
cAEuJBLHkAS5ENN-3MHGHIGtQ"></script>
二、 body 部分加入要放的 標籤好存放資訊 及讀取的檔案
<body onload="feedsWeather()" window.open.scrollbars=no >
<div ID="city" ></div>
<img id="code" src="" height="50px" width="50px" /> </div>
<div ID="text" ></div>
<div ID="temp" ></div>
<div ID="date" ></div>
</body></html>
三、在head 加入 javascript
分成三個部分
1.google.load('feeds', '1'); //引用google feeds
2.function feedsWeather()
{
//url 的位址 這裡是使用yahoo 的天氣資訊rss 地點是台北
var weatherURL = 'http://xml.weather.yahoo.com/forecastrss?
u=c&p=TWXX0021'
//使用google feeds 取得資訊
var feed = new google.feeds.Feed(weatherURL);
//設定為xml的格式，預設是json格式
feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
//get feed information
feed.load(parseWeather);
}
3. function parseWeather(result){
if (result.error) { return; } //如果錯誤就不處理
var loaction = result.xmlDocument.getElementsByTagName
("yweather:location");
city=loaction[0].getAttribute('city'); //天氣狀況
//將相關資訊寫入網頁
document.getElementById("city").innerHTML="this is "+ city+ "
city weather";
//取得 item 之間的tag
var gms = result.xmlDocument.getElementsByTagName("item");
if (gms.length <= 0) { return null; } //如果無內容 就回傳
NULL
var ele = gms[0]; //有關的天氣內容都存到gms[0]陣列
//取得 yweather:condition 之間的tag
var yweathers = ele.getElementsByTagName("yweather:condition");
//取得相關資訊
code = yweathers[0].getAttribute('code'); //天氣代碼
text = yweathers[0].getAttribute('text'); //天氣狀況
temp = yweathers[0].getAttribute('temp'); //天氣溫度
date = yweathers[0].getAttribute('date'); //天氣取得日期
//將相關資訊寫入網頁
document.getElementById("code").src='http://image.weather.com/
web/common/wxicons/52/'+code+'.gif';
document.getElementById("text").innerHTML=text;
document.getElementById("temp").innerHTML=temp+' degree Celsius
';
document.getElementById("date").innerHTML=date;
}//end parseWeather
</script>
結果如下
沒有留言:
張貼留言