เว็บที่มีการเปลี่ยนแปลงแบบ real time ที่ไม่ต้องโหลดหน้าจอใหม่ ปกติจะใช้ ajax การทำให้ข้อมูลมีการเปลี่ยนแปลง ตลอดเวลา จำป็นต้องใช้เวลาเป็นตัวกำหนด หรือคือการกำหนดให้ มีการดึงข้อมูลใหม่ มาแสดงด้วย ajax ตามเวลาที่กำหนด
ตัวอย่างต่อไปนี้เป็นแนวทาง การใช้งาน เป็นการดึงข้อมูลด้วย ajax โดยเอาวันที่ และเวลา มาแสดง โนที่ที่ต้องการแสดงทุก 3 วินาที
1.สร้าง html tag กำหนด พื้นที่ หรือส่วนที่ต้องการแสดงผล
1 | <div id="showData"></div> |
2.สร้างไฟล์ สำหรับหาวันที่ และเวลา มาแสดง ชื่อ gdata.php
1 2 3 4 5 6 7 8 9 | <?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 สคริปสำหรับเรียกใช้งาน
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <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> |
ตัวอย่าง
