AJAX (Asynchronous Javascript And XML)
AJAX는 JavaScript 의 라이브러리 중 하나이며 비동기식 자바스크립트와 xml 의 약자이다. 브라우저가 갖고있는 XML HttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법이며, 백그라운드 영역에서 서버와 통신하여 그 결과를 웹 페이지의 일부분에만 표시할 수 있는 것이다. JavaScript 를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고 받는 기술이다.
즉, 쉽게 말하자면 JavaScript를 통해서 서버에 데이터를 비동기 방식으로 요청하는 것이다.
서버와 주고받을 수 있는 데이터 형태는 다음과 같다.
- JSON
- XML
- HTML
- 텍스트 파일 등
AJAX로 무엇을 하는가?
AJAX라는 네트워크 기술을 이용하여 클라이언트에서 서버로 데이터를 요청하고 그에 대한 결과를 돌려받을 수 있다. 다시 말하면 서버와 클라이언트(나)와의 통신을 말한다.
- 클라이언트 : 서버에서 정보를 가져와서 사용자에게 보여줄 수 있고 사용자와 상호작용할 수 있는 소프트웨어이다. 웹브라우저, 핸드폰, 어플리케이션 등이 속한다.
- 서버 : 네트워크 상에서 접근할 수 있는 프로그램으로써, 어떤 자료들에 대한 관리나 접근을 제어해주는 프로그램이다. 서버는 일반적으로 사용자가 직접적으로 사용하지 않는다.
AJAX 사용 이유
단순하게 웹페이지에서 무언가 부르거나 데이터를 조회하고 싶을 경우에 페이지 전체를 새로고침하지 않기 위해서 사용한다. 예를 들어, 게시판에서 댓글을 보기위해 누른다고 해당 게시판 페이지를 매번 새로고침해 줄 필요는 없다.
기본적으로 HTTP 프로토콜은 클라이언트 쪽에서 Request를 보내고 서버쪽에서 Response를 받으면, 이어져있던 연결이 끊기는 방식이다. 따라서 화면의 내용을 갱신하기 위해서는 클라이언트가 다시 Request를 보내고 서버쪽에서 Response를 하여 페이지 전체를 갱신하게 된다.
위와 같은 경우로 모든 페이지를 만들게 되면 엄청난 자원낭비와 시간낭비를 초래하게 될 것이다. 따라서 AJAX를 이용하여 HTML 페이지 전체가 아닌 일부분만 갱신이 될 수 있또록 XMLHttpRequest 객체를 통해 서버에 Request 해야한다.
JSON, XML 형태로 필요한 데이터만 받아와서 갱신하기에 자원과 시간을 아낄 수 있다.
AJAX의 장단점
AJAX의 장점
- 웹페이지의 속도 향상.
- 서버의 처리가 완료될 때까지 기다리지 않고 처리가 가능 (비동기).
- 서버에서 데이터만 전송하면 되기에 전체적인 코드의 양이 줄어듬.
- 일부만 갱신할 수 있기에 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해준다.
AJAX의 단점
- 전체 갱신이 아니기에 히스토리 관리가 되지 않는다.
- 페이지 이동없는 통신으로 인한 보안상의 문제가 존재한다.
- 연속으로 데이터를 요청하면 서버의 과부하가 생길 수 있다.
- XMLHttpRequest를 이용하여 통신하는 경우, 사용자에게 진행 정보가 주어지지 않는다. 요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 경우가 발생할 수 있다.
- AJAX를 지원하지 않는 브라우저에서의 문제가 있다.
- HTTP 클라이언트의 기능이 한정되어 있다.
- Charset 지원이 한정적이다.
- Script로 작성이 되므로 디버깅이 용이하지 않다.
- 동일-출처 정책으로인해 다른 도메이노가는 통신이 불가능하다. (Cross-Domain 문제)
AJAX의 진행 순서
- XMLHttpRequest Object 생성
Request를 보낼 준비를 브라우저에게 시키는 과정
이것을 위해서 필요한 메소드를 갖춘 object가 필요 - Callback 함수를 생성
서버에서 response가 왔을 때 실행시키는 함수
HTML 페이지를 업데이트 한다 - Open a Request
서버에서 response가 왔을 때 실행시키는 함수
HTML 페이지를 업데이트 - Send the Request
참고
https://99geo.tistory.com/65
https://coding-factory.tistory.com/143
https://velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80
