AJAX에서 fetch 사용의 기본

이제 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를 통한 페이지 요청은 비동기 작업이기 때문입니다. 페이지가 응답하기까지 일정 시간이 걸릴 것입니다.

프로미스의 결과를 받아봅시다:

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 메서드가 있습니다. 그러나 이 메서드는 페이지 텍스트 자체가 아니라, 해당 텍스트를 가진 프로미스를 반환합니다:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			console.log(response.text()); // 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에 해당 페이지를 로드하도록 만드세요.

서버에 다섯 개의 페이지가 있다고 가정합니다. 버튼을 첫 번째 클릭하면 첫 번째 페이지를 로드하고, 두 번째 클릭에는 두 번째 페이지를, 그리고 페이지가 소진될 때까지 계속되도록 만드세요.