[작성일: 2023. 04. 09]
Ajax
- Asynchronus Javascript and XML
- 비동기적인 자바스크립트와 XML
- 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법
- Ajax는 웹 페이지 전체를 다시 로딩하지 않고도 웹 페이지의 일부를 갱신할 수 있음.
- 백그라운드 영역에서 서버와 통신하여 결과를 웹 페이지에 표시할 수 있음.
- 서버와 아래와 같은 데이터를 주고받을 수 있음.
- JSON
- XML
- HTML
Ajax의 장점
- 페이지 전체를 로드하지 않고도 일부분만의 갱신이 가능함.
- 페이지가 로드된 후 서버로 데이터 요청을 보내거나 받을 수 있음.
- 다양한 UI(동적 페이지) 구현 가능함.
Ajax의 단점
- 페이지 이동이 없으므로 히스토리 관리가 되지 않음.
- 반복적인 데이터를 요청하면 느려지거나 작동하지 않음.
- 페이지 이동이 없으므로 보안상 문제가 발생할 수도 있음.
Ajax의 구성 요소
- 웹 페이지 표현을 위한 HTML, CSS
- 데이터에 접근하거나 화면 구성을 동적으로 조작하기 위한 DOM
- 데이터 교환을 위한 JSON, XML
- 웹 서버와 비동기식 통신을 위한 XMLHttpRequest 객체
- 위에서 언급한 기술들을 결합하여 작업 flow를 제어하는 Javascript
XMLHttpRequest 객체
- Ajax의 핵심
- Ajax에서 XMLHttpRequest 객체는 웹 브라우저가 서버와 데이터 교환 시 사용함.
- 웹 브라우저가 백그라운드에서 계속해서 서버와 통신할 수 있는 것은 XMLHttpRequest 객체 때문임.
XMLHttpRequest 객체 생성하기
var 객체명 = new XMLHttpRequest();
서버에 요청하기(request)
- Ajax에서는 객체 생성 후 open(), send() 메서드를 사용하여 요청을 보냄.
open()
- 서버로 보낼 Ajax request의 형식(type)을 결정함.
- oepn(전달방식, URL주소, 동기여부)
- 전달방식 GET, POST 중 선택
- URL주소 요청을 처리할 서버의 파일 주소
- 동기여부 요청을 동기식으로 전달할지 비동기식으로 전달할지 여부
send()
- 작성된 Ajax request를 서버로 전달
- 전달 방식에 따라서 인수가 있을 수도 있고 없을 수도 있음.
send(); // GET 방식
send(문자열); // POST 방식
XMLHttpRequest의 readyState
- 처음에는 readyState가 0 (객체명.UNSEND)
- open 메서드를 호출하면 1 (객체명.OPENED)
- send 메서드를 호출하면 상태가 계속 바뀜.
- 2 (객체명.HEADERS_RECEIVED)
- 3 (객체명.LOADING)
- 4 (객체명.DONE)
- 최종적으로 readyState가 4가 되면 상태코드(객체명.status)가 200, 201일 때 응답을 확인함.
🐣 해당 게시글은 입문 개발자가 요약/정리한 글이므로 틀린 내용이나 오타가 있을 수 있습니다.