พื้นฐานการทำงานกับ fetch ใน AJAX

ตอนนี้มาดูวิธีโหลดบางส่วนของหน้าด้วย AJAX กัน สมมติว่าบนหน้า index.html ของเรามี div และปุ่ม (นี่คือเนื้อหาของ body):

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

สมมติว่าเรามีหน้า ajax.html ด้วย ซึ่งมีสามย่อหน้า (ไม่มีแท็กหน้า เพียงแค่าย่อหน้า):

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

มาทำให้เมื่อคลิกที่ปุ่ม บนหน้า index.html เนื้อหาของหน้า ajax.html จะถูกโหลดลงใน div

ในการทำเช่นนี้ ก่อนอื่นต้องรับลิงก์ไปยังองค์ประกอบของเรา ลงในตัวแปร:

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

มาติดตั้งตัวจัดการการคลิกบนปุ่ม:

button.addEventListener('click', function() {
	// เราจะดำเนินการร้องขอ AJAX ที่นี่
});

ตอนนี้เรามาดำเนินการร้องขอ AJAX กัน สำหรับสิ่งนี้ใช้ฟังก์ชัน fetch รับพารามิเตอร์เป็นที่อยู่ของหน้าที่เราต้องการรับเนื้อหา ลองระบุที่อยู่ของหน้า ajax.html บนเซิร์ฟเวอร์ของเรา:

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

fetch จะคืนค่า promise เป็นผลลัพธ์ของมัน ความจริงก็คือการร้องขอหน้าผ่าน AJAX - นี่คือการดำเนินการแบบอะซิงโครนัส เพราะมันจะใช้ เวลาบ้างหลังจากนั้นหน้าจะตอบสนองต่อเรา

มารับผลลัพธ์ของ promise:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// คำตอบของเซิร์ฟเวอร์อยู่ในตัวแปร response
	});
});

ทำให้ง่ายขึ้นโดยกำจัดตัวแปรที่ไม่จำเป็น:

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

ทำให้ง่ายขึ้นโดยใช้ฟังก์ชันลูกศร:

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

นำเสนอในรูปแบบที่อ่านง่ายขึ้น:

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

ในตัวแปร response มีอยู่ค่อนข้าง ซับซ้อนเป็นวัตถุของคลาส Response:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		console.log(response); // วัตถุของคลาส Response
	});
});

เราจะศึกษาโครงสร้างลึกของวัตถุนี้ใน บทเรียนต่อไป และตอนนี้เราต้องการสิ่งที่ง่ายที่สุด - รับข้อความของหน้าที่ร้องขอ สำหรับ สิ่งนี้ในวัตถุนี้มีเมธอด text อย่างไรก็ตาม เมธอดนี้ไม่ได้คืนค่าข้อความของหน้า แต่คืนค่า promise พร้อมกับข้อความของมัน:

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

เพื่อให้ได้ข้อความของหน้า จำเป็นต้อง ประมวลผล promise ที่ได้รับจาก response.text อีกครั้ง:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			console.log(text); // ข้อความของหน้า
		}
	);
});

ดังนั้น ในที่สุดเราก็ได้รับข้อความของหน้าที่ร้องขอ และสามารถ ตัวอย่างเช่น เขียนมันลงใน div ของเรา:

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

มีสามปุ่มและ div บนเซิร์ฟเวอร์มีสาม หน้า ทำให้แต่ละปุ่ม โหลดหน้าที่เกี่ยวข้องลงใน div

สมมติว่ามีห้าหน้าบนเซิร์ฟเวอร์ กำหนดให้ การคลิกปุ่มครั้งแรกโหลดหน้าแรก การคลิกครั้งที่สอง - หน้าที่สอง และ ต่อไปเรื่อยๆ จนกว่าหน้าจะหมด