การทำ AJAX auto refresh ด้วยคำสั่ง setInterval

การทำ AJAX auto refresh ด้วยคำสั่ง setInterval บทความนี้สอนการเขียน auto refresh หรือการโหลดข้อมูลใหม่อัตโนมัติ โดยใช้ jQuery การสื่อสารแบบ AJAX ด้วยคำสั่ง setInterval สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง การทำ AJAX auto refresh ด้วยคำสั่ง setInterval

<div id="result"></div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    function autoRefresh() {
        $.ajax({
            type: "GET",
            url: "auto-refresh.php",
            success: function( data ) {
                $("#result").append( data );
            }
        });        
    }
    autoRefresh();
    setInterval(() => {
        autoRefresh();
    }, 5000);
</script>

<?php
    // ไฟล์ auto-refresh.php
    echo "<div>auto refresh ที่เวลา ".date("H:i:s")."</div>";
?>

ผลลัพธ์

auto refresh ที่เวลา 05:55:11
auto refresh ที่เวลา 05:55:16
auto refresh ที่เวลา 05:55:21
auto refresh ที่เวลา 05:55:26
auto refresh ที่เวลา 05:55:31

การทำ AJAX auto refresh แนะนำให้ใช้คำสั่ง setInterval คลุมฟังก์ชัน AJAX ที่ต้องการจากตัวอย่าง กำหนดให้ auto refresh ฟังก์ชัน autoRefresh ทุก 5 วินาที หรือ 5000 มิลลิวินาที พร้อมแสดงเวลาบนหน้าเว็บไซต์