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

Bookmark and Share

 การดึง ข้อมูลจาก 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
 



บทความในหมวดที่่น่าสนใจ อื่นๆ AJAX Learning

04 May 10 ประยุกต์ ใช้งาน php และ ajax ใน jQuery แสดงผลลัพธ์ คล้าย twitter อ่าน 1125 06 May 10 สร้าง poll แบบสำรวจ ด้วย ajax ใน jQuery อย่างง่าย อ่าน 1095 10 May 10 แก้ปัญหา ปุ่ม back ปุ่ม forward กับการใช้งาน ajax โหลดหน้าเพจ ด้วย jQuery plugin อย่างง่าย อ่าน 950 31 Jul 10 เทคนิค ประยุกต์ใช้ ajax ใน jQuery ร่วมกับ iframe กับการอัพโหลดรูป อ่าน 13
จำนวนผู้เยี่ยมชม 157925 คน 2010 © Copyright ninenik.com. All rights reserved.