Menangani Respons dari Server menggunakan XMLHttpRequest

Ketika kita mengirim permintaan HTTP menggunakan objek XMLHttpRequest, server akan merespons permintaan tersebut dengan mengirim kembali data atau pesan yang sesuai. Dalam pengembangan web, penting untuk dapat menangani respons dari server dengan benar. Dalam artikel ini, kita akan membahas cara menangani respons dari server menggunakan objek XMLHttpRequest.

Properti onreadystatechange

Properti onreadystatechange adalah properti penting pada objek XMLHttpRequest yang digunakan untuk menetapkan fungsi yang akan dieksekusi saat status permintaan berubah. Berikut adalah contoh penggunaan properti onreadystatechange:

   xhr.onreadystatechange = function() {
     if (xhr.readyState === 4) {
       // Respons diterima dan siap untuk diproses
       if (xhr.status === 200) {
         // Respons berhasil diterima (status HTTP 200)
         var response = xhr.responseText;
         // Lakukan sesuatu dengan respons yang diterima
       } else {
         // Respons tidak berhasil diterima, ada kesalahan (misalnya status HTTP 404)
         // Lakukan penanganan kesalahan yang sesuai
       }
     }
   };

Dalam contoh di atas, ketika status permintaan berubah (kondisi xhr.readyState === 4), kita memeriksa status HTTP pada xhr.status. Jika status adalah 200, itu berarti respons berhasil diterima. Kita dapat mengakses respons menggunakan properti xhr.responseText. Jika status bukan 200 (misalnya 404 untuk “Not Found”), itu berarti ada kesalahan dalam permintaan. Kita dapat melakukan penanganan kesalahan yang sesuai di bagian “else” dari kondisi tersebut.

Properti responseType

Properti responseType pada objek XMLHttpRequest memungkinkan kita untuk menentukan jenis respons yang diharapkan dari server. Nilai properti ini dapat diatur sebagai “text”, “json”, “arraybuffer”, “blob”, atau “document”. Berikut adalah contoh penggunaan properti responseType:

   xhr.responseType = 'json';

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

Dalam contoh di atas, kita mengatur responseType sebagai “json”. Dengan demikian, respons yang diterima akan secara otomatis diuraikan menjadi objek JSON. Kita dapat mengakses respons menggunakan properti xhr.response.

Properti getAllResponseHeaders() dan getResponseHeader()

Properti getAllResponseHeaders() digunakan untuk mengambil semua header dari respons yang diterima dari server. Properti getResponseHeader(headerName) digunakan untuk mengambil nilai dari header tertentu berdasarkan nama header yang diberikan. Berikut adalah contoh penggunaan kedua properti tersebut:

   xhr.onreadystatechange = function() {
     if (xhr.readyState === 4 && xhr.status === 200) {
       var allHeaders = xhr.getAllResponseHeaders();
       var contentType = xhr.getResponseHeader('Content-Type');
       // Lakukan sesuatu dengan header yang diterima
     }
   };

Dalam contoh di atas, getAllResponseHeaders() mengembalikan semua header sebagai sebuah string. Kita juga dapat menggunakan getResponseHeader('Content-Type') untuk mendapatkan nilai dari header “Content-Type”.

Dengan menggunakan properti dan metode yang disediakan oleh objek XMLHttpRequest, kita dapat dengan mudah menangani respons dari server dengan tepat. Kita dapat mengakses data respons, memeriksa status HTTP, mengelola jenis respons, dan memanfaatkan header yang diterima. Hal ini memungkinkan kita untuk memproses dan menggunakan data yang dikirimkan oleh server dengan efektif dalam pengembangan aplikasi web.