Pertemuan 9 – Implementasi AJAX

Tujuan Pembelajaran

Mahasiswa diharapkan mampu mengimplementasikan AJAX untuk membuat aplikasi web yang dinamis, di mana bagian halaman dapat diperbarui tanpa reload penuh, menggunakan XMLHttpRequest atau Fetch API.

Pengenalan AJAX

AJAX (Asynchronous JavaScript and XML) adalah teknik untuk update bagian halaman web tanpa reload seluruhnya. Ini buat web terasa seperti app desktop. Meski nama "XML", sekarang sering pakai JSON. AJAX gunakan XMLHttpRequest (lama) atau Fetch (modern) untuk request async ke server.

Keuntungan: Lebih cepat, UX baik, hemat bandwidth. Contoh: Like di Facebook tanpa refresh halaman.

Implementasi AJAX

Langkah: 1. Buat XMLHttpRequest object. 2. Open request (GET/POST, URL). 3. Set callback onload. 4. Send request. Untuk Fetch: fetch(url).then(res => res.json()).then(data => update DOM).

Handle response: Cek status (200 = OK), parse data, update elemen HTML dengan innerHTML.

Contoh Kode Lengkap

// AJAX dengan XMLHttpRequest
function loadData() {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', 'data.json', true); // true = async
    xhr.onload = function() {
        if (xhr.status === 200) {
            let data = JSON.parse(xhr.responseText);
            document.getElementById('content').innerHTML = '<h2>' + data.title + '</h2><p>' + data.message + '</p>';
        } else {
            document.getElementById('content').innerHTML = 'Error loading data';
        }
    };
    xhr.onerror = function() {
        document.getElementById('content').innerHTML = 'Network error';
    };
    xhr.send();
}

// Panggil dengan button: <button onclick="loadData()">Load Data</button>

// AJAX dengan Fetch (lebih modern)
function loadDataFetch() {
    fetch('data.json')
        .then(response => {
            if (!response.ok) {
                throw new Error('HTTP error ' + response.status);
            }
            return response.json();
        })
        .then(data => {
            document.getElementById('content').innerHTML = '<h2>' + data.title + '</h2><p>' + data.message + '</p>';
        })
        .catch(error => {
            document.getElementById('content').innerHTML = 'Error: ' + error.message;
        });
}
                

Penjelasan: Kode load data dari file JSON lokal, update div tanpa reload. XMLHttpRequest tradisional, Fetch lebih clean. Buat file data.json: {"title": "Judul", "message": "Pesan"}.

Tips Praktis

• Gunakan Fetch untuk kode baru, XMLHttpRequest untuk legacy support.
• Tambah loading indicator: Tampilkan "Loading..." sebelum response.
• Test di local server (misal: Live Server VS Code) karena CORS issue di file lokal.
• Untuk POST, tambah body: fetch(url, {method: 'POST', body: JSON.stringify(data)}).

Ringkasan Materi

AJAX buat web dinamis dengan update partial. Ini fondasi app modern seperti Gmail atau Twitter feed.

Latihan dan Diskusi

1. Buat halaman dengan button "Load Quote", AJAX ambil quote dari API (misal: https://api.quotable.io/random), tampilkan di div. 2. Handle error jika network down. 3. Bandingkan XMLHttpRequest vs Fetch. 4. Diskusikan: Kapan pakai AJAX? Jika error, cek console browser.