Mengirim Permintaan GET dan POST menggunakan XMLHttpRequest

Dalam pengembangan web, kita sering perlu mengirim permintaan HTTP ke server untuk mengambil atau mengirim data. Objek XMLHttpRequest (XHR) adalah alat yang berguna untuk mengirim permintaan tersebut secara asinkron. Dalam artikel ini, kita akan membahas pengiriman permintaan GET dan POST menggunakan objek XMLHttpRequest.

Mengirim Permintaan GET

Permintaan GET digunakan untuk mengambil data dari server. Permintaan ini dikirim melalui URL dan dapat mengandung parameter query untuk mengkustomisasi permintaan. Berikut adalah langkah-langkah untuk mengirim permintaan GET menggunakan objek XMLHttpRequest:

   var xhr = new XMLHttpRequest();
   xhr.open('GET', 'data.json', true);
   xhr.send();

   xhr.onreadystatechange = function() {
     if (xhr.readyState === 4 && xhr.status === 200) {
       var response = xhr.responseText;
       // Lakukan sesuatu dengan respons yang diterima
     }
   };

Dalam contoh di atas, kita membuat objek XMLHttpRequest dan mengatur metode open() dengan metode GET dan URL tujuan “data.json”. Kemudian, permintaan dikirim menggunakan metode send(). Setelah respons diterima, kita menangani respons menggunakan properti onreadystatechange. Pada kondisi xhr.readyState === 4 dan xhr.status === 200, respons yang valid telah diterima dan siap untuk digunakan.

Mengirim Permintaan POST

Permintaan POST digunakan untuk mengirim data ke server. Data ini dikirim dalam tubuh (body) permintaan dan tidak ditampilkan di URL. Berikut adalah langkah-langkah untuk mengirim permintaan POST menggunakan objek XMLHttpRequest:

   var xhr = new XMLHttpRequest();
   xhr.open('POST', 'submit-data', true);
   xhr.setRequestHeader('Content-Type', 'application/json');

   var data = {
     name: 'John Doe',
     email: 'johndoe@example.com'
   };

   xhr.send(JSON.stringify(data));

   xhr.onreadystatechange = function() {
     if (xhr.readyState === 4 && xhr.status === 200) {
       var response = xhr.responseText;
       // Lakukan sesuatu dengan respons yang diterima
     }
   };

Dalam contoh di atas, kita membuat objek XMLHttpRequest dan mengatur metode open() dengan metode POST dan URL tujuan “submit-data”. Kita juga mengatur header permintaan menggunakan metode setRequestHeader() untuk menentukan tipe konten yang dikirimkan (dalam contoh ini, JSON). Data yang ingin dikirim diubah menjadi bentuk JSON menggunakan JSON.stringify() dan dikirim melalui metode send(). Setelah respons diterima, kita menangani respons seperti pada permintaan GET.

Menggunakan objek XMLHttpRequest, kita dapat mengirim permintaan GET dan POST untuk berinteraksi dengan server dan mengambil atau mengirim data. Penting untuk diingat bahwa penggunaan objek XMLHttpRequest secara langsung lebih umum di masa lalu, dan saat ini, teknologi web modern umumnya menggunakan API Fetch atau library seperti Axios untuk mengelola permintaan HTTP secara lebih efisien dan mudah dibaca.

Namun, memahami cara kerja objek XMLHttpRequest tetap penting, terutama ketika kita perlu berurusan dengan kode yang ada atau mempelajari dasar-dasar teknologi web.