AJAX dan Fetch API

Teknik untuk berkomunikasi dengan server secara asinkron tanpa perlu me-refresh halaman.

Konsep AJAX

AJAX (Asynchronous JavaScript and XML) memungkinkan pembaruan sebagian halaman web tanpa reload seluruh halaman.

// Diagram alur AJAX
1. Event terjadi di halaman web (klik tombol, dll)
2. JavaScript membuat XMLHttpRequest object
3. Request dikirim ke server
4. Server memproses request
5. Server mengembalikan response ke browser
6. JavaScript memproses response
7. Halaman diperbarui

XMLHttpRequest

Cara tradisional untuk melakukan AJAX (masih digunakan untuk kompatibilitas):

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);

xhr.onload = function() {
    if (this.status === 200) {
        const response = JSON.parse(this.responseText);
        console.log(response);
    } else {
        console.error('Error:', this.statusText);
    }
};

xhr.onerror = function() {
    console.error('Request error');
};

xhr.send();

Fetch API

API modern yang lebih powerful dan fleksibel:

// GET request sederhana
fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

// POST request dengan options
fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        name: 'John Doe',
        email: 'john@example.com'
    })
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));

Async/Await dengan Fetch

Syntax modern untuk menangani asynchronous code:

async function getData() {
    try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error:', error);
    }
}

getData();

Praktik: Ambil Data dari API Publik

// Contoh menggunakan JSONPlaceholder API
async function fetchPosts() {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        const posts = await response.json();
        
        const container = document.getElementById('posts-container');
        container.innerHTML = posts.slice(0, 5).map(post => `
            <div class="post">
                <h3>${post.title}</h3>
                <p>${post.body}</p>
            </div>
        `).join('');
    } catch (error) {
        document.getElementById('posts-container').innerHTML = `
            <div class="error">Gagal memuat data: ${error.message}</div>
        `;
    }
}

fetchPosts();

Hasil:

Klik tombol "Jalankan Contoh" untuk melihat hasil