แนวทาง การดึงข้อมูล แบบ real time ด้วย ajax ใน jQuery

เว็บที่มีการเปลี่ยนแปลงแบบ real time ที่ไม่ต้องโหลดหน้าจอใหม่ ปกติจะใช้ ajax การทำให้ข้อมูลมีการเปลี่ยนแปลง ตลอดเวลา จำป็นต้องใช้เวลาเป็นตัวกำหนด หรือคือการกำหนดให้ มีการดึงข้อมูลใหม่ มาแสดงด้วย ajax ตามเวลาที่กำหนด

ตัวอย่างต่อไปนี้เป็นแนวทาง การใช้งาน เป็นการดึงข้อมูลด้วย ajax โดยเอาวันที่ และเวลา มาแสดง โนที่ที่ต้องการแสดงทุก 3 วินาที

1.สร้าง html tag กำหนด พื้นที่ หรือส่วนที่ต้องการแสดงผล

<div id="showData"></div>

2.สร้างไฟล์ สำหรับหาวันที่ และเวลา มาแสดง ชื่อ gdata.php

<?php   
header("Content-type:text/html; charset=UTF-8");        
header("Cache-Control: no-store, no-cache, must-revalidate");       
header("Cache-Control: post-check=0, pre-check=0", false);       
if($_GET['rev']==1){
	echo date("Y-m-d H:i:s");
	exit;
}
?>

3.สร้าง ajax สคริปสำหรับเรียกใช้งาน

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
	setInterval(function(){ // เขียนฟังก์ชัน javascript ให้ทำงานทุก ๆ 30 วินาที
		// 1 วินาที่ เท่า 1000
		// คำสั่งที่ต้องการให้ทำงาน ทุก ๆ 3 วินาที
		var getData=$.ajax({ // ใช้ ajax ด้วย jQuery ดึงข้อมูลจากฐานข้อมูล
				url:"gdata.php",
				data:"rev=1",
				async:false,
				success:function(getData){
					$("div#showData").html(getData); // ส่วนที่ 3 นำข้อมูลมาแสดง
				}
		}).responseText;
	},3000);	
});
</script>

ตัวอย่าง

การดึงข้อมูล แบบ real time ด้วย ajax