Fungsi XMLHttpRequest() pada JavaScript: Mengenal Penggunaannya untuk Pengembangan Web

Sebelum ada fetch(), satu-satunya cara javascript ngobrol sama server tanpa reload halaman adalah lewat objek XMLHttpRequest() - sering disingkat XHR. Ini teknologi tua, muncul pertama kali di Internet Explorer jaman 1999-an sebagai komponen ActiveX, lalu akhirnya distandardisasi semua browser.

Saya sendiri dulu sempat bingung pas baru belajar: kok namanya XML terus isinya malah JSON? Jawabannya simpel, nama itu warisan jaman dulu saat format XML lagi nge-trend. Sekarang isi responsnya bisa apa saja - JSON, HTML, teks polos - dan justru JSON yang paling sering kepakai.

Apa itu XMLHttpRequest()

XMLHttpRequest() adalah objek bawaan browser yang tugasnya mengirim permintaan HTTP ke server dan menerima balasannya secara asynchronous. Kata kuncinya asynchronous: halaman tidak ikut ke-reload, javascript cuma “menitipkan” permintaan lalu lanjut kerja, dan begitu respons datang, fungsi callback kita dipanggil.

Inilah fondasi dari yang disebut AJAX (Asynchronous JavaScript And XML) - istilah jadul untuk teknik update sebagian halaman tanpa refresh penuh. Autocomplete kolom pencarian, notifikasi yang muncul sendiri, tombol like tanpa pindah halaman; semuanya lahir dari teknik ini.

Cara dasar menggunakan XMLHttpRequest()

Alur pakai XHR selalu sama: buat objeknya, atur metode + URL, pasang handler, kirim:

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = xhr.responseText;
    console.log(response);
  }
};
xhr.send();

Bedah satu-satu biar jelas:

1. new XMLHttpRequest() membuat objek permintaannya.
2. open("GET", url, true) mengatur metode HTTP, URL tujuan, dan parameter ketiga true artinya async. Nilainya hampir selalu true, kalau false halaman bakal macet sampai respons datang.
3. onreadystatechange adalah fungsi yang dipanggil setiap status permintaan berubah. Di dalamnya kita cek dua kondisi: readyState === 4 (permintaan selesai total) dan status === 200 (server jawab OK).
4. send() baru benar-benar mengeksekusi permintaannya.

Kenapa harus cek dua-duanya? Karena readyState 4 artinya “selesai”, tapi belum tentu “sukses” - server bisa saja menjawab 404 atau 500. Maka statusnya wajib dicek juga.

Properti penting XMLHttpRequest()

Beberapa properti yang paling sering kepakai:

Tentang nilai readyState, yang praktis perlu dihafal cuma angka 4 alias DONE. Empat angka lainnya jarang banget dipakai di kode nyata, saya pribadi hampir tidak pernah butuh.

Contoh penggunaan umum

Mengambil data JSON dari API

Kasus paling sering: ambil data dari endpoint API lalu tampilkan. Respons responseText masih string, jadi harus di-parse dulu dengan JSON.parse():

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/users/1", true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var user = JSON.parse(xhr.responseText);
    console.log(user.name); // Leanne Graham
  }
};
xhr.send();

Alternatifnya, set xhr.responseType = "json" sebelum send(), maka tinggal baca xhr.response tanpa parse manual.

Mengirim data POST

Untuk mengirim data, taruh payload di dalam send(). Kalau bentuknya JSON, header Content-Type harus di-set duluan:

var xhr = new XMLHttpRequest();
xhr.open("POST", "https://api.example.com/komentar", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 201) {
    console.log("Data berhasil dikirim");
  }
};
xhr.send(JSON.stringify({ nama: "Sigit", komentar: "Halo!" }));

Perhatikan setRequestHeader() dipanggil setelah open() tapi sebelum send() - urutannya nggak boleh kebalik.

Memuat konten HTML dinamis

XHR juga enak untuk menyuntik potongan HTML ke halaman tanpa reload:

var xhr = new XMLHttpRequest();
xhr.open("GET", "/komentar/partial.html", true);
xhr.onload = function () {
  if (xhr.status === 200) {
    document.getElementById("daftar-komentar").innerHTML = xhr.responseText;
  }
};
xhr.send();

Di contoh ini saya ganti onreadystatechange dengan onload, versi singkat yang otomatis dipanggil saat permintaan selesai. Hasilnya identik, cuma lebih ringkas.

XMLHttpRequest vs Fetch API

Jujur saja: kalau mulai proyek baru hari ini, fetch() lebih layak dipilih. Sintaksnya berbasis Promise, jadi bisa dirantai pakai .then() atau ditulis async/await:

fetch("https://api.example.com/data")
  .then((res) => res.json())
  .then((data) => console.log(data));

Bandingkan dengan lima baris XHR di atas - beda jauh kan? Tapi XHR punya beberapa hal yang sampai sekarang fetch tidak punya secara langsung, misalnya progress upload (upload.onprogress) untuk bikin progress bar file yang sedang di-upload. Jadi XHR belum mati, cuma posisinya mundur jadi alat khusus.

Kalau kalian sedang maintain kode lama, kemampuan membaca pola XHR ini wajib hukumnya. Banyak tutorial lama, library jadul, dan codebase perusahaan masih penuh dengan pola readyState === 4.

• Fungsi fetch() pada JavaScript
• Fungsi JSON.parse() pada JavaScript
• Fungsi JSON.stringify() pada JavaScript
• Penjelasan Perbedaan HTTP dan HTTPS

Kesimpulan

XMLHttpRequest() adalah objek bawaan browser untuk komunikasi HTTP asynchronous - cikal bakal AJAX dan alasan web modern bisa update konten tanpa reload. Pola pemakaiannya konsisten: buat objek, open() metode dan URL, pasang handler yang mengecek readyState === 4 && status === 200, lalu send(). Untuk proyek baru fetch()/axios memang lebih nyaman, tapi XHR tetap layak dipelajari karena progress upload-nya belum tergantikan dan kode legacy masih banyak memakainya.