Ajax (Asynchronous Javascript And XML)
Ajax란 빠르게 동작하는 웹 페이지를 만들기 위한 개발 기법이다.
페이지 전체를 다시 로딩하지 않고도 웹 페이지의 일부분만을 갱신할 수 있으며, 백그라운드 영역에서 서버와 통신하여 그 결과를 웹 페이지의 일부분에만 표시할 수 있다. 이 때 서버와 데이터를 주고받을 수 있는데 대표적인 데이터는 JSON, XML, HTML, 텍스트 등이 있다.
Ajax의 장단점
- 장점
- 웹 페이지 전체를 다시 로딩하지 않고도 웹 페이지의 일부분만을 갱신할 수 있다.
- 웹 페이지가 로드된 후에 서버에 데이터 요청을 보내거다 받을 수 있다.
- 다양한 UI 구현(동적인 페이지 구현)이 가능해진다.
- 단점
- 페이지의 이동이 없기 때문에 히스토리 관리가 불가능하다.
- 반복적인 데이터를 요청하면 느려지거나 작동하지 않게 된다. (서버 과부하)
- 페이지의 이동이 없기 때문에 보안상의 문제가 발생할 수 있다.
Ajax의 구성요소
- 웹 페이지의 표현을 위한 HTML, CSS
- 데이터의 교환을 위한 JSON, XML
- 웹 서버와의 비동기식 통신을 위한 XMLHttpRequest 객체
- 통신 결과를 통해 화면 구성을 동적으로 조작하기 위한 DOM 모델
XMLHttpRequest 객체
Ajax의 가장 핵심적 요소이며, 웹 브라우저가 서버와 데이터를 교환할 때 사용된다.
따라서 서버에 요청을 보내기 위해서는 xhr 객체를 생성해야 하고, 객체의 open() 메서드를 통해 통로를 열어주고 send() 메서드를 통해 요텅을 보내주는 과정을 거쳐야한다.
-
open()- 서버로 보낼 Ajax 요청의 형식을 설정한다.
open(전달방식, URL주소, 비동기여부);- 전달방식 : GET, POST, ..
- URL 주소 : 요청을 처리할 서버의 파일 주소 전달
- 비동기 여부 : 요청을 동기식으로 전달할지 비동기식으로 전달할지에 대한 여부
-
send()-
작성된 Ajax 요청을 서버로 전달하는 메서드
-
GET방식 :
send();POST방식 :
send("키=값");
-
xhr 객체의 상태
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일 때 응답을 확인한다.
GET 방식과 POST 방식
- GET
- 주소에 데이터를 추가하여 전달하는 방식, 쿼리문자열에 포함되어 전송되므로 길이에 제한이 있으며 주소에 데이터가 보이므로 보안상 취약점이 존재한다.
- url?키1=값1&키2=값2.. 의 형식
- POST
- 데이터를 별도로 첨부하여 전달하는 방식. 브라우저 히스토리에도 남지 않는다.
- GET 방식에 비해 보안성이 높지만 상대적으로 속도는 느리다. 데이터를 꺼내올때도 인코딩을 먼저 거쳐야 한다.
전송할 데이터의 양이 작고 노출되어도 무방하면 GET 방식을 사용하고
전송할 데이터의 양이 크거나 노출되면 안될 데이터라면 POST 방식을 사용한다.
