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

เขียนเมื่อ 14 ปีก่อน โดย Ninenik Narkdee
jquery ajax xml cross domain

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery ajax xml cross domain

ดูแล้ว 17,260 ครั้ง


 การดึง ข้อมูลจาก 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=https://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>
 ตัวอย่าง คลิก https://www.ninenik.com/demo/jquery_xml.php
 


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











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





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ