브라우저에서 서버에게 요청을 한다.
그림이 조금 거지같지만 그려봤다.
wait 상태에서는 랜더링 할것이 없기 때문에 빈 화면이다.
응답 오는중과 응답 다옴 사이에서는 부분 랜더링하기 시작하고
응답이 다 왔을 때 화면에 전부 랜더링한다.
1. 요청
2. wait
3. 응답
으로 이루어진다.
네이버 사이트를 가서 새로고침을 해보자
화면이 번쩍 거리면서 전부 랜더링된다.
일부 광고 같은 경우 부분랜더링으로 먼저 나오기도 한다.
검색창에 단어를 입력하면 연관 검색어가 밑으로 쭉 뜬다.
그러나 새로고침처럼 화면이 번쩍거리지 않는다.
원래라면 전체 화면이 번쩍거리면서 새로 랜더링 되어야 할 것이다.
이것을 비동기 통신(AJAX)이라 한다.
AJAX(Asynchronous JavaScript and XML)는 웹 페이지가 새로고침 없이 서버와 비동기적으로 데이터를 주고받을 수 있도록 하는 기술입니다. 이를 통해 사용자가 페이지를 다시 로드하지 않고도 동적으로 콘텐츠를 업데이트할 수 있습니다.
AJAX의 주요 개념
- 비동기적(Asynchronous): 서버 요청이 완료될 때까지 웹 페이지가 멈추지 않고, 다른 작업을 계속 진행할 수 있습니다.
- 데이터 교환: 서버와 데이터를 주고받기 위해 XML뿐만 아니라 JSON, HTML, 텍스트 형식도 사용됩니다.
- 새로고침 없는 업데이트: 페이지 전체를 새로 고침하지 않고, 특정 부분만 업데이트할 수 있습니다.
AJAX의 구성 요소
AJAX는 단일 기술이 아니라 여러 웹 기술이 결합된 방식입니다. 주로 다음 기술들이 사용됩니다:
- JavaScript: AJAX 요청을 보내고 응답을 처리하는 데 사용됩니다.
- XMLHttpRequest 객체: 브라우저 내에서 서버와 데이터를 주고받기 위해 사용되는 객체입니다. 최근에는 fetch API로 대체되기도 합니다.
- HTML/CSS: 웹 페이지의 구조와 스타일링을 정의합니다.
- 서버: 요청을 처리하고 데이터를 반환합니다. PHP, Node.js, Python 등의 서버 언어가 사용될 수 있습니다.
- 데이터 포맷: 서버와 주고받는 데이터 형식입니다. 초기에는 XML이 많이 사용되었지만, 현재는 JSON이 더 일반적입니다.
AJAX의 작동 방식
- 브라우저에서 요청 전송: 사용자가 어떤 동작(예: 버튼 클릭)을 수행하면 JavaScript 코드가 서버에 HTTP 요청을 전송합니다.
- 서버에서 요청 처리: 서버는 해당 요청을 처리하고, 클라이언트에 데이터를 반환합니다.
- 브라우저에서 응답 처리: 브라우저는 서버로부터 받은 응답 데이터를 처리하고, 페이지의 일부를 동적으로 업데이트합니다.
AJAX의 장점
- 사용자 경험 향상: 페이지 전체를 다시 로드하지 않기 때문에, 더 빠르고 부드러운 사용자 경험을 제공할 수 있습니다.
- 서버 트래픽 감소: 필요한 데이터만 요청하므로 전체 페이지를 다시 로드하는 것보다 서버 트래픽이 줄어듭니다.
- 실시간 업데이트: 서버와 실시간으로 데이터를 주고받아 동적으로 콘텐츠를 업데이트할 수 있습니다.
AJAX의 단점
- SEO 문제: AJAX로 동적으로 생성된 콘텐츠는 검색 엔진 크롤러가 인식하지 못할 수 있습니다.
- 복잡성 증가: 비동기적으로 데이터를 처리하기 때문에 코드가 복잡해질 수 있으며, 콜백 함수가 중첩되거나 에러 처리가 어려울 수 있습니다.
- 브라우저 호환성: 모든 브라우저가 동일하게 동작하지 않을 수 있기 때문에, 호환성을 고려해야 합니다. (fetch API는 최신 브라우저에서만 지원됩니다.)
결론
AJAX는 웹 애플리케이션을 더 동적으로 만들고, 사용자가 더 빠르고 효율적으로 상호작용할 수 있게 해주는 중요한 기술입니다. XMLHttpRequest와 fetch API를 통해 서버와 비동기적으로 데이터를 주고받으며, 사용자 경험을 개선하는 데 널리 사용됩니다.
AJAX 예제 (XMLHttpRequest 사용)
다음은 AJAX를 이용해 서버에서 데이터를 가져오는 간단한 예제입니다.
// XMLHttpRequest 객체 생성
var xhr = new XMLHttpRequest();
// 요청 초기화 (GET 방식으로 '/data' 엔드포인트에 요청)
xhr.open('GET', '/data', true);
// 요청이 완료되면 호출되는 함수
xhr.onload = function() {
if (xhr.status === 200) {
console.log(xhr.responseText); // 서버로부터 받은 응답 출력
document.getElementById('output').innerHTML = xhr.responseText; // 페이지 일부 업데이트
} else {
console.error('서버 요청에 실패했습니다.');
}
};
// 요청 전송
xhr.send();
AJAX 예제 (fetch API 사용)
XMLHttpRequest 객체 대신 최신 JavaScript에서는 fetch API를 사용하여 AJAX 요청을 쉽게 처리할 수 있습니다.
fetch('/data')
.then(response => response.text())
.then(data => {
console.log(data); // 서버로부터 받은 응답 출력
document.getElementById('output').innerHTML = data; // 페이지 일부 업데이트
})
.catch(error => console.error('에러 발생:', error));