Membuat objek XMLHttpRequest

Objek XMLHttpRequest (XHR) adalah objek yang digunakan dalam pengembangan web untuk mengirim permintaan ke server dan menerima respons dari server secara asinkron. Dengan menggunakan XHR, kita dapat mengimplementasikan teknik AJAX (Asynchronous JavaScript and XML) untuk memperbarui bagian-bagian tertentu dari halaman web tanpa harus memuat ulang seluruh halaman.

Berikut adalah langkah-langkah untuk membuat objek XMLHttpRequest:

1. Inisialisasi objek XMLHttpRequest:
   Untuk membuat objek XMLHttpRequest, kita perlu menggunakan konstruktor XMLHttpRequest() yang disediakan oleh browser. Berikut adalah contoh kode untuk inisialisasi objek XMLHttpRequest:

   var xhr = new XMLHttpRequest();

Dalam contoh di atas, kita membuat variabel xhr yang akan digunakan untuk merujuk pada objek XMLHttpRequest yang baru dibuat.

2. Menyiapkan permintaan:
   Setelah objek XMLHttpRequest dibuat, kita perlu menyiapkan permintaan yang akan dikirim ke server. Ini melibatkan pengaturan metode HTTP, URL tujuan, dan apakah permintaan akan dilakukan secara asinkron atau tidak. Berikut adalah contoh kode untuk menyiapkan permintaan GET:

   xhr.open('GET', 'data.json', true);

Dalam contoh di atas, kita menggunakan metode open() untuk mengatur permintaan GET ke file “data.json”. Parameter kedua adalah URL tujuan, dan parameter ketiga adalah nilai boolean true yang menandakan bahwa permintaan akan dilakukan secara asinkron.

3. Mengirim permintaan:
   Setelah permintaan disiapkan, kita dapat mengirimkannya ke server menggunakan metode send(). Berikut adalah contoh kode untuk mengirim permintaan:

   xhr.send();

Dalam contoh di atas, kita menggunakan metode send() tanpa parameter karena ini adalah permintaan GET sederhana tanpa data tambahan yang dikirimkan ke server.

4. Menangani respons dari server:
   Setelah permintaan dikirim ke server, kita perlu menangani respons yang diterima. Untuk melakukan itu, kita menggunakan properti onreadystatechange dari objek XMLHttpRequest untuk menetapkan fungsi yang akan dieksekusi ketika status permintaan berubah. Berikut adalah contoh kode untuk menangani respons:

   xhr.onreadystatechange = function() {
     if (xhr.readyState === 4 && xhr.status === 200) {
       // Respons yang valid diterima
       var response = xhr.responseText;
       // Lakukan sesuatu dengan respons, misalnya memperbarui halaman web
     }
   };

Dalam contoh di atas, kita menggunakan properti onreadystatechange untuk menetapkan fungsi yang akan dieksekusi ketika status permintaan berubah. Kondisi xhr.readyState === 4 menunjukkan bahwa respons telah diterima dengan sempurna, sedangkan xhr.status === 200 menunjukkan bahwa permintaan berhasil.

Di dalam fungsi yang ditetapkan, kita dapat melakukan manipulasi data atau memperbarui elemen halaman web menggunakan respons yang diterima.

Dengan langkah-langkah di atas, kita dapat membuat dan menggunakan objek XMLHttpRequest untuk mengirim permintaan ke server dan menerima responsnya secara asinkron. Objek XMLHttpRequest memainkan peran sentral dalam implementasi teknik AJAX dan memungkinkan pengembang web untuk membuat aplikasi yang responsif dan interaktif.