Javascript

Contoh Penggunaan AJAX dengan XMLHttpRequest

AJAX (Asynchronous JavaScript and XML) memungkinkan kita untuk membuat aplikasi web yang responsif dan interaktif dengan memperbarui bagian-bagian tertentu dari halaman web tanpa harus memuat ulang seluruh halaman. Salah satu cara untuk mengimplementasikan AJAX adalah dengan menggunakan objek XMLHttpRequest. Dalam artikel ini, kita akan melihat contoh penggunaan AJAX dengan XMLHttpRequest untuk mengambil data dari server dan memperbarui halaman web.

Contoh berikut menggunakan permintaan GET untuk mengambil data JSON dari server dan memperbarui elemen halaman web dengan data yang diterima.

// Membuat objek XMLHttpRequest
var xhr = new XMLHttpRequest();

// Mengirim permintaan GET ke server
xhr.open('GET', 'data.json', true);
xhr.send();

// Menangani respons dari server
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    // Memperbarui elemen halaman dengan data yang diterima
    document.getElementById('result').innerHTML = data.message;
  }
};

Dalam contoh di atas, kita pertama-tama membuat objek XMLHttpRequest dengan var xhr = new XMLHttpRequest();. Kemudian, kita mengirimkan permintaan GET ke server dengan xhr.open('GET', 'data.json', true); di mana “data.json” adalah URL tujuan dari permintaan. Kemudian, permintaan dikirim menggunakan xhr.send();.

Selanjutnya, kita menangani respons dari server menggunakan properti onreadystatechange. Di dalam fungsi yang ditetapkan, kita memeriksa apakah status permintaan sudah mencapai readyState === 4, yang menunjukkan bahwa respons telah diterima sepenuhnya. Jika juga status === 200, itu berarti permintaan berhasil.

Kemudian, kita menguraikan data JSON yang diterima dengan JSON.parse(xhr.responseText) menjadi objek JavaScript yang dapat kita manfaatkan. Dalam contoh ini, kita memperbarui elemen dengan ID “result” di halaman web dengan document.getElementById('result').innerHTML = data.message;. Di sinilah kita dapat melakukan manipulasi lebih lanjut pada data yang diterima, seperti memperbarui tampilan atau melibatkan logika lainnya.

Dalam contoh ini, data.json adalah contoh file JSON yang berisi objek dengan properti “message”. Namun, Anda dapat menggantinya dengan URL atau endpoint server yang sesuai dengan kebutuhan proyek Anda.

Dengan menggunakan contoh di atas, Anda dapat menggabungkan teknik AJAX dengan XMLHttpRequest untuk membuat aplikasi web yang responsif, mengambil data dari server secara asinkron, dan memperbarui tampilan halaman dengan data yang diterima. Teknik ini membantu meningkatkan pengalaman pengguna dan efisiensi aplikasi web secara keseluruhan.

Related Articles

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Back to top button