Contoh JavaScript Penggunaan AJAX
AJAX adalah singkatan dari Asynchronous JavaScript and XML. Teknologi ini memungkinkan aplikasi web untuk mengirim dan menerima data dari server tanpa harus memuat ulang halaman web. Dengan menggunakan AJAX, aplikasi web menjadi lebih responsif dan interaktif.
Berikut adalah contoh penggunaan AJAX dalam JavaScript:
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
let response = xhr.responseText;
console.log(response);
}
};
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
xhr.send();
Pada contoh di atas, kita menggunakan objek XMLHttpRequest untuk melakukan permintaan ke server dengan metode GET. Jika permintaan berhasil, maka akan menerima respons dari server berupa data JSON yang diambil dari https://jsonplaceholder.typicode.com/posts/1.
Setelah menerima respons, data tersebut dapat kita manipulasi dan gunakan pada halaman web secara dinamis. Misalnya, kita dapat menampilkan data tersebut pada elemen HTML dengan menggunakan jQuery sebagai berikut:
$.getJSON('https://jsonplaceholder.typicode.com/posts/1', function(data) {
$('h1').text(data.title);
$('p').text(data.body);
});
Dalam contoh di atas, kita menggunakan metode $.getJSON dari jQuery untuk melakukan permintaan ke server dengan metode GET dan menerima respons dalam format JSON. Kemudian, kita mengubah isi dari elemen <h1> dan <p> pada halaman web dengan data yang diterima dari server.
Dengan menggunakan AJAX, aplikasi web menjadi lebih dinamis dan responsif. Hal ini dapat meningkatkan pengalaman pengguna dan juga meningkatkan SEO pada website Anda. Namun, perlu diingat bahwa penggunaan AJAX harus dilakukan dengan hati-hati dan memperhatikan SEO, seperti menghindari penggunaan konten yang tidak dapat diindeks oleh mesin pencari.
