RSS กับ XML (ตอนที่ 4)
การ parse เอกสาร XML ด้วย Javascript
การจัดการกับเอกสารที่เป็น XML เราก็จะใช้ Method และ Property ของ DOM ในการจัดการครับเช่น
Method เช่น
getElementsByTagName(name) คืนค่าเป็น element(ทั้งหมด เป็น Array) ที่มีชื่อตามที่กำหนด(name)
hasChildNodes บอกว่ามี Node ย่อยหรือไม่ (true, false)
getAttribute(name) คืนค่า Attribute ที่กำหนด(name)
Properties เช่น
childNodes คืนค่า node ย่อย(ทั้งหมด)
parentNode คืนค่า node แม่ (node ที่อยู่ระดับก่อนหน้า)
firstChild คืนค่า node ย่อย node แรกสุด
lastChild คืนค่า node ย่อย node สุดท้าย
nextSibling คืนค่า node ถัดไปที่อยู่ระดับเดียวกัน
previousSibling คืนค่า node ก่อนหน้าในระดับเดียวกัน
data คืนค่าข้อมูลใน node
ในโค้ด ฟังก์ชั่น parseFeed จะรับเอาข้อมูล XML มาจาก responseXML ครับ แล้วเอามาแยกออกเป็น property ต่างๆ ของ XML แล้วนำมาจัดการแสดงผลต่อไป
var _title = xml.getElementsByTagName('title')[0].firstChild.data; อันนี้จะคืนค่า title ของรายการ แรกสุด(title รายการแรก) ซึ่งเป็นส่วนหัวข้อข่าว สำหรับ title ของเนื้อหาจะเป็นรายการ ตัวเลขตั้งแต่ 1 เป็นต้นไป ('title')[1..รายการสุดท้าย]
สำหรับรายการอื่นๆ ก็เช่นกัน เราจะใช้วิธีจัดการอ่านแบบเดียวกันครับ เช่น link, description, image
var _item = xml.getElementsByTagName('item'); สำหรับรายการนี้ใช้สำหรับอ่านว่า มีรายการข่าว (item) ทั้งหมดกี่รายการ ครับ
การจัดการกับเอกสารที่เป็น XML เราก็จะใช้ Method และ Property ของ DOM ในการจัดการครับเช่น
Method เช่น
getElementsByTagName(name) คืนค่าเป็น element(ทั้งหมด เป็น Array) ที่มีชื่อตามที่กำหนด(name)
hasChildNodes บอกว่ามี Node ย่อยหรือไม่ (true, false)
getAttribute(name) คืนค่า Attribute ที่กำหนด(name)
Properties เช่น
childNodes คืนค่า node ย่อย(ทั้งหมด)
parentNode คืนค่า node แม่ (node ที่อยู่ระดับก่อนหน้า)
firstChild คืนค่า node ย่อย node แรกสุด
lastChild คืนค่า node ย่อย node สุดท้าย
nextSibling คืนค่า node ถัดไปที่อยู่ระดับเดียวกัน
previousSibling คืนค่า node ก่อนหน้าในระดับเดียวกัน
data คืนค่าข้อมูลใน node
function parseFeed(xml, handler) {
//อ่านหัวข้อของเอกสารออกมา
var _title = xml.getElementsByTagName('title')[0].firstChild.data; //<title>
var _link = xml.getElementsByTagName('link')[0].firstChild.data; //<link>
var _description = xml.getElementsByTagName('description')[0].firstChild.data; //<description>
var header="<a href='"+_link+"' target='_blank' title='"+_description+"' class='header'>"+_title+"</a>";
var _logo="";
if(checkForTag(xml.getElementsByTagName('image')[0])) {
var _url=xml.getElementsByTagName('url')[0].firstChild.data; //<url> ในโหนดแรก
_logo= '<img src="'+_url +'"alt="" /><br />';
}
//อ่านรายการของเอกสาร
var _item = xml.getElementsByTagName('item');
var _copy = "<br />";
for(var n=1; n<_item.length; n++) { //อ่านรายการย่อยต่างๆ
//ป้องกันเครื่องหมายพิเศษ สำหรับ description
var pubDate = xml.getElementsByTagName('pubDate')[n].firstChild.data; //<pubDate>
if(checkForTag(xml.getElementsByTagName('image')[0]) & n>0) { //<image> รูปของเนื้อหาข่าว (ถ้ามี)
var _title = xml.getElementsByTagName('title')[n+1].firstChild.data; //<title>
var _link = xml.getElementsByTagName('link')[n+1].firstChild.data; //<link>
} else {
var _title = xml.getElementsByTagName('title')[n].firstChild.data; //<title>
var _link = xml.getElementsByTagName('link')[n].firstChild.data; //<link>
}
if(n>1) {
var previousPubDate=xml.getElementsByTagName('pubDate')[n-1].firstChild.data;
}
if(pubDate!=previousPubDate || previousPubDate==undefined) {
_copy += '<div class="pubdate">'+pubDate+'</div>';
}
_copy += "<a href='"+_link+"' target='_blank' class='newslink'>"+_title+"</a><br />";
}
//แสดงผล
var aggregator=document.getElementById(handler);
aggregator.innerHTML=_logo+header+_copy;
}
function checkForTag(tag) {
if (tag != undefined) return true;
return false;
}
ในโค้ด ฟังก์ชั่น parseFeed จะรับเอาข้อมูล XML มาจาก responseXML ครับ แล้วเอามาแยกออกเป็น property ต่างๆ ของ XML แล้วนำมาจัดการแสดงผลต่อไป
var _title = xml.getElementsByTagName('title')[0].firstChild.data; อันนี้จะคืนค่า title ของรายการ แรกสุด(title รายการแรก) ซึ่งเป็นส่วนหัวข้อข่าว สำหรับ title ของเนื้อหาจะเป็นรายการ ตัวเลขตั้งแต่ 1 เป็นต้นไป ('title')[1..รายการสุดท้าย]
สำหรับรายการอื่นๆ ก็เช่นกัน เราจะใช้วิธีจัดการอ่านแบบเดียวกันครับ เช่น link, description, image
var _item = xml.getElementsByTagName('item'); สำหรับรายการนี้ใช้สำหรับอ่านว่า มีรายการข่าว (item) ทั้งหมดกี่รายการ ครับ