Reading XML with jQuery ajax

Reading XML with jQuery

สิ่งแรกที่ต้องทำคือ การนำเอาไฟล์ jquery มาใช้ใน page ที่เราต้องการ

<script src="jquery.js" type="text/javascript"></script>

ต่อมาก็ตรวจสอบ ไฟล์ xml ที่ต้องการเอามาอ่านว่ามีอยู่จริงและใช้ได้จริง และไฟล์ xml นั้นไม่มี error ใดใด

หลังจากนั้น หากต้องการให้คำสั่ง jquery ทำงาน เราจะต้องบอก jquery ให้เริ่มทำงานก่อนเมื่อโหลดหน้าเอกสารเข้ามาโดยใช้ฟังชั่น document.ready

$(document).ready(function(){

});

ข้างในของฟังชั่น document.ready เราจะต้องใช้คำสั่ง ajax ใน jquery ในการอ่านไฟล์ xml โดยที่คำสั่ง ajax นี้จะต้องรับ parameters 4 ตัว คือ ชนิดของไฟล์(file type), URL, ชนิดของข้อมูล(dataType)  และผลลัพธ์(success) โดยสิ่งที่สำคัญคือ ผลลัพธ์นี่แหละครับ คือเป็นส่วนที่เราจะอ่านของมูลอะไรออกมาจาก xml และจะเอาข้อมูลนั้นๆไปไว้ที่ส่วนไหนของเอกสารหรือ หน้า page ของเรานั่นเอง 

$.ajax({
        type: "GET",
url: "sites.xml",
dataType: "xml",
success: function(xml) {

}
});

ตอนนี้เราก็สามารถอ่านไฟล์ xml ได้แล้วนะครับ และต่อไปคือเราต้องการอ่านข้อมูลในไฟล์ xml นั้น เราจะต้องทราบชื่อของโหนด โดยใช้คำสั่ง find โดยในตัวอย่างเราใช้ชื่อโหนดว่า "site" และต่อไปก็ใช้ฟังชั่น each เพื่อไปวนลูปและดึงข้อมูลในโหนดนี้ 

$(xml).find('site').each(function(){

});

และนี่คือการดึงข้อมูลที่อยู่ข้างในโหนด "site" อีกทีหนึ่งซึ่งถ้าในโหนดนั้นมี attribute ก็ใช้ฟังชั่น attr แต่ถ้าเป็นโหนดที่อยู่ข้างในก็ใช้ฟังชั่น find และหากต้องการดึงข้อมูลที่อยู่ในโหนดนั้นก็ใช้ฟังชั่น text ต่อไปเลย

var id = $(this).attr('id');
var title = $(this).find('title').text();
var url = $(this).find('url').text();
$('<div class="items" id="link_'+id+'"></div>').html('<a href="'+url+'">'+title+'</a>').appendTo('#page-wrap');

และนี่คือโค้ดโดยรวมที่เราต้องเขียนครับ จะออกมาเป็นลักษณะแบบนี้

$(document).ready(function(){
$.ajax({
type: "GET",
url: "sites.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('site').each(function(){
var id = $(this).attr('id');
var title = $(this).find('title').text();
var url = $(this).find('url').text();
$('<div class="items" id="link_'+id+'"></div>').html('<a href="'+url+'">'+title+'</a>').appendTo('#page-wrap');
$(this).find('desc').each(function(){
var brief = $(this).find('brief').text();
var long = $(this).find('long').text();
$('<div class="brief"></div>').html(brief).appendTo('#link_'+id);
$('<div class="long"></div>').html(long).appendTo('#link_'+id);
});
});
}
});
});

ref:http://think2loud.com/reading-xml-with-jquery/