Ajax Javascript Get Response

MUAZHAN

3 min read

·

Jun 23, 2024

28

Share

Memahami AJAX dan Mendapatkan Respons dengan JavaScript

AJAX (Asynchronous JavaScript and XML) adalah teknik yang memungkinkan halaman web untuk melakukan permintaan ke server tanpa memuat ulang seluruh halaman. Hal ini memungkinkan interaksi web yang lebih dinamis dan responsif. Salah satu manfaat utama AJAX adalah kemampuannya untuk mendapatkan respons dari server tanpa harus refresh halaman.

Bagaimana Cara Mendapatkan Respons AJAX?

Berikut langkah-langkah dasar untuk mendapatkan respons dari server menggunakan AJAX:

1. Buat Objek XMLHttpRequest:

   • Objek XMLHttpRequest adalah objek JavaScript yang memungkinkan kita untuk berkomunikasi dengan server.
   • Gunakan kode berikut untuk membuat objek:

   const xhr = new XMLHttpRequest();
   

2. Tentukan Metode dan URL:

   • Tentukan metode permintaan (misalnya GET, POST) dan URL yang akan diakses.
   • Gunakan metode open() dari objek XMLHttpRequest:

   xhr.open('GET', 'your_url.php', true); // 'true' untuk asynchronous
   

3. Kirim Permintaan:

   • Kirim permintaan ke server menggunakan metode send():

   xhr.send();
   

4. Tangani Respons:

   • Atur event listener untuk onload dari objek XMLHttpRequest untuk menangani respons dari server.
   • Di dalam event handler, Anda dapat mengakses respons server melalui properti responseText atau responseXML dari objek XMLHttpRequest.

   xhr.onload = function() {
     if (xhr.status >= 200 && xhr.status < 300) {
       const response = xhr.responseText; // atau xhr.responseXML
       console.log(response); 
     } else {
       console.error('Error: ' + xhr.status);
     }
   };
   

Contoh Penggunaan

Berikut adalah contoh kode sederhana yang menggunakan AJAX untuk mendapatkan data dari server dan menampilkannya di halaman web:

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

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    const data = JSON.parse(xhr.responseText);

    const output = document.getElementById('output');
    output.innerHTML = '';

    for (const item of data) {
      const li = document.createElement('li');
      li.textContent = item.name + ' - ' + item.description;
      output.appendChild(li);
    }

  } else {
    console.error('Error: ' + xhr.status);
  }
};

xhr.send();

Kode di atas akan mengirimkan permintaan GET ke file data.json dan menampilkan isi file dalam bentuk daftar <li> di elemen HTML dengan ID output.

Kesimpulan

AJAX adalah teknik yang sangat kuat untuk membangun aplikasi web yang responsif dan interaktif. Memahami cara mendapatkan respons dari server menggunakan AJAX adalah kunci untuk memanfaatkan semua manfaat dari teknik ini.