Asas Penggunaan fetch dalam AJAX

Sekarang mari kita lihat bagaimana untuk memuat sebahagian halaman menggunakan AJAX. Katakan pada halaman index.html kita terdapat satu div dan satu butang (di sini ditunjukkan kandungan body):

<div></div>
<button>click me</button>

Katakan kita juga mempunyai halaman ajax.html, yang mengandungi tiga perenggan (tanpa tag halaman, hanya perenggan):

<p>1</p>
<p>2</p>
<p>3</p>

Mari kita buat supaya apabila butang pada halaman index.html diklik, kandungan halaman ajax.html akan dimuatkan ke dalam div.

Untuk melakukan ini, mula-mula dapatkan rujukan kepada elemen-elemen kita ke dalam pembolehubah:

let div    = document.querySelector('div');
let button = document.querySelector('button');

Mari tambahkan pengendali klik pada butang:

button.addEventListener('click', function() {
	// di sini kita akan laksanakan permintaan AJAX
});

Sekarang mari laksanakan permintaan AJAX. Untuk ini, fungsi fetch digunakan, yang menerima parameter alamat halaman yang kandungannya ingin kita dapatkan. Mari tentukan alamat halaman ajax.html pada pelayan kita:

button.addEventListener('click', function() {
	let result = fetch('/ajax.html'); 
});

Hasilnya, fetch akan mengembalikan promise. Hal ini kerana meminta halaman melalui AJAX adalah operasi tak segerak, kerana ia akan mengambil masa tertentu sebelum halaman membalas kita.

Mari dapatkan hasil promise tersebut:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// jawapan pelayan terletak dalam pembolehubah response
	});
});

Mari permudahkan dengan menghilangkan pembolehubah yang tidak diperlukan:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(function(response) {
		
	});
});

Mari permudahkan dengan menggunakan fungsi anak panah:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		
	});
});

Mari bentukkan dalam bentuk yang lebih mudah dibaca:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			
		}
	);
});

Pembolehubah response mengandungi objek kelas Response yang agak kompleks:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		console.log(response); // objek kelas Response
	});
});

Kita akan mengkaji objek ini secara mendalam dalam pelajaran akan datang, buat masa ini kita hanya perlukan yang paling asas - mendapatkan teks halaman yang diminta. Untuk ini, objek ini mempunyai kaedah text. Walau bagaimanapun, kaedah ini tidak mengembalikan teks halaman, tetapi promise dengan teksnya:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			console.log(response.text()); // akan memaparkan Promise
		}
	);
});

Untuk mendapatkan teks halaman, promise yang diperoleh daripada response.text perlu 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 telah mendapat teks halaman yang diminta dan boleh, sebagai contoh, memasukkannya ke dalam div kita:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			div.innerHTML = text;
		}
	);
});

Diberikan tiga butang dan satu div. Terdapat tiga halaman di pelayan. Buat supaya setiap butang memuatkan halaman yang sepadan ke dalam div.

Katakan terdapat lima halaman di pelayan. Katakan klik pertama pada butang memuatkan halaman pertama, klik kedua - halaman kedua, dan seterusnya, sehingga halaman habis.