การโหลด และ Parse XML ด้วย Javascript และ AJAX
การโหลดและ แสดง XML รวมถึงการเข้าถึง รายการต่างๆของ XML สามารถจัดการได้ด้วย Javascript แบบง่ายๆ ครับ ซึ่งหลักการจริงๆของมันก็เหมือนกับการเข้าถึง DOM ของ Javascript ตามปกติครับ ซึ่งถ้าเคยใช้ฟังก์ชั่นในกลุ่มนี้ การ parse XML ก็ไม่ยากเท่าไร
ในตัวอย่างนี้ ผมใช้ RSS ของเว็บไซต์ผมเป็นตัวอย่างในการอ่านครับ โดยจะเป็นการอ่านหัวข้อของ RSS ออกมาแสดงผล สำหรับการเข้าถึง รายการอื่นๆของ XML ก็สามารถทำได้โดยหลักการเดียวกันครับ
RSS ที่ผมใช้อ่านคือตัวนี้ครับ https://www.goragod.com/menu.rss ซึ่งเป็นเมนูเว็บผมเอง สามารถดูโค้ดของมันได้หากเรียก RSS นี้ด้วย IE6 นะครับ (Browser สมัยใหม่อาจจะแสดง RSS ในรูปแบบข่าว)
ตัวอย่างนี้มีการเรียกใช้ GAJAX ด้วยนะครับ หลักการของมันก็คือ เราจะใช้ GAJAX ในการโหลดไฟล์ XML จาก Server มา ด้วย Ajax ซึ่ง Ajax สามารถส่งค่า object XML ได้โดยผ่านทาง responseXML ครับ หลังจากที่ได้ XML มาแล้ว เราจะมาทำการแยกเอา node ITEM ของ RSS ออกมา แล้วทำการวนลูปอ่านแต่ละ ITEM เพื่อทำการอ่านเอา TITLE ของแต่ละ ITEM มาแสดงผล ซึ่งก็คือหัวข้อแต่ละรายการของ RSS นั่นเอง
โค้ด PHP นี่เป็นการอ่าน XML จาก Server ครับ จะเห็นว่าผมใส่ header ของเอกสารเป็น text/xml นะครับเพื่อบอกให้รู้ว่าเป็นเอกสาร XML สำหรับหน้านี้ เราอาจใช้วิธีการอ่านโดยวิธีอื่นได้นะครับ หรือ เราอาจจะให้ Ajax เรียไปยังไฟล์ XML โดยตรงก็ได้ (บน Server เดียวกัน)
ตัวอย่าง
ในตัวอย่างนี้ ผมใช้ RSS ของเว็บไซต์ผมเป็นตัวอย่างในการอ่านครับ โดยจะเป็นการอ่านหัวข้อของ RSS ออกมาแสดงผล สำหรับการเข้าถึง รายการอื่นๆของ XML ก็สามารถทำได้โดยหลักการเดียวกันครับ
RSS ที่ผมใช้อ่านคือตัวนี้ครับ https://www.goragod.com/menu.rss ซึ่งเป็นเมนูเว็บผมเอง สามารถดูโค้ดของมันได้หากเรียก RSS นี้ด้วย IE6 นะครับ (Browser สมัยใหม่อาจจะแสดง RSS ในรูปแบบข่าว)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="th" lang="th" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>GAJAX - Goragod.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
font-family: Tahoma;
font-size: 12px;
}
</style>
<script type="text/javascript" src="gajax.js"></script>
<script type="text/javascript">
function readXML() {
new GAjax().send('rss.php', null, function(xhr){
/* ข้อมูลส่งกลับ (XML) */
var xml = xhr.responseXML;
/* อ่านโหนด item ทั้งหมดของ XML */
var items = xml.getElementsByTagName('item');
/* body */
var body = document.body;
forEach(items, function(item, index){
/* อ่าน title ของแต่ละ item */
var title = item.getElementsByTagName('title')[0].firstChild.data;
/* สร้าง elemant สำหรับแสดงผล */
var p = document.createElement('p');
body.appendChild(p);
/* สร้างโหนดข้อความ */
var text = document.createTextNode(index + '.' + title);
/* แสดงผล */
p.appendChild(text);
})
});
}
</script>
</head>
<body>
<input type="button" onclick="readXML()" value="อ่าน XML" />
</body>
</html>ตัวอย่างนี้มีการเรียกใช้ GAJAX ด้วยนะครับ หลักการของมันก็คือ เราจะใช้ GAJAX ในการโหลดไฟล์ XML จาก Server มา ด้วย Ajax ซึ่ง Ajax สามารถส่งค่า object XML ได้โดยผ่านทาง responseXML ครับ หลังจากที่ได้ XML มาแล้ว เราจะมาทำการแยกเอา node ITEM ของ RSS ออกมา แล้วทำการวนลูปอ่านแต่ละ ITEM เพื่อทำการอ่านเอา TITLE ของแต่ละ ITEM มาแสดงผล ซึ่งก็คือหัวข้อแต่ละรายการของ RSS นั่นเอง
<?php
header("content-type: text/xml; charset=UTF-8");
echo file_get_contents('https://www.goragod.com/menu.rss');
?>โค้ด PHP นี่เป็นการอ่าน XML จาก Server ครับ จะเห็นว่าผมใส่ header ของเอกสารเป็น text/xml นะครับเพื่อบอกให้รู้ว่าเป็นเอกสาร XML สำหรับหน้านี้ เราอาจใช้วิธีการอ่านโดยวิธีอื่นได้นะครับ หรือ เราอาจจะให้ Ajax เรียไปยังไฟล์ XML โดยตรงก็ได้ (บน Server เดียวกัน)
ตัวอย่าง