การดึง attribute และค่าต่างๆ จาก xml ไฟล์ด้วย jQuery อย่างง่าย

การใช้งาน xml ไฟล์ด้วย ajax ใน jQuery สามารถทำได้ง่าย ใช้ได้ทั้ง ฟังก์ชัน $.ajax() $.get()
และ $.post()
โดยส่วนใหญ่การใช้งาน xml ไฟล์ จะเป็นได้
ทั้งการดึงข้อมูลทั้งหมดมาแสดง
การดึงข้อมูลบางส่วน มาแสดงแบบมีเงื่อนไข
การดึงค่า attribute มาแสดง

ตัวอย่างไฟล์ simple_2.xml
 

<?xml version="1.0" encoding="utf-8"?>
<markers>
  <marker id="1">
    <name>กรุงเทพมหานคร</name>
    <latitude>13.7234186</latitude>
    <longitude>100.4762319</longitude>
  </marker>
  <marker id="2">
    <name>กระบี่</name>
    <latitude>8.1191811</latitude>
    <longitude>99.1013498</longitude>
  </marker>
  <marker id="3">
    <name>กาญจนบุรี</name>
    <latitude>14.6701192</latitude>
    <longitude>99.0128926</longitude>
  </marker>
</markers>

Load XML Data From file simple_2.xml

ตัวอย่างโค้ด กรณีการดึงข้อมูลใน simple_2.xml ทั้งหมด มาแสดง

<button id="act1">Load XML Data From file simple_2.xml </button>
<div id="showXML"></div>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#act1").click(function(){

//  การ load xml ไฟล์ ด้วย ajax ใน jQuery ด้วย $.get()			
//		$.get("simple_2.xml",function(xml){		
//			var dataResult='';
//			$(xml).find("marker").each(function(){
//				dataResult+=$(this).attr("id")+"<br>"; // การดึงค่า attribute ชือ id
//				dataResult+=$(this).find("name").text()+"<br>";
//				dataResult+=$(this).find("latitude").text()+"<br>";
//				dataResult+=$(this).find("longitude").text()+"<hr>";
//			});	
//			$("#showXML").html(dataResult);		
//		});	
	
//  การ load xml ไฟล์ ด้วย ajax ใน jQuery ด้วย $.post() 	
//		$.post("simple_2.xml",function(xml){		
//			var dataResult='';
//			$(xml).find("marker").each(function(){
//				dataResult+=$(this).attr("id")+"<br>"; // การดึงค่า attribute ชือ id
//				dataResult+=$(this).find("name").text()+"<br>";
//				dataResult+=$(this).find("latitude").text()+"<br>";
//				dataResult+=$(this).find("longitude").text()+"<hr>";
//			});	
//			$("#showXML").html(dataResult);		
//		});	

//  การ load xml ไฟล์ ด้วย ajax ใน jQuery ด้วย $.ajax()
		$.ajax({
			url:"simple_2.xml",
			dataType:"xml",
			cache:false, // กำหนดให้ cache ข้อมูลที่โหลดมา หรือไม่
			async:false,
			success:function(xml){		
				var dataResult='';
				$(xml).find("marker").each(function(){
					dataResult+=$(this).attr("id")+"<br>"; // การดึงค่า attribute ชือ id
					dataResult+=$(this).find("name").text()+"<br>";
					dataResult+=$(this).find("latitude").text()+"<br>";
					dataResult+=$(this).find("longitude").text()+"<hr>";
				});	
//				dataResult=$(xml).find("marker:eq(0)").find("name").text(); // การดึงเฉพาะค่า หรือค่าเดียว
				$("#showXML").html(dataResult);	
			}
		});	
		
				
	});
	// jQuery code
});
</script>