DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Daftar Isi:
AJAX adalah teknik yang memungkinkan kamu untuk memperbarui bagian tertentu dari halaman web tanpa perlu memuat ulang seluruh halaman. Dengan menggunakan AJAX, kamu bisa membuat aplikasi web yang lebih responsif dan interaktif. Berikut adalah beberapa hal yang perlu kamu ketahui tentang AJAX pada JavaScript.
AJAX adalah singkatan dari Asynchronous JavaScript and XML. Meskipun begitu, kamu tidak selalu harus menggunakan XML, karena kamu bisa bekerja dengan format data lain seperti JSON, HTML, atau teks biasa.
Berikut adalah langkah-langkah dasar untuk menggunakan AJAX dengan JavaScript:
var xhr = new XMLHttpRequest();
xhr.open("GET", "data.json", true);
Parameter:
GET
: Metode permintaan HTTP."data.json"
: URL yang ingin kamu minta.true
: Mengatur permintaan menjadi asinkron.xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = JSON.parse(xhr.responseText);
console.log(data);
}
};
xhr.readyState
: Status permintaan. 4
berarti permintaan selesai dan 200
berarti berhasil.xhr.responseText
: Respon dari server.Berikut ini adalah contoh sederhana untuk memuat data dari file data.json
dan menampilkannya di halaman web:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh AJAX</title>
</head>
<body>
<div id="content"></div>
<button onclick="loadData()">Muat Data</button>
<script>
function loadData() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "data.json", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = JSON.parse(xhr.responseText);
document.getElementById("content").innerHTML = data.message;
}
};
xhr.send();
}
</script>
</body>
</html>
Pada contoh di atas, ketika kamu menekan tombol “Muat Data”, data dari data.json
akan dimuat dan ditampilkan di div dengan id content
.
AJAX pada JavaScript adalah alat yang sangat powerful untuk membuat aplikasi web lebih dinamis dan interaktif. Dengan memahami dasar-dasarnya, kamu bisa mulai menciptakan pengalaman pengguna yang mulus dan responsif.
Sekarang, saatnya kamu mencoba menggunakan AJAX pada proyek web-mu sendiri!