Ajax(Asynchronous Javascript And XML)
빠르게 동작하는 웹 페이지를 만들기 위한 개발 기법이다.
Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의
일부분만을 갱신할 수 있고 백그라운드 영역에서 서버와 통신하여
그 결과를 웹 페이지의 일부분에만 표시할 수 있다.
이 때 서버와 데이터를 주고받을 수 있는데 주고받는 대표적인
데이터의 형태는 JSON, XML, HTML, 텍스트 등이 있다.
Ajax의 장점
웹 페이지 전체를 다시 로딩하지 않고도 웹 페이지의 일부분만을 갱신할 수 있다.
웹 페이지가 로드된 후에 서버에 데이터 요청을 보내고 받을 수 있다.
다양한 UI 구현(동적인 페이지 구현)이 가능해진다.
Ajax의 단점
페이지의 이동이 없기 때문에 히스토리 관리가 안된다.
반복적인 데이터를 요청하면 느려지거나 작동하지 않게 된다.(서버 과부하)
Ajax의 구성 요소
웹 페이지의 표현을 위한 HTML, CSS
*웹 서버와의 비동기식 통신을 위한 XMLHttpRequest 객체
통신 결과를 받아오기(데이터의 교환을) 위한 JSON, XML, ...
통신 결과를 통해 화면 구성을 동적으로 조작하기 위한 DOM 모델
XMLHttpRequest 객체
Ajax의 가장 핵심적인 구성 요소는 바로 XMLHttpRequest 객체이다.
이 객체는 웹 브라우저가 서버와 데이터를 교환할 때 사용된다.
웹 브라우저가 백그라운드에서 계속해서 서버와 통신할 수 있는 것은
이 객체를 사용하기 때문이다.
XMLHttpRequest 객체 생성
const 객체명 = new XMLHttpRequest();
서버에 요청하기
Ajax에서는 xhr 객체를 사용해서 서버와 데이터를 교환한다.
따라서 서버에 요청을 보내기 위해서는 xhr 객체를 생성한 후
객체의 open() 메소드를 통해 통로를 열어주고 send() 메소드를
사용해서 요청을 보내주는 과정을 거쳐야 한다.
open()
서버로 보낼 Ajax 요청의 형식을 설정한다.
open(전달방식, URL주소, 비동기여부)
전달방식 : GET, POST
URL 주소 : 요청을 처리할 서버의 요청 주소 작성
비동기 여부 : 요청을 동기식으로 전달할지 비동기식으로 전달할지 선택
send()
작성된 Ajax 요청을 서버로 전달하는 메소드
send(); GET 방식(URL에 데이터가 포함되어 있음이 전제)
send("키=값"); POST 방식
Ajax 처리 과정
Ajax 요청시 xhr 객체는 각 상태별로(상황별로) readyState가 바뀐다.
처음에는 0(XMLHttpRequest.UNSET, 보내지 않음)이었다가 open 메소드를
호출하는 순간 1(XMLHttpRequest.OPENED)로 바뀌고 send 호출시 순차적으로
2(XMLHttpRequest.HEADERS_RECEIVED), 3(XMLHttpRequest.LOADING),
4(XMLHttpRequest.DONE)로 바뀐다. 최종적으로 readyState가 4가 된다면
(통신이 완료되었다면) 상태코드(xhr.status)가 성공을 가리키는 200이나 201일 때
응답을 확인한다. 응답된 데이터로 DOM을 활용하여 알맞게 페이지를 변화시켜준다.
JSON(JavaScript Object Notation)
{"키":"값",...}
경량화된 데이터 교환 형식.
서로 다른 언어들 간 데이터를 주고받을 수 있도록 만들어진 텍스트 기반의 형식.
프로그래밍 언어가 아닌 데이터 표기 방법 중 하나이고
기본적으로 name:value 형태의 구조를 띄고 있다.
