Dasar-dasar Bekerja dengan fetch di AJAX
Sekarang mari kita lihat cara memuat sebagian halaman dengan AJAX. Misalnya di halaman kita index.html terdapat div dan tombol (berikut adalah isi dari body):
<div></div>
<button>click me</button>
Misalkan kita juga memiliki halaman ajax.html, yang berisi tiga paragraf (tanpa tag halaman, hanya paragraf):
<p>1</p>
<p>2</p>
<p>3</p>
Mari kita buat agar saat tombol di halaman index.html diklik, isi halaman ajax.html dimuat ke dalam div.
Untuk melakukan ini, pertama-tama dapatkan referensi ke elemen-elemen kita ke dalam variabel:
let div = document.querySelector('div');
let button = document.querySelector('button');
Mari tambahkan event handler klik ke tombol:
button.addEventListener('click', function() {
// di sini kita akan menjalankan permintaan AJAX
});
Sekarang mari kita jalankan permintaan AJAX. Untuk ini digunakan fungsi fetch, yang menerima alamat halaman yang ingin kita dapatkan isinya. Mari tentukan alamat halaman ajax.html di server kita:
button.addEventListener('click', function() {
let result = fetch('/ajax.html');
});
Fungsi fetch akan mengembalikan promise. Masalahnya adalah meminta halaman melalui AJAX adalah operasi asinkron, karena butuh waktu tertentu sebelum halaman merespons kita.
Mari kita dapatkan hasil dari promise:
button.addEventListener('click', function() {
let promise = fetch('/ajax.html');
promise.then(function(response) {
// jawaban server ada di variabel response
});
});
Mari sederhanakan dengan menghilangkan variabel yang tidak perlu:
button.addEventListener('click', function() {
fetch('/ajax.html').then(function(response) {
});
});
Mari sederhanakan dengan menggunakan fungsi panah:
button.addEventListener('click', function() {
fetch('/ajax.html').then(response => {
});
});
Mari kita tuliskan dalam bentuk yang lebih mudah dibaca:
button.addEventListener('click', function() {
fetch('/ajax.html').then(
response => {
}
);
});
Variabel response berisi objek kelas Response yang cukup kompleks:
button.addEventListener('click', function() {
fetch('/ajax.html').then(response => {
console.log(response); // objek kelas Response
});
});
Kita akan mempelajari objek ini lebih dalam di pelajaran berikutnya, tapi untuk sekarang kita hanya perlu hal paling sederhana - mendapatkan teks halaman yang diminta. Untuk ini, ada metode text dalam objek ini. Namun, metode ini tidak mengembalikan teks halaman, melainkan promise dengan teks halaman tersebut:
button.addEventListener('click', function() {
fetch('/ajax.html').then(
response => {
console.log(response.text()); // akan menampilkan Promise
}
);
});
Untuk mendapatkan teks halaman, promise yang didapat dari response.text harus diproses sekali lagi:
button.addEventListener('click', function() {
fetch('/ajax.html').then(
response => {
return response.text();
}
).then(
text => {
console.log(text); // teks halaman
}
);
});
Jadi, akhirnya kita mendapatkan teks halaman yang diminta dan dapat, misalnya, menuliskannya ke div kita:
button.addEventListener('click', function() {
fetch('/ajax.html').then(
response => {
return response.text();
}
).then(
text => {
div.innerHTML = text;
}
);
});
Diberikan tiga tombol dan sebuah div. Di server diberikan tiga halaman. Buatlah agar setiap tombol memuat halaman yang sesuai ke dalam div.
Misalkan ada lima halaman di server. Misalkan klik pertama pada tombol memuat halaman pertama, klik kedua - halaman kedua, dan seterusnya hingga halaman habis.
