AJAX (Asynchronous JavaScript and XML) adalah seni bertukar data dengan server web dan memperbarui bagian tertentu dari halaman web tanpa perlu memuat ulang seluruh halaman.
Kode JavaScript murni membutuhkan objek XMLHttpRequest atau fetch dengan penanganan status respons yang rumit. jQuery merangkum semua proses tersebut ke dalam metode praktis seperti $.get(), $.post(), dan $.ajax() hanya dalam beberapa baris kode.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
body { font-family: sans-serif; padding: 25px; background: #f8fafc; }
.card { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); max-width: 480px; }
button { background: #00758f; color: white; border: none; padding: 10px 18px; border-radius: 6px; cursor: pointer; font-weight: bold; }
.badge { background: #22c55e; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; }
.loading { color: #fca311; font-weight: bold; }
</style>
</head>
<body>
<div class="card">
<h3>Pembaruan Data AJAX Real-Time</h3>
<p>Klik tombol di bawah untuk mengambil data kursus terbaru dari server secara asinkron tanpa refresh!</p>
<button id="btnAmbil">Ambil Data Terbaru</button>
<div id="statusArea" style="margin-top: 15px; min-height: 50px;"></div>
</div>
<script>
$(document).ready(function() {
$('#btnAmbil').click(function() {
$('#statusArea').html('<p class="loading">⏳ Menghubungi server Skillance Academy...</p>');
// Simulasi pemrosesan AJAX 600ms
setTimeout(function() {
$('#statusArea').html(`
<div style="background:#e0f2fe; padding:12px; border-radius:8px; border-left:4px solid #00758f;">
<span class="badge">Status: 200 OK</span>
<h4 style="margin:8px 0 4px 0; color:#0d2e5c;">Skillance Academy Pro v2.4</h4>
<p style="margin:0; font-size:13px; color:#475569;">Data berhasil diambil secara asinkron pada: ` + new Date().toLocaleTimeString() + `</p>
</div>
`);
}, 600);
});
});
</script>
</body>
</html>Klik tombol untuk mengamati bagaimana data baru dimuat tanpa berkedip atau me-reload halaman browser.