การใช้งาน 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>
ตัวอย่างโค้ด กรณีการดึงข้อมูลใน 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>
