Cơ bản về làm việc với fetch trong AJAX

Bây giờ hãy xem cách tải một phần trang bằng AJAX. Giả sử trên trang index.html của chúng ta có một div và một nút bấm (đây là nội dung của body):

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

Giả sử chúng ta cũng có trang ajax.html, trên đó có ba đoạn văn (không có thẻ trang, chỉ đơn thuần là các đoạn văn):

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

Hãy làm sao để khi nhấp vào nút bấm trên trang index.html, nội dung của trang ajax.html được tải vào div.

Để làm điều này, trước tiên hãy lấy tham chiếu đến các phần tử của chúng ta vào các biến:

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

Hãy gắn một trình xử lý sự kiện nhấp chuột vào nút bấm:

button.addEventListener('click', function() {
	// ở đây chúng ta sẽ thực hiện yêu cầu AJAX
});

Bây giờ hãy thực hiện một yêu cầu AJAX. Để làm điều này, chúng ta sử dụng hàm fetch, nhận địa chỉ trang làm tham số, nội dung của nó chúng ta muốn lấy. Hãy chỉ định địa chỉ trang ajax.html trên máy chủ của chúng ta:

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

fetch sẽ trả về một promise. Vấn đề là yêu cầu trang qua AJAX là một thao tác không đồng bộ, vì sẽ mất một khoảng thời gian, sau đó trang sẽ phản hồi lại chúng ta.

Hãy lấy kết quả của promise:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// phản hồi của máy chủ nằm trong biến response
	});
});

Hãy đơn giản hóa, loại bỏ biến thừa:

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

Hãy đơn giản hóa, sử dụng hàm mũi tên:

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

Trình bày theo cách dễ đọc hơn:

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

Biến response chứa một đối tượng khá phức tạp thuộc lớp Response:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		console.log(response); // đối tượng lớp Response
	});
});

Chúng ta sẽ nghiên cứu sâu đối tượng này trong các bài học tiếp theo, còn bây giờ chúng ta cần điều đơn giản nhất - lấy văn bản của trang đã yêu cầu. Để làm điều này, trong đối tượng này có một phương thức text. Tuy nhiên, phương thức này không trả về văn bản của trang, mà là một promise chứa văn bản của nó:

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

Để lấy được văn bản của trang, cần xử lý promise thu được từ response.text một lần nữa:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			console.log(text); // văn bản của trang
		}
	);
});

Vậy là cuối cùng chúng ta đã nhận được văn bản của trang đã yêu cầu và có thể, ví dụ, ghi nó vào div của chúng ta:

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

Có ba nút bấm và một div. Trên máy chủ có ba trang. Hãy làm sao để mỗi nút bấm tải trang tương ứng vào div.

Giả sử trên máy chủ có năm trang. Giả sử lần nhấn đầu tiên vào nút bấm tải trang đầu tiên, lần nhấn thứ hai - trang thứ hai, và cứ thế cho đến khi hết trang.