Ajax Get Data From Database Javascript

4 min read Jun 22, 2024

Mengambil Data dari Database Menggunakan AJAX dan JavaScript

AJAX (Asynchronous JavaScript and XML) adalah teknik yang memungkinkan halaman web untuk memperbarui kontennya secara dinamis tanpa perlu memuat ulang seluruh halaman. Teknik ini sangat berguna untuk mengambil data dari database tanpa harus melakukan reload halaman.

Langkah-langkah Mengambil Data dari Database Menggunakan AJAX

Mendeklarasikan Fungsi AJAX:

function getData(url) {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.onload = function() {
        if (this.status === 200) {
            // Proses data yang diterima dari server
            const data = JSON.parse(this.responseText);
            // Lakukan sesuatu dengan data, misal menampilkannya di halaman
            console.log(data);
        } else {
            console.error("Error fetching data.");
        }
    };
    xhr.send();
}

Memanggil Fungsi AJAX:

const url = "http://localhost/api/data"; // Ganti dengan URL endpoint API Anda
getData(url);

Memproses Data di Server: Di sisi server, Anda perlu menyediakan API (Application Programming Interface) yang menerima permintaan AJAX dan mengembalikan data dari database. API ini dapat dibuat menggunakan bahasa pemrograman seperti PHP, Python, Node.js, dll.

Contoh Kode PHP:
```
query($sql);
$users = [];
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $users[] = $row;
    }
}
echo json_encode($users);
?>
```

Menampilkan Data di Halaman: Setelah Anda menerima data dari server, Anda dapat memprosesnya dan menampilkannya di halaman web Anda.

Contoh Kode JavaScript:

function getData(url) {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.onload = function() {
        if (this.status === 200) {
            const data = JSON.parse(this.responseText);
            const list = document.getElementById("data-list");
            data.forEach(user => {
                const item = document.createElement("li");
                item.textContent = user.name;
                list.appendChild(item);
            });
        } else {
            console.error("Error fetching data.");
        }
    };
    xhr.send();
}

HTML:

Keuntungan Menggunakan AJAX

Pengalaman Pengguna yang Lebih Baik: AJAX memungkinkan halaman web untuk memperbarui kontennya secara dinamis tanpa perlu memuat ulang seluruh halaman, sehingga memberikan pengalaman pengguna yang lebih baik.
Penggunaan Bandwidth yang Lebih Efisien: AJAX hanya mengirimkan data yang diperlukan, sehingga lebih efisien dalam penggunaan bandwidth dibandingkan dengan memuat ulang seluruh halaman.
Interaksi Real-time: AJAX memungkinkan interaksi real-time dengan server, seperti pembaruan data secara langsung tanpa harus refresh halaman.

Catatan Penting

Pastikan Anda memiliki pengaturan server yang tepat untuk menjalankan API dan database.
Anda perlu mengintegrasikan AJAX dengan framework JavaScript yang Anda gunakan (misalnya React, Angular, Vue).
Pastikan untuk menggunakan teknik security yang tepat untuk melindungi data dan API Anda.

Kesimpulan

AJAX merupakan teknik yang powerful untuk mengambil data dari database secara dinamis. Dengan menggunakan AJAX, Anda dapat membangun halaman web yang responsif, efisien, dan memberikan pengalaman pengguna yang lebih baik.