PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

ดึงไฟล์ xml (rss) ไฟล์แบบ cross domain มาแสดงด้วย ajax ใน jQuery อย่างง่าย

04 January 2010 By


 การดึง ข้อมูลจาก xml ไฟล์มาใช้ในเว็บ จะใช้ข้อมูลประมาณ 3 - 4 ข้อมูล ได้แก่ 

1.หัวข้อ title 
2.ลิ้งค์ที่อยู่ url 
3.รูปภาพประกอบ image
4.วันที่ date
 
แต่ในที่นี่จะแสดงตัวอย่างการดึงข้อมูล 2 ข้อมูลมาแสดง คือ หัวข้อ title และ ลิ้งค์ที่อยู่ url
โดยสามารถทำตามขั้นตอน ได้ดังต่อไปนี้
1.สรัางไฟล์ php เรียก ข้อมูล xml มาแสดง ชื่อ gXML.php
<?php
if(isset($_GET['url'])){
header("Content-type:text/xml; charset=UTF-8");   
header("Cache-Control: no-store, no-cache, must-revalidate");      
header("Cache-Control: post-check=0, pre-check=0", false);  
echo $gXML=file_get_contents($_GET['url']);
exit;
}
?>
2.HTML code ในไฟล์สำหรับ แสดงข้อมูล
<div id="showRSS">
<ul>

</ul>
</div>
3.Javascript Code สำหรับดึงข้อมูล
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
<script type="text/javascript">
$(function(){
	var gXML=$.ajax({
		url: "gXML.php?url=http://www.ninenik.com/rss2.xml",
		async: false, 
		success:function(gXML){ 	
			var NumItem=$(gXML).find("item").length; 
			var titleRSS=null;
			var linkRSS=null;
			for(var i=0;i<NumItem;i++){
				titleRSS=$(gXML).find("item title").eq(i).text();
				linkRSS=$(gXML).find("item link").eq(i).text();
				$("div#showRSS ul").append("<li><a href='"+linkRSS+"' target='_blank'>"+titleRSS+"</a></li>");
			}
		}
	}).responseText;
});
คำอธิบาย
บรรทัดที่ 8 กำหนด url ของ xml ไฟล์ที่ต้องการนำมาแสดง
บรรทัดที่ 11 กำหนดตัวแปรเก็บจำนวนรายการทั้งหมด สามารถกำหนดเป็นตัวเลขที่ต้องการแสดงได้
บรรทัดที่ 12 กำหนดตัวแปรเก็บหัวเรื่อง
บรรทัดที่ 13 กำหนดตัวแปรเก็บ url
บรรทัดที่ 14 วนลูปแสดงรายการใน xml
บรรทัดที่ 15 ดึงข้อมูลหัวข้อจาก xml ไฟล์เก็บในตัวแปร titleRSS
บรรทัดที่ 16 ดึงข้อมูล url สำหรับลิ้งค์ มาเก็บในตัวแปร linkRSS
บรรทัดที่ 17 แสดงข้อมูลใน div
 
ทั้งหมดนี้ สามารถนำไปประยุกต์ใช้ กับ xml ไฟล์ที่ไม่ใช่ rss  ได้
 
หากต้องการปรับแต่งการแสดงผล สามารถกำหนด โดยแทรก css code ตัวไปนี้
 
<style type="text/css">
/* style สำหรับ list รายการ */
div#showRSS ul,div#showRSS ul li{
	
}
/* style สำหรับ list รายการ */
div#showRSS ul li{

}
/* style สำหรับ link */
div#showRSS ul li a{
	font-family:Arial, "times New Roman", tahoma;
	font-size:12px;
	color:#000000;	
	text-decoration:none;
}
/* style สำหรับ link เมื่อเมาส์อยู่เหนือ */
div#showRSS ul li a:hover{
	font-family:Arial, "times New Roman", tahoma;
	font-size:12px;	
	font-weight:bold;
	color:#FF3300;
	background-color:#F5F5F5;
	text-decoration:none;
}
</style>
 ตัวอย่าง คลิก http://www.ninenik.com/demo/jquery_xml.php
 

Tags:: cross domain ajax jquery xml





URL สำหรับอ้างอิง