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

04 January 2010

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

10 May 10 แก้ปัญหา ปุ่ม back ปุ่ม forward กับการใช้งาน ajax โหลดหน้าเพจ ด้วย jQuery plugin อย่างง่าย อ่าน 3213 25 Sep 08 ตรวจสอบโดเมน Domain ด้วย Ajax อ่าน 3177 04 May 10 ประยุกต์ ใช้งาน php และ ajax ใน jQuery แสดงผลลัพธ์ คล้าย twitter อ่าน 3165 27 Dec 10 การสร้าง ajax dictionary จาก longdo ด้วย jQuery อ่าน 2679

บทความคนเข้าอ่านวันนี้

28 Oct 08 การ hilight form ฟอร์มด้วย javascript อย่างง่าย อ่าน 3531 30 Oct 08 กำหนดเวลารอดำเนินการ ด้วย javascript อย่างง่าย อ่าน 2719 15 Nov 08 สร้าง Drag and Drop วัตถุด้วย jQuery โดยไม่ใช้ plug in อย่างง่าย อ่าน 6879 25 Sep 08 มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 1 อ่าน 6064 25 Sep 08 ปิดหน้า Browser โดยไม่ต้องมีข้อความยืนยัน อ่าน 3649 25 Sep 08 แปลงค่าตัวแปรเป็นตัวแปร Number ด้วยฟังก์ชัน parseInt() และ parseFloat() อ่าน 3191 16 Oct 08 CSS กับการตกแต่งกรอบรูปภาพ อ่าน 10593 25 Sep 08 Javascript กับเทคนิค Mouseover และ Mouseout อ่าน 4810 18 Oct 08 สร้างเมนูแนวนอน ด้วย CSS ไม่ต้องใช้ตารางอย่างง่าย อ่าน 4127 16 Sep 10 เพิ่มความสะดวก การ insert update delete ข้อมูล ของ mysql ด้วย php function อ่าน 7132 31 Mar 09 ดึงข้อมูลจากฐานข้อมูลเป็น excel ด้วย php รองรับภาษาไทย อ่าน 5589 18 Jun 10 การใช้งาน live และ die ใน jQuery 1.4 อ่าน 3035 15 Oct 08 สร้าง box แบบสวยงาม ด้วย CSS อ่าน 7550 13 Oct 08 คำสั่ง SQL WHERE อ่าน 3482 06 Nov 10 แนะนำ jQuery UI Effect แบบ ไม่ต้องใช้งานร่วมกับ event show hide และ toggle อ่าน 2549 30 Nov 10 การนำเสนอ และแสดงข้อมูล ด้วย jQuery Flexigrid Plugin เบื้องต้น อ่าน 4160 04 Oct 08 การติดตั้ง MySQL บน Windows อ่าน 2944 29 Mar 09 ทบทวนการตัดข้อความด้วย PHP อ่าน 3690 05 Nov 08 แสดงป้ายโฆษณา banner แบบสุ่ม random ด้วย ajax อย่างง่าย อ่าน 4305 29 Oct 10 แนะนำ jQuery CountDown plugin สวยๆ สำหรับประยุกต์ใช้งาน อ่าน 2711
จำนวนผู้เยี่ยมชม 777877
คน 2012 © Copyright ninenik.com. All rights reserved.