Auto Refresh Part Of Html Page

MUAZHAN

4 min read

·

Jul 01, 2024

30

Share

Cara Memperbarui Sebagian Halaman HTML Secara Otomatis

Mungkin kamu pernah mengalami saat kamu ingin bagian tertentu dari halaman web kamu diperbarui secara otomatis tanpa harus me-refresh seluruh halaman. Hal ini mungkin berguna untuk menampilkan informasi yang dinamis, seperti data real-time, informasi cuaca terbaru, atau chat online.

Berikut adalah beberapa cara untuk mencapai auto refresh pada bagian tertentu halaman HTML:

1. Menggunakan JavaScript dan setInterval()

Cara yang paling umum adalah menggunakan fungsi setInterval() dalam JavaScript. Fungsi ini akan menjalankan kode yang kamu berikan dalam interval waktu tertentu.

Berikut contohnya:

  


  
Data Real-time
  


  

Kode ini akan:

• Membuat elemen <div> dengan id data-container untuk menampilkan data.
• Fungsi updateData() akan menghasilkan angka random dan memasukkannya ke dalam elemen data-container.
• setInterval(updateData, 1000) akan memanggil fungsi updateData() setiap 1 detik (1000 milidetik).

2. Menggunakan AJAX

AJAX (Asynchronous JavaScript and XML) memungkinkan kamu untuk meminta data dari server tanpa harus me-reload seluruh halaman.

Berikut contohnya:

  


  
Data Real-time
  


  

Kode ini akan:

• Membuat request ke file data.php (atau file server kamu) dengan AJAX.
• Saat response diterima, isi dari data-container akan diperbarui.
• setInterval(updateData, 1000) akan memanggil fungsi updateData() setiap 1 detik.

3. Menggunakan WebSockets

WebSockets memungkinkan komunikasi real-time antara browser dan server. Ini sangat berguna untuk aplikasi yang membutuhkan pembaruan data yang cepat dan sering.

  


  
Data Real-time
  


  

Kode ini akan:

• Membuka koneksi WebSocket ke server.
• Saat server mengirimkan data, isi dari data-container akan diperbarui.

Pemilihan Metode

• setInterval(): cocok untuk pembaruan data sederhana yang tidak memerlukan komunikasi dengan server.
• AJAX: cocok untuk pembaruan data dari server yang tidak terlalu sering.
• WebSockets: ideal untuk aplikasi real-time yang membutuhkan pembaruan data yang cepat dan sering.

Pastikan untuk memilih metode yang paling cocok untuk kebutuhan aplikasi kamu.