Ajax와 xmlhttprequest

Ajax 의 사전적 의미

• Ajax = Asynchromous Java And Xml

비동기식 자바스크립트와 xml 이라는 뜻이다.

 

Ajax 란

• Ajax 는 프로그램 언어는 아니다. JavaScript 의 라이브러리 중 하나이며,

브라우저가 가지고 있는 XMLHttpRequest 객체를 이용하여 페이지를 새로고침 하지 않고, 페이지의 일부만을 위한 데이터를 로드하는 기법이다.

JavaScript 를 사용한 비동기적 정보 교환 기법으로, 클라이언트와 서버간에 Xml 등 데이터를 주고받는 기술이다.

이름에 XML 이 들어가지만, 데이터를 일반 텍스트 또는 JSON 으로 전송하는 것이 일반적이다.

 

Ajax 는 : 

브라우저에 내장된 XMLHttpRequest 객체를 사용하여 웹서버에서 데이터를 요청하고,

JavaScript 와 HTML DOM 을 이용해 받아온 데이터를 보여주거나 이용한다.

 

Ajax 를 사용하는 이유

• 웹페이지가 로드된 후에도 웹서버에서 데이터를 읽기 위해
• 페이지를 다시 로드하지 않고 웹페이지를 업데이트하기 위해
• 백그라운드에서 웹서버로 데이터를 보내기 위해

Ajax 의 이름에 들어가는 "Asynchronous (비동기)" 가 핵심이다.

비동기를 이해하기 위해서는 HTTP 프로토콜의 "connectionless" 라는 특징을 이해해야 한다.

기본적으로 HTTP 프로토콜은 "connectionless" 라는 특징을 갖고 있다.

"connectionless" 란, 클라이언트가 request 를 서버에 보내면, 서버는 클라이언트에게 요청에 맞는 response 를 보내고 그 연결을 끊어버리는 것이다. 그래서 HTTP 프로토콜에서는 화면을 갱신하기 위해 request 를 다시 서버에 보내고, response 를 받아 페이지 전체를 갱신하게 되어있다.

즉, 페이지를 리로드하기 위해 웹페이지의 리소스를 전부 다시 불러와야 한다는 것이다.

예를 들어서, 쇼핑몰 사이트를 만든다고 생각해보자.

쇼핑몰 사이트에서 사용자가 클릭한 상품의 정보를 홈페이지 상단에 보여주려고 한다. 비동기적인 방식을 사용하지 않으면, 상품을 클릭할 때마다 웹페이지의 모든 리소스 중에서 상단의 상품정보만 바뀌는 것이지만, 웹페이지를 구성하는 모든 리소스를 다시 불러오게 된다.

이러한 방식은 엄청난 자원낭비와 시간낭비를 초래한다.

그러나, 비동기 방식을 이용하면, 웹페이지를 리로드하지 않고 데이터를 불러올 수 있다.

Ajax 는 html 페이지 전체가 아닌 일부분만 갱신할 수 있도록 Xmlhttprequest 객체를 통해 서버에 request 를 한다. 이 경우, Json 이나 xml 형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다.

Ajax의 장점

1. 웹 페이지의 전체를 다시 로딩하지 않고도 웹 페이지 일부분만을 갱신할 수 있다.
2. 웹 페이지가 로드된 후에 서버로 데이터 요청이 가능하다.
3. 다양한 UI(동적 페이지) 구현이 가능해진다.
4. 웹페이지의 속도향상
5. 서버의 처리가 완료될 때까지 기다리지 않고 처리가 가능하다.
6. 서버에서 Data만 전송하면 되므로 전체적인 코딩의 양이 줄어든다.
7. 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해준다. ( Flickr의 경우, 사진의 제목이나 태그를 페이지의 리로드 없이 수정할 수 있다.)

 

Ajax의 단점

1. 페이지의 이동이 없기 때문에 히스토리 관리가 안된다.
2. 반복적인 데이터의 요청이 있다면 느려지거나 작동이 멈춘다.
3. 페이지의 이동이 없다는 것은 보안상의 문제도 발생할 수 있다는 것이다.
4. XMLHttpRequest를 통해 통신하는 경우, 사용자에게 아무런 진행 정보가 주어지지 않는다. (요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생하게 된다.)
5. AJAX를 쓸 수 없는 브라우저에 대한 문제 이슈가 있다.
6. HTTP 클라이언트의 기능이 한정되어 있다.
7. 지원하는 Charset이 한정되어 있다.
8. 동일-출처 정책으로 인하여 다른 도메인과는 통신이 불가능하다. (Cross-Domain문제)

 

XMLHttpRequest

• XMLHttpRequest(XHR) 객체는 서버와 상호작용하기 위해 사용된다.
• 전체 페이지의 새로고침 없이도 URL로부터 데이터를 받아올 수 있다. 이는 웹페이지가 사용자가 하고 있는 것을 방해하지 않으면서 페이지의 일부를 업데이트할 수 있도록 해준다.
• XMLHttpRequest는 AJAX 프로그래밍에 주로 사용된다.
• Ajax의 가장 핵심적인 구성 요소는 바로 XMLHttpRequest 객체이다.
• 이 객체는 웹 브라우저가 서버와 데이터를 교환할 때 사용된다.
• 웹 브라우저가 백그라운드에서 계속해서 서버와 통신할 수 있는 것은 바로 이 XMLHttpRequest 객체를 사용하기 때문이다.
• Ajax 기술을 위해 우리가 직접 저 객체 하나를 만들어서 서버와 통신을 명령해야 한다.

 

XHR(XMLHttpRequest) 객체 생성

XHR(XMLHttpRequest) 객체 메소드

1. open( )

• 서버로 보낼 Ajax 요청의 형식을 설정한다.
• 서버와의 통신을 위한 길을 열어주는 메소드이다.

•  전달방식 : GET, POST 방식 중 하나를 선택한다.
• url 주소 : 요청을 처리할 서버의 파일 주소를 전달한다.
• 동기여부 : 요청을 동기식으로 전달할지, 비동기식으로 전달할지를 선택한다.

1. send()

• 작성된(설정되어 있는) Ajax 요청을 서버로 전달한다.
• GET방식일 때 => send( ); (url에 데이터가 담겨져있기때문에)
• POST방식일 때 => send("쿼리스트링");

 

Ajax의 흐름

1. Ajax 요청시 XMLHttpRequest객체(xhr)는 각 상태별로 readyState가 바뀐다.
2. 처음에는 readyState가 0(XMLHttpRequest.UNSET, 보내지않음) 이었다가
3. open 메소드를 호출하는 순간 1(XMLHttpRequest.OPENED)로 바뀌고
4. send 메소드를 호출하면 순차적으로 2(XMLHttpRequest.HEADERS_RECEIVED), 3(XMLHttpRequest.LOADING),4(XMLHttpRequest.DONE)로 바뀐다.
5. 최종적으로 readyState가 4가 된다면 상태코드(xhr.status)가 성공을 가리키는 200이나 201일 때 응답을 확인한다.

 

Ajax의 기본 구조