Pengiriman data dengan post XMLHttpRequest

Dalam dunia pengembangan web modern, pertukaran data asinkron antara klien dan server adalah aspek penting dalam membangun aplikasi yang dinamis dan responsif. Salah satu alat fundamental yang memungkinkan fungsionalitas ini adalah objek XMLHttpRequest, khususnya metode POST-nya. Meskipun API XMLHttpRequest mungkin tampak ketinggalan zaman di era API yang lebih modern seperti Fetch dan Axios, memahami prinsip-prinsip intinya masih penting bagi setiap pengembang JavaScript.

Metode XMLHttpRequest POST memungkinkan Anda mengirim data secara asinkron ke server tanpa me-refresh seluruh halaman web. Pendekatan ini meningkatkan pengalaman pengguna dengan menyediakan alur informasi yang lebih lancar dan efisien, yang pada akhirnya menghasilkan kinerja aplikasi keseluruhan yang lebih baik.

Menyiapkan XMLHttpRequest POST

Sebelum masuk ke kode, mari kita tinjau proses penyiapan dasar untuk permintaan POST XMLHttpRequest:

1. Buat instance objek XMLHttpRequest baru.
2. Tentukan metode permintaan (POST) dan endpoint URL.
3. Siapkan header permintaan, jika perlu.
4. Tentukan fungsi untuk menangani respons server.
5. Kirim permintaan dengan payload data.

// 1. Buat instance XMLHttpRequest baru
const xhr = new XMLHttpRequest();

// 2. Tentukan metode permintaan dan URL
xhr.open('POST', '/api/endpoint', true);

// 3. Atur header permintaan (jika diperlukan)
xhr.setRequestHeader('Content-Type', 'application/json');

// 4. Tentukan penangan respons
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    // Tangani respons server
    console.log(xhr.responseText);
  }
};

// 5. Kirim permintaan dengan payload data
const data = JSON.stringify({ name: 'John Doe', email: 'john@example.com' });
xhr.send(data);

Dalam contoh di atas, kita membuat instance XMLHttpRequest baru, menentukan metode POST dan endpoint URL, mengatur header permintaan yang sesuai, dan menangani respons server dalam penangan peristiwa onreadystatechange. Terakhir, kita mengirim permintaan dengan payload data dalam format JSON menggunakan metode send().

Menangani Respons dan Penanganan Kesalahan

Meskipun mengirim permintaan sangat penting, menangani respons server dengan benar sama pentingnya. Penangan peristiwa onreadystatechange memungkinkan Anda memantau perkembangan permintaan dan mengambil tindakan yang sesuai berdasarkan properti readyState dan status.

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // Respons berhasil
      console.log(xhr.responseText);
    } else {
      // Penanganan kesalahan
      console.error('Permintaan gagal. Status:', xhr.status);
    }
  }
};

Dalam contoh di atas, kita memeriksa readyState untuk memastikan permintaan telah selesai (XMLHttpRequest.DONE), dan kemudian memeriksa properti status untuk menentukan keberhasilan atau kegagalan permintaan. Kode status 200 biasanya menunjukkan respons yang berhasil, sementara kode status lain dapat menunjukkan berbagai kondisi kesalahan.

Mengirim Data Formulir

Meskipun contoh sebelumnya berfokus pada pengiriman data JSON, XMLHttpRequest juga memungkinkan Anda mengirim data formulir dengan lancar. Ini sangat berguna saat bekerja dengan formulir HTML tradisional atau saat berurusan dengan unggahan file.

const formData = new FormData();
formData.append('name', 'John Doe');
formData.append('email', 'john@example.com');
formData.append('file', fileInput.files[0]);

xhr.open('POST', '/api/endpoint', true);
xhr.send(formData);

Dalam contoh ini, kita membuat instance FormData dan menambahkan bidang formulir menggunakan metode append(). Kita bahkan dapat menyertakan unggahan file dengan menambahkan objek File dari elemen <input type="file">. Terakhir, kita mengirim objek FormData secara langsung menggunakan metode send().

Hasilkan kode XMLHttpRequest dengan Apidog

Apidog adalah platform pengembangan API kolaboratif all-in-one yang menyediakan toolkit komprehensif untuk mendesain, men-debug, menguji, menerbitkan, dan mengejek API. Apidog memungkinkan Anda membuat kode XMLHttpRequest secara otomatis untuk membuat permintaan HTTP.

Berikut adalah proses untuk menggunakan Apidog untuk menghasilkan kode XMLHttpRequest:

Langkah 1: Buka Apidog dan pilih permintaan baru

Langkah 2: Masukkan URL endpoint API yang ingin Anda kirimi permintaan, masukkan header atau parameter string kueri apa pun yang ingin Anda sertakan dengan permintaan, lalu klik "Desain" untuk beralih ke antarmuka desain Apidog.

Langkah 3: Pilih "Hasilkan kode klien" untuk menghasilkan kode Anda.

Langkah 4: Salin kode yang dihasilkan dan tempelkan ke proyek Anda.

Menggunakan Apidog untuk Mengirim Permintaan HTTP

Apidog menawarkan beberapa fitur canggih yang semakin meningkatkan kemampuannya untuk menguji permintaan HTTP. Fitur-fitur ini memungkinkan Anda menyesuaikan permintaan dan menangani skenario yang lebih kompleks dengan mudah.

Langkah 1: Buka Apidog dan buat permintaan baru.

Langkah 2: Temukan atau masukkan secara manual detail API untuk permintaan POST yang ingin Anda buat.

Langkah 3: Isi parameter yang diperlukan dan data apa pun yang ingin Anda sertakan dalam badan permintaan.

Kesimpulan

Seperti yang Anda lihat, XMLHttpRequest POST lebih dari sekadar alat teknis – ini adalah pengubah permainan yang membuka dunia kemungkinan bagi pengembang web. Apakah Anda sedang membangun antarmuka pengguna yang dinamis, berintegrasi dengan API yang kuat, atau menciptakan generasi pengalaman web imersif berikutnya, XMLHttpRequest POST adalah senjata rahasia Anda.