Contoh Dasar Ajax Menggunakan XMLHttpRequest: Panduan Lengkap untuk Pemula
Jika Anda sedang mengembangkan aplikasi web, Anda mungkin pernah mendengar tentang Ajax (Asynchronous JavaScript and XML). Ajax adalah teknik yang memungkinkan halaman web untuk memperbarui kontennya secara asinkron dengan server tanpa harus memuat ulang seluruh halaman. Salah satu cara untuk mengimplementasikan Ajax adalah dengan menggunakan XMLHttpRequest. Dalam artikel ini, kita akan membahas cara menggunakan XMLHttpRequest untuk melakukan permintaan Ajax dasar.
Apa Itu XMLHttpRequest?
XMLHttpRequest adalah objek JavaScript yang digunakan untuk membuat permintaan HTTP ke server dan menerima respons tanpa me-reload halaman. Dengan XMLHttpRequest, Anda dapat melakukan komunikasi antara aplikasi web dan server secara asinkron, sehingga halaman dapat memperbarui dirinya tanpa mengganggu pengalaman pengguna.
XMLHttpRequest mendukung beberapa jenis permintaan HTTP seperti GET, POST, PUT, dan DELETE, yang membuatnya sangat berguna untuk aplikasi web dinamis.
Cara Kerja Ajax Menggunakan XMLHttpRequest
Berikut adalah langkah-langkah dasar dalam menggunakan XMLHttpRequest untuk melakukan permintaan Ajax:
- Membuat Instance XMLHttpRequest: Pertama, Anda perlu membuat objek XMLHttpRequest di dalam kode JavaScript Anda.
- Membuka Koneksi: Setelah objek dibuat, Anda akan membuka koneksi dengan menggunakan metode
.open(), yang menentukan jenis permintaan (GET, POST, dll.) dan URL yang ingin Anda akses. - Mengirim Permintaan: Anda mengirimkan permintaan dengan menggunakan metode
.send(). Jika Anda menggunakan metode POST, Anda dapat menyertakan data dalam permintaan. - Menangani Respons: Setelah server merespons permintaan, Anda bisa menangani respons tersebut dengan menggunakan event
onreadystatechangeatau dengan memeriksa status respons.
Contoh Dasar Ajax dengan XMLHttpRequest
Berikut adalah contoh dasar menggunakan XMLHttpRequest untuk mengambil data dari server menggunakan metode GET:
htmlSalin kode<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Dasar Ajax dengan XMLHttpRequest</title>
</head>
<body>
<h1>Data Pengguna</h1>
<button onclick="getData()">Ambil Data Pengguna</button>
<div id="userData"></div>
<script>
function getData() {
// Membuat instance XMLHttpRequest
var xhttp = new XMLHttpRequest();
// Menentukan metode HTTP dan URL untuk permintaan
xhttp.open("GET", "https://jsonplaceholder.typicode.com/users", true);
// Menentukan fungsi yang akan dijalankan saat status permintaan berubah
xhttp.onreadystatechange = function() {
// Jika permintaan selesai dan respons diterima dengan status OK (200)
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(this.responseText); // Mengonversi data JSON
var output = "<ul>";
// Menampilkan data pengguna dalam format list
for (var i = 0; i < response.length; i++) {
output += "<li>" + response[i].name + " - " + response[i].email + "</li>";
}
output += "</ul>";
// Menampilkan data di halaman web
document.getElementById("userData").innerHTML = output;
}
};
// Mengirim permintaan ke server
xhttp.send();
}
</script>
</body>
</html>
Penjelasan Kode:
- Membuat XMLHttpRequest:javascriptSalin kode
var xhttp = new XMLHttpRequest();Di sini kita membuat instance baru dari objekXMLHttpRequest. - Membuka Koneksi:javascriptSalin kode
xhttp.open("GET", "https://jsonplaceholder.typicode.com/users", true);Metode.open()digunakan untuk membuka koneksi dengan server menggunakan metode HTTP GET dan URL tujuanhttps://jsonplaceholder.typicode.com/users, yang mengembalikan data pengguna. - Menangani Respons:javascriptSalin kode
xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var response = JSON.parse(this.responseText); // ... } };onreadystatechangeadalah event yang dipanggil setiap kali status permintaan berubah. JikareadyStatemencapai 4 (permintaan selesai) danstatusadalah 200 (OK), maka kita akan mengonversi data JSON dan menampilkannya di halaman. - Mengirim Permintaan:javascriptSalin kode
xhttp.send();Permintaan dikirimkan ke server setelah objekXMLHttpRequestdikonfigurasi.
Menggunakan POST dengan XMLHttpRequest
Jika Anda ingin mengirimkan data ke server menggunakan metode POST, berikut adalah contoh penggunaannya:
javascriptSalin kodevar xhttp = new XMLHttpRequest();
xhttp.open("POST", "https://jsonplaceholder.typicode.com/posts", true);
xhttp.setRequestHeader("Content-type", "application/json;charset=UTF-8");
var data = JSON.stringify({
title: "foo",
body: "bar",
userId: 1
});
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 201) {
console.log("Data berhasil dikirim");
}
};
xhttp.send(data);
Di sini, kita mengirimkan data JSON ke server dengan menggunakan metode POST. Metode .setRequestHeader() digunakan untuk memberi tahu server bahwa data yang dikirimkan berformat JSON.
Keuntungan Menggunakan XMLHttpRequest untuk Ajax
- Asinkron: Ajax dengan XMLHttpRequest memungkinkan aplikasi untuk mengambil data tanpa memuat ulang halaman, yang memberikan pengalaman pengguna yang lebih baik.
- Efisiensi: Anda dapat melakukan permintaan ke server hanya untuk data yang dibutuhkan, mengurangi penggunaan bandwidth dan meningkatkan kecepatan aplikasi.
- Fleksibel: XMLHttpRequest memungkinkan penggunaan berbagai jenis permintaan HTTP, seperti GET dan POST, untuk berbagai keperluan aplikasi.
Kesimpulan
XMLHttpRequest adalah alat dasar yang sangat berguna dalam pengembangan web modern untuk mengimplementasikan Ajax. Dengan menggunakan objek ini, Anda dapat membuat aplikasi web yang lebih dinamis dan responsif. Meskipun ada pustaka dan framework JavaScript modern yang memudahkan penggunaan Ajax (seperti fetch atau Axios), memahami cara kerja dasar dengan XMLHttpRequest tetap penting, terutama bagi pemula yang ingin belajar lebih dalam tentang JavaScript dan komunikasi asinkron.