Ajax 시작하기

Ajax 란?

Ajax 는 작게는 검색어 자동 완성 기능부터 크게는 전 세계를 안 방에서 한 눈에 들여다 볼 수 있는 구글 지도 서비스, 그리고 먼 나라의 거리를 간접 체험할 수 있는 street view 등을 시작으로 기존 데스크 톱에서나 가능했던 오피스 애플리케이션을 웹 애플리케이션으로 만들어 천대받고 저급한 언어로 여겨졌던 자바스크립트를 자바스크립트의 전성시대로 탈바꿈시킨 것이 구글이 내세운 Ajax 입니다.

이 이후로 정적인 웹은 동적인 웹으로 변모하기 시작했으며, 순수 웹 표준 기술만으로 기존 상상만 하던 것을 가능하게 하고 있습니다.

Ajax 라는 용어는 말하는 사람마다 조금씩 다르게 정의되고 있습니다. 어떤 이는 클라이언트와 서버 간의 데이터 연동을 다루는 것만 Ajax 라고 정의 내리기도 하고 또 어떤 사람은 데이터 통신은 물론 클라이언트 UI 를 동적으로 움직이는 기능까지 포함하여 이를 Ajax 라고 부르기도 합니다.

하지만 요즘 흐름을 본다면 후자에 정의된 내용 쪽으로 기울여진 것 같습니다.

그래서 이를 토대로 Ajax 를 정의하자면 

Ajax(Asynchrononus JavaScript and XML) 란?

- HTML, CSS, javaScript 를 활용해 동적이면서 인터랙티브한 사용자 화면 조작을 포함하면서 서버와의 비동기 데이터 통신을 통해 응답성 좋은 데이터 처리를 가능하게 하는 웹 개발 기법이라고 정의 내릴 수 있습니다.

즉, Ajax의 첫 단어인 Asynchromous 가 가지는 의미는 페이지를 새로고침하지 않고도 서버와 데이터를 주고 받을 수 있다는 뜻입니다.

그리고 조금 덜 알려진 용어 XHR이 있습니다. XHR은 XML HTTP Request의 약자입니다.

Why Ajax?

그렇다면 왜 Ajax 를 사용하는 것일까요?

요즈음에는 기존에 플래시로 많이 만들었던 인터랙티브한 콘텐츠를 웹 기술만을 이용해 구현하거나 스마트 폰의 보급, 대중화에 따라 Ajax 를 활용해 만든 모바일 웹앱이 네이티브 앱과 구분이 가지 않을 정도로 만들어진 결과물을 흔히 경험할 수 있습니다.

즉, Ajax 를 이용하면 다음과 같은 이점이 있습니다.

- 새로고침(refresh)를 통해 새로운 콘텐츠를 반영해야하는 정적인 페이지가 아니라 생동감있는 동적인 웹 페이지를 만들 수 있습니다.

- 전체 페이지에서 실제로 변경되어야할 내용이 특정 부분에만 해당된다면 이 영역의 데이터만을 따로 서버에서 받아올 수 있으므로 경우에 따라 서버의 네트워크 부하를 최대한 줄일 수 있습니다. (변경되는 영역의 데이터만 받기 때문에 경우에 따라서 트래픽이 현저히 줄어듭니다. 

- 사용자 요청에 대한 응답성이 빨라집니다.

- 데이터를 처리할 때 각종 효과를 추가해 인터랙티브한 화면을 만들 수 있습니다.

- 데이터 요청이 비동기로 처리되므로 사용자는 서버에서 응답이 오기 전까지 다른 작업을 하면서 기다릴 수 있습니다.

바로 이런 점 때문에 Ajax 를 사용하는 것이고, 이와 같이 Ajax 를 활용하면 더욱더 효과적인 웹, 더 나아가서는 좀더 규모있는 웹앱을 만들 수가 있습니다.

Ajax 에서 반드시 알고 있어야 할 내용

XMLHttpRequest 객체	이 객체는 클라이언트와 서버 간의 데이터 요청 및 응답 처리를 담당합니다. 가장 먼저 생성해야 하는 객체이며 Ajax 의 핵심입니다.
Get 방식, Post 방식	서버에 보낼 데이터를 URL 에 포함시켜서 보낼지(GET 방식), 아니면 요청 메시지 몸체에 담아서 보낼지(POST)와 관련된 부분입니다.
동기, 비동기	서버에 요청을 보내고 서버 측 응답이 올 때까지 다음 코드를 실행하지 않고 무작정 기다릴 것인지(동기), 아니면 다른 것을 처리하면서 서버 측 응답이 왔다는 소슥을 브라우저에 의해 이벤트롤 받을 것인지(동기) 선택하는 부분입니다. Ajax 에서 A 가 비동기를 의미하듯 여기서는 이 가운데 비동기를 주로 사용합니다.
데이터 교환 방식	서버에서 클라이언트 요청에 대한 응답을 보내는 방식을 설정합니다. 이때 데이터를 하나로 모두 묶어서 보낼 것인지(CSV, Comma Separated Value) 아니면 널리 사용하는 XML 형식으로 보낼지 또는 리터럴(Literal) 방식의 자바스크립트 객체를 의미하는 JSON(JavaScript Object Notation) 방식으로 보낼지 설정합니다. 상황에 따라 3가지 방식을 모두 사용할 때도 있기 때문에 모두 알고 있어야 하는 내용입니다.

Ajax 를 이용한 클라이언트와 서버 간의 데이터 연동

다음은 Ajax 를 이용한 클라이언트와 서버 간의 데이터 연동을 위한 일반적인 workflow (작업흐름,작업순서) 입니다.

1. XMLHttpRequest (요청) 객체를 생성

XMLHttpRequest 객체가 가지고 있는 기능들

• onreadystatechange 이벤트
• open() 메서드
• send() 메서드

모든 Ajax 작업은 XMLHttpRequest  객체를 생성하는 것으로 시작합니다. 

이후 나머자 작업에서는 모두 이 객체에서 제공하는 기능을 이용합니다.

2. 처리 결과를 받을 이벤트 리스너 등록

서버에서 보내는 데이터를 받기 위한 이벤트 리스너를 등록합니다.

3. 서버로 보낼 데이터 생성

서버에 요청을 하면서 추가적으로 보내야 할 내용이 있다면 이곳에서 생성하며, 이 경우 '&' 를 구분자로 "key=value&key=value" 와 같은 식으로 문자열을 만듭니다. 

만약, 서버에 보낼 데이터가 없다면 이 단계를 생략해도 됩니다.

4. 클라이언트와 서버 간의 연결 요청 준비(open() 메서드 이용)

- 서버로 보낼 데이터 전송 방식 선택 (GET, POST 방식)

- 서버 응답(동기, 비동기) 선택

5. 실제 데이터 전송

4번 단계까지는 일종의 준비 단계이며, 이때까지는 아무런 일도 일어나지 않습니다.

위의 통신을 위한 준비 단계가 끝나고 실제 통신을 시작하려면 XMLHttpRequest 객체에서 제공하는 send() 메서드를 호출해야 합니다.

6. 응답처리

5단계에서 send() 가 실행되면서  클라이언트와 서버 사이에서 미리 약속한 방식으로 몇 번에 걸쳐 데이터를 주고 받게 됩니다.

7. 데이터 처리

클라이언트와 서버 간의 아무런 이상없이 정상적으로 끝났다면 이후 서버에서 받은 데이터 형식 방식에 따라 데이터를 가공해서 사용하게 됩니다.

지금까지 Ajax 의 처리순서, 작업흐름을 살펴 보았습니다.

다음 내용부터는 위의 처리, 실행 순서에 따른 관련된 내용을 설명합니다.