GORAGOD.com

freelance, web developer, web designer, hosting, domain name

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

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) ทั้งหมดกี่รายการ ครับ
0SHAREFacebookLINE it!
^