LENDIEN聯電 冷暖 清淨 除溼 移動式空調 9000BTU任天堂-Switch-NS-公司貨主機-豪華全配組LG樂金 WIFI遠控雙眼小精靈掃地清潔機器人變頻版

2012年9月19日 星期三

javascript xml parser

終於比較有時間可以更新這個地方

上一篇是去年11月,那真是一種另類的紀念—上個工作的黑暗期起始日
黑暗期為期將近八個月,然後一個機會、一個爆發點、一個最適當的環境條件,我離開了

然後在新的地方忙錄了兩個多月,現在大部份的工作都到一段落,新階段還沒開始,撥空整理手邊累積將近一年的照片,再回到這個地方看看,赫然發現原本支援asp的空間似忽不能跑我的程式了。。。。。。原本寫好的懶人相簿及blog更新程式都沒用,於是花了一些時間修改,把原來的asp版的xml parser改成javascript版的xml parser

內行人就知道接著我要寫km了,看我上面舖了好長一段梗,不囉嗦,開始講所謂的javascriptxml parser

程式大略分兩部份,第一部份是大家使用很長一段時間的xmlhttprequest: ==========================================
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","XML URL",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
==========================================
這邊要注意的是xmlhttprequest這個元件一如以往大家所認識的,不能跨domain存取,所以xml url必需是在相同的domain下(這個意謂著我以後要把xml copy回自己的空間才算完成更新這樣)

第二個部份即是進入xml parse跟頁面顯示,其實相當簡單:
==========================================
x=xmlDoc.getElementsByTagName("entry");
var txt="";

for (i=0;i<10;i++)

{
    atitle=(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue);
    pdate=(x[i].getElementsByTagName("published")[0].childNodes[0].nodeValue).substr(0,10);
    txt += pdate+" <a href='http://yrbrlono.blogspot.tw/'>"+atitle+"</a><br />";
}

document.getElementById("blogarea").innerHTML = txt;
==========================================
這裡唯一要注意的是x的長度,我的需求是顯示10則就好,而且我確定我的xml裡至少有10則,所以迴圈設定上直接固定跑10次,如果是要讓x有多少就顯示多少,把i<10改成i<x.length就行
這裡多使用了substr函數,因為我只要取日期的前10碼(YYYY-MM-DD)就好

搭配這段程式的xml大致是像這樣:
==========================================
<entry>
    <title>文章標題1</title>
    <published>YYYY-MM-DDT00000000</published>
</entry>
<entry>
    <title>文章標題2</title>
    <published>YYYY-MM-DDT11111111</published>
</entry>
==========================================
相當容易,隨便一台電腦備有瀏覽器及記事本自己就可以寫程式、執行,讓你一分鐘javascript xml parser就上手

好的,下課!!