1. AJAX (Asynchronous JavaScript and XML) 개념

Ajax는 JavaScript를 이용해 페이지 새로고침 없이 서버와 비동기 통신하여 화면의 일부만 동적으로 갱신하는 기술이다.

2. 왜 AJAX를 쓰는가?

사용자는 화면의 특정 데이터만 변경되기를 원하지만, 기존 방식에서는 요청 시마다 페이지 전체를 다시 로드해야 하므로 불필요한 자원 낭비와 사용자 경험 저하가 발생한다. Ajax는 이러한 문제를 해결하기 위해 필요한 데이터만 비동기적으로 요청하여 화면의 일부만 갱신 한다.

3. 동적으로 컨텐츠 변경하기 (Ajax 이전 단계)

3-1. onclick 이벤트

사용자의 클릭 이벤트를 통해 동작 수행

3-2 인위적 태그 삽입

변경하고 싶은 부분을 자바스크립트로 타겟팅하기 위해서 인위적으로 태그를 삽입 해야 한다.

3-3 예시 코드

<body>
<h1>WEB</h1>
<ol>
	<li><a onclick="
	document.querySelector('article').innerHTML = '<h2>HTML</h2>HTML is...';
	">HTML</a></li>
	<li><a onclick="
	document.querySelector('article').innerHTML = '<h2>CSS</h2>CSS is...';
	">CSS</a></li>
	<li><a onclick="
	document.querySelector('article').innerHTML = '<h2>JS</h2>JS is...';
	">JavaScript</a></li>
</ol>
<article></article>
</body>

이런식으로 동적인 처리를 할 수 있다. 하지만? 이 정보는 하나의 파일 안에 있는 내용들이다. 우리는 AJAX를 이용해서 다른 파일에 있는 필요한 내용만 가져와서 보여주고 싶은 것이다.

아작스 절차

이벤트
요청
처리
응답