AJAX: Asynchronous Javascirpt And Xml(비동기식 자바스크립트와 xml)의 약자로
웹페이지의 전체 페이지를 새로 고치지 않고 페이지의 일부분만을 "서버" 에서 가지고 와서 '웹페이지 화면을 동적으로 변경하는 방식'을 의미한다.
브라우저와 서버가 비동기적으로 데이터를 주고 받는 통신 방식
1.Ajax의 핵심 개념
과거의 웹 방식은 사용자가 버튼을 누르면 서버가 새로운 HTML 페이지 전체를 보내주어야 했음. 하지만 Ajax를 사용하면 다음과 같은 변화가 일어남
- 비동기성(Asynchronous): 서버에 데이터를 요청한 후, 응답이 올 때까지 기다리지 않고 다른 작업을 계속할 수 있다.
- 부분 업데이트: 페이지 전체를 새로고침(refresh)할 필요 없이 필요한 부분의 데이터만 갱신
- 백그라운드 통신: 사용자에게 보이지 않는 곳에서 서버와 데이터를 주고 받음
2. Ajax의 동작 원리
Ajax는 독립된 하나의 기술이 아니라, 여러 기술의 조합으로 이루어짐
1. 이벤트 발생: 사용자가 버튼 클릭 등의 액션을 취함
2. XMLHttpRequest(XHR) 객체 생성: 브라우저가 서버에 보낼 요청서(객체)를 만듦.(최근에는 fetchAPI를 더 많이 사용함)
3. 서버 요청: 브라우저가 백그라운드에서 서버로 데이터를 요청
4. 서버 처리: 서버가 데이터를 처리하고 응답을 보냄
5. 데이터 수신 및 렌더링: 브라우저가 받은 데이터(JSON 등)를 javascript를 이용해 HTML에 반영
3. Ajax를 사용하는 이유
동적인 기능 즉 움직이는 기능을 갖춘 웹페이지를 서비스하기 위해선 Ajax가 필수이다. ajax를 활용하면 다음 페이지로 넘어가지 않고도 원하는 모습을 바로 확인할 수 있기 때문.
1. 사용자 경험(UX) 향상
- 화면이 깜빡이지 않고 애플리케이션처럼 자연스럽게 동작(ex: 네이버지도,인스타그램 무한 스크롤)
- 대기시간 동안에도 사용자가 웹사이트를 이용 가능
2. 서버 및 네트워크 트래픽 감소
- 불필요한 html,css,이미지 등을 다시 받을 필요가 없음
- 오직 변경된 데이터만 주고 받으므로 속도가 빠르고 데이터 소모량이 적음
4. 서버 처리 부담 감소
- 서버는 html을 완성해서 보낼 필요없이, 데이터(json)만 보내주면 됨
- 화면을 그리는 작업(렌더링)을 클라이언트(브라우저)에게 넘길 수 있어 서버 부하가 줄어듦.
사용예시
//서버에 데이터 요청(GET)
fetch('https://api.example.com/data')
.then(response => responese.json()) //응답을 JSON으로 반환
.then(data => {
console.log(data); //받아온 데이터 확인
//여기서 화면의 특정 부분만 업데이트 하는 코드 작성
})
.catch(error => console.error('에러 발생:',error));