▶자바스크립트 :: Ajax ② - Ajax의 동작방식

▶자바스크립트 :: Ajax ② -  Ajax의 동작방식

---

지난글에서 Ajax의 기본개념과 활용방안, 그리고 동기/비동기 처리모델에 대해서 살펴보았고, 이번글에서는 구체적으로 Ajax가 어떻게 동작하고있는지에대해 살펴보고자 한다.

지난글 :  Ajax의 기본개념과 활용방안 [바로가기]

Ajax의 동작방식에 대하여

Ajax를 사용할 때 브라우저는 웹 서버에 정보를 요청한다.

그런 후 서버의 응답을 처리하여 페이지에 해당 데이터를 표시한다.

1. 요청  : 브라우저는 서버에 정보를 요청한다.

[ 서버의 동작 : 서버는 응답으로 데이터를 전달한다(주로 HTML, XML, JSON형식). ]

2. 응답  : 브라우저는 콘텐츠를 처리하여 페이지에 추가한다.

1. 요청 : 브라우저는 서버에 정보를 요청한다.

---

브라우저는 서버에 정보를 요청하는데, 이 요청은 서버가 필요로하는 정보를 포함하고 있을 수도 있다.

(즉, 마치 폼처럼 데이터를 서버로 전송한다.)

브라우저는 Ajax요청을 담당하는 XMLHttpRequest라는 객체를 구현하고있다. 일단 요청을 전송하고나면, 브라우저는 서버의 응답을 기다리지않는다.

서버의 동작 : 서버는 응답으로 데이터를 전달한다.

---

(서버에서 일어나는 일들은 Ajax라고 부르는 처리과정에 포함되지 않는다.)

ASP.NET, PHP, NodeJS, 루비같은 서버 측 기술들은 사용자마다 다른 웹 페이지를 만들어낼 수 있다. 서버는 Ajax요청을 전달받으면 HTML이나(브라우저가 HTML로 변환할 수 있도록)JSON또는 XML형식의 데이터를 전달한다.

2. 응답 : 브라우저는 콘텐츠를 처리하여 페이지에 추가한다.

---

서버가 요청에 대한 응답을 완료하면 브라우저에서는 이벤트가 발생한다(페이지의 로딩을 완료하면 이벤트를 발생하는 것과 동일하다.).이 이벤트를 데이터를 처리하여 (페이지 내의 다른 영역에는 아무런 여향을 주지 않으면서) 페이지의 일부로 변환하는 자바스크립트를 호출한다.

Ajax의 요청 및 응답

---

브라우저는 XMLHttpRequest 객체를 이용하여  Ajax 요청을 생성하고, 서버가 브라우저의 요청에 대해 응답을 전달하면 같은 XMLHttpRequest 객체가 그 결과를 처리한다.

[Ajax 요청 관련예제, 자료 : 자바스크립트&제이쿼리]

위 Ajax요청관련 예제의 내용 중, 요청을 준비하는 open()메서드는 세 개의 매개변수를 지정하고있는데 각 매개변수가 의미하는 바는 다음과 같다. 

.open()의 매개변수

⑴ HTTP 메서드

⑵ 요청을 처리할 페이지의 URL

⑶ 요청이 비동기로 처리될 것인지를 지정하는 boolean값

Ajax 응답

---

[Ajax 응답 관련예제, 자료 : 자바스크립트&제이쿼리]

사진을 통해 Ajax를 활용하여 응답부분을 처리하는 과정을 살펴볼 수 있다. 이에대한 내용을 텍스트로 정리하면 아래와 같다.

Ajax응답 과정 - 예제

① 브라우저가 서버로부터 응답을 바으면 onload()이벤트가 발생한다.이 이벤트가 발생하면 함수가 호출된다.

② 호출된 익명함수는 xhr객체의 status속성값을 검사하여 서버의 응답이 정상인지를 확인한다.

*인터넷익스플로러의경우 IE9부터 Ajax응답을 위의 예제처럼 처리하는 방식을 지원한다. 따라서, 구 버전의 브라우저를 지원하려면 jQuery를 사용해야한다.

앞서 살펴보았던 예제 내용 중, if구문의 status == 200부분을 처음 접한사람이라면 이 코드가 무엇을 의미하는지 알고싶을 것이다. 이 코드는 이름그대로 '상태메세지'라고하며, 서버의 응답완료여부 및 내용, 오류여부 등에 대한 기능을 수행한다. 자세한 내용은 아래에서 확인하자.

상태메세지 목록

- 200 : 서버가 응답을 완료했으며, 아무런 문제가 없다.

- 304 : 응답 내용이 이전 응답 내용과 동일하다.

- 404 : 페이지를 찾을 수 없다.

- 500 : 서버 내부에서 오류가 발생했다.

*앞서 살펴보았던 예제코드를 로컬환경에서 실행했다면, 서버의 상태를 받을 수 없다.

Ajax에서 주로다루는 데이터의 형식은 HTML, XML, JSON이 있다.

각각이 형식마다 장단점이 있기때문에, 목적과 상황에 맞게 데이터형식을 잘 선택할필요가 있다. 

Ajax로 데이터로드하기

---

앞서 Ajax로 서버에 요청하고, 응답내용을 조회하는 것에대한 개념과 간단한 코드를 살펴보았다. 여기서부터는 살펴본 개념들을 활용하여 HTML, XML, JSON등의 데이터형태들을 로드하는 과정에 대해서 살펴보려고 한다. 먼저, Ajax에서 주로 다루는 데이텨형태(HTML, XML, JSON)중에서 HTML을 로드해오는 과정을 살펴보자. 

이 글에서 살펴볼 내용

데이터의 형식에 따라 구분하여 다음과 같이 예제를 살펴보고, 그에대한 내용들을 정리해보려고한다.

- Ajax로 데이터 로드하기 ① HTML

- Ajax로 데이터 로드하기 ② JSON

Ajax로 데이터로드하기 ① HTML

---

HTML데이터는 Ajax를 이용하여 페이지에 데이터를 추가하는데 있어 가장 손쉬운 방법이지만, 이방법에도 제한사항이 분명하게 존재한다. 자세한내용은 아래에서 차근차근 살펴보도록 하자

주의할 점 - HTML데이터를 로드하는것과 관련하여

- 브라우저는 페이지를 전달받은 것과 동일한 도메인에서 HTML을 로드하는 경우에만 올바르게 작동한다.

- 서버가 HTML, XML, JSON 중 무엇을 리턴하든 Ajax 요청을 설정하고 파일이 동작할 준비가 되었는지를 확인하는 과정은 동일하다. 

(바뀌는 것은 리턴된 데이터를 다루는 부분뿐이다.)

본격적으로 예제를 살펴보기에 앞서 위 사진에서 설명한 내용처럼, 예제실행환경을 미리 살펴보는 것이좋다. 이 글을 작성하면서 예제를 실행한 환경은 MAC OS에, 크롬브라우저를 서버에서 사용했다.

Ajax에서 HTML로드하기 - Ajax에서의 HTML?

---

브라우저는 다른 HTML을 처리할 때와 마찬가지 방법으로 이를 처리한다. 페이지의 나머지 영역을 위한 CSS규칙도 새로운 콘텐츠에 동일하게 적용된다.^[각주:1]

Ajax내용에 덧붙여 한가지 더 정리하자면, 존두켓(2012)은, innerHTML속성에 대해 "서버가 악의적인 콘텐츠를 리턴하지않는다는 확신이 있을때만 사용해야한다"고 이 기능을 사용시 주의가 필요함을 함께 언급하고 있다.

Ajax로 데이터로드하기 ② JSON

json은 html과 함께 Ajax활용시 가장 많이 활용되고있는 데이터 형식 중 하나이다. 또한, 다른 영역에서도 많이 활용되기때문에 함께 알아두면 많은 도움이 된다. 여기서는 JSON에 대해 간략히만 정리해두었다.

JSON을 설명할 때 가장 많이 사용되는 표현은  "사람과 컴퓨터 모두 읽기 쉬운 형식"이다. JSON은 다른 데이터 형태뿐 아니라 XML의 형태보다도 우리가 데이터를 살펴보기 좋은 형식을 가지고 있다. 그리고 무엇보다 중요한것은, 프로그래밍언어와 플랫폼에 독립적이므로, 서로다른 시스템환경에서 데이터를 주고받아야할 경우에 JSON을 사용하면 큰 어려움없이 유연하게 작업을 해 나갈 수 있다. 

Ajax에서의 JSON을 활용한 다는 것은?

---

앞서 간략하게나마 JSON을 살펴보았다. 여기서부터는 이글의 본 주제인 Ajax에 대한 내용으로 돌아와 브라우저에서 JSON형태의 데이터를 어떻게 처리하고, 활용하는지에 대해서 살펴보려고한다.

활용하는 방법에 있어서는 크게 차이가 없다.

앞서 Ajax를 활용하여 브라우저에 HTML형태의 데이터를 로드하는 과정에대해서 꼼꼼하게 살펴보았거나, 이에대한 지식이 이미 있는 상황이라면, 아래에 나오는 내용들은 큰  어려움 없이 이해할 수 있을 것이다. JSON형태라고해서 기존의 방법(여기서는 HTML로드방법)과 크게 다르지 않기 때문이다. 

JSON 형태로 이루어진 데이터를 요청할 때, 브라우저는 앞에서 설명했던

'HTML 로드 방법'과 동일한 문법을 사용하며, 이로써, JSON데이터는

(서버가 응답을 전송한 다음) HTML으로 변환된다.

Ajax에서의 JSON을 이해하기위해 알아야하는 기본적인 내용들

---

기술서에서 살펴보다보면 어려운개념이 잔뜩쌓여있는데도, 원하는 내용만 스킵하고 나머지 내용들은 그냥 스킵하기마련인데, 이글에서는 관련개념을 이해하는데 필요한 내용이라면 함께 정리해두려고한다. 아래 내용들이 바로 그것이다.

객체의 직렬화(serializing)와 역직렬화(deserializing)

---

객체의 직렬화 역직렬화는 이름부터가 뭔가 복잡해보인다. 우선 간단히 이에대한 개념을 요약해보면 다음과 같다.

객체의 직렬화와 역직렬화

- 객체의 직렬화 : 브라우저가 도착한 데이터(문자열 등)를 자바스크립트 객체로 변환하는 과정.

- 객체의 역직렬화 : 브라우저에서 객체를 JSON표현식을 이용한 문자열로 변경하는 과정.

개념을 풀어쓴다고 썼지만, 쉽지 않다. 조금 더 쉽게 풀어서 정리하는 방법이 있으면 찾아보도록 하고, 여기에서는 관련 전문서적에서 이에대해 언급하는 부분을 바탕으로 정리해보려고한다.

서버로부터 웹브라우저로 JSON데이터가 전송되면, 

이 데이터는 문자열로 전송된다.

이 데이터가 브라우저에 도착하면 스크립트는 이 문자열을 자바스크립트 객체로 변환해야한다.

이를 객체의 역직렬화(deserializing)라고한다. 역직렬화는 json이라는 내장 객체의 parse()메서드를 이용하면 된다. 

이 객체는 전역 객체이므로 인스턴스를 만들 필요없이 사용하면 된다.^[각주:2]

일단 문자열이 파싱되면 스크립트는 객체의 데이터에 접근하여 페이지에 사용할 HTML을 생성한다. HTML은 innerHTML 속성을 이용하여 페이지에 추가된다. 따라서 서버로부터 전송된 데이터에 악의적인 코드가 없다고 확신하는 경우에만 사용해야한다.

JSON객체와 stringify() method

JSON객체는 stringify()라는 메서드도 제공하는데, 이 메서드는 객체를 JSON표현식을 이용한 문자열로 변경하여 브라우저가 서버로 객체를 전송할 수 있도록 한다. 이 과정을 객체의 직렬화(serializing)이라고 한다. 이 메서드는 사용자가 페이지에서 데이터를 가지고 있는 자바스크립트 객체를 수정한 후 (예를 들면, 폼에 채워진 데이터를 가지는 객체)이를 서버에 전달하여 서버에 저장되어있는 정보를 수정하고자 할 때 사용할 수 있다.

json에 대해 추가적으로 이해하고 싶다면 생활코딩에서 정리해둔 사이트를 확인해보면 많은 도움이 된다.

- 생활코딩 json 부분 URL : https://opentutorials.org/course/1375/6844

이쯤 읽다보면, 'Ajax에 대한 내용을 보러왔다가 온갖 개념을 배우는 기분'이 들 것이다. 이는 Ajax가 그만큼 넓은 범위에서, 다양한 개념과 기술들과 관련이있기때문이다. 내용 중 아는내용이 있다면 과감히 스킵하고, 그렇지 않은 경우에는 한번 쯤 읽고 넘어가는 식으로 살펴봐도 된다. 

Ajax로 데이터로드하기 ② JSON

---

예제코드를 살펴보기전에 이것저것 서론이 너무 길었다. 여기서부터는 예제코드와 그에대한 설명을 최대한 길지않게 정리해보고자한다.

전체 코드는 위 이미지의 내용과 같다. 이 예제코드는 <자바스크립트&제이쿼리>의 관련 예제를 참고하였다.

​

1. 존 두켓 지음, 장현희 옮김, 『자바스크립트&제이쿼리 - 인터랙티브 프론트엔드 웹 개발 교과서』, 제이펍, 2015, 378쪽. [본문으로]
2. 위의 책, 382쪽. [본문으로]