AJAX는 Asynchronous JavaScript ana XML의 약자로, 웹 페이지 전체를 렌더링하지 않고 필요한 일부분만 업데이트할 수 있는 기술입니다. 서버와 통신하여 변경 또는 수정이 필요한 데이터를 받아와서 뿌려줄 수 있죠. 이때 JSON, XML, HTML, 텍스트 파일 등을 주고 받을 수 있습니다.

장점

웹 페이지 전체를 로딩하면, 사용자 입장에서는 순간적으로 화면이 깜빡거리기 때문에 시각적으로 불편함을 느끼게 됩니다. 그리고 개발자 입장에서는 불필요한 부분까지 재렌더링해야 하기 때문에, 리소스가 낭비된다는 단점이 있었습니다. 따라서 AJAX를 통해 변경이 필요한 일부분만 업데이트를 할 수 있다는 것은 위 단점 2가지를 모두 보완해주는 효과가 있습니다.

한계

ajax는 클라이언트 풀링 방식이기 때문에, 서버 푸시 방식의 실시간 서비스는 만들 수 없습니다. 그리고 ajax로는 binary data를 통신할 수 없습니다.

client pooling & server push

클라이언트 풀링은 사업자가 직접 원하는 정보를 서버에게 요청해서 얻는 방식을 의미합니다. 반대로 서버 푸시는 사용자가 요청하지 않아도 서버가 알아서 자동으로 특정 정보를 제공하는 것을 의미합니다. 스마트폰의 각종 앱에서 보내는 '푸시 알림'이 서버 푸시 방식의 대표적인 예입니다.

binary data

컴퓨터는 0 또는 1로만 데이터를 저장하고 표현합니다. 이러한 이진수 표현 방식에서 0, 1의 숫자로 되어 있는 가장 작은 단위를 bit라고 하며, 이는 binary digit의 약자입니다. 따라서 이진수로 이루어진 데이터 표현 방식을 binary data라고 합니다.

예시

JavaScrit의 내장함수인 fetch는 ajax를 사용하는 함수의 대표적인 예입니다. 아래 코드에서 fetch는 비동기로 처리되기 때문에 직후에 나오는 코드들과 독립적으로 동작합니다. 따라서 로그에는 1,2가 먼저 찍히고, html 요청에 대한 응답이 끝난 후에, 뒤늦게 fetch가 로그에 찍히게 됩니다.

	fetch('html').then(function(response){
        response.text().then(function(text){
          document.querySelector('article').innerHTML = text;
          console.log('fetch');  // 마지막
        }) 
      });
      console.log(1); // 첫번째
      console.log(2); // 두번쨰

그리고 유명한 jQuery 프레임워크도 ajax 기능을 포함하는 대표적인 예시입니다.

동작 원리

기존에 전체 웹 페이지를 로딩할 때는 웹 브라우저가 HttpRequest를 생성하고 서버에 요청하였다면, ajax를 이용할 때는 JavaScript를 호출하고 자바스크립트가 XMLHttpRequest 객체를 생성하고 서버에 요청하는 방식으로 동작하게 됩니다.

Document Object Model

웹 페이지의 일부만 업데이트할 때 DOM(Document Object Model, 문서 객체 모델)을 이용해야 합니다. DOM은 HTML 문서 또는 XML 문서에 접근하기 위한 일종의 인터페이스입니다. 문서 내의 모든 요소의 목적과 특징을 정의해주고, 각 요소에 접근하는 방법을 제공해주죠.

자바스크립트로 DOM 요소를 다루고 변경하기 위해서는, 우선 원하는 DOM 요소를 선택해야 합니다. 선택하는 방법은 다음과 같습니다.

1. tag name

getElementsByTagName() 메소드를 사용합니다.

2. id

getElementById() 메소드를 사용합니다. 하나의 DOM에서 id와 key는 반드시 유일하고 오직 1개의 요소에만 독립적으로 존재해야 합니다. 절대 중복되거나 반복해서 쓸 수 없습니다. 여러 요소를 동시 선택하거나 중복 적용하고 싶다면 class, tag name, html object collection 등을 써야합니다.

3. class

getElementsByClassName() 메소드를 사용합니다.

4. name attribute

getElementByName() 메소드를 사용합니다. tag가 가진 속성 중 name 속성을 이용합니다.

5. css selector

querySelectorAll() 메소드를 사용합니다. css selector에는 id, class, attribute 등등 여러 개의 selector가 존재합니다.

6. HTML Object Collection

document 객체를 통해서 html 요소들에 접근할 수 있습니다.

위의 기능들로 원하는 요소를 선택하였다면, 해당 요소의 내용이나, 속성값을 변경할 수 있습니다. 변경하는 방식은 다음과 같은 것들이 있습니다.

1. innerHTML 메소드 이용
2. 객체를 이용해서 attribute에 접근한 후, 변경할 값으로 지정해주기
3. 객체를 이용해서 style에 접근한 후, 지정해주기

반복되는 코드는 반드시 제거될 수 있고, 단순화시킬 수 있습니다. 항상 더 세련되고 쉬운 코드로 변환하기 위한 노력이 필요합니다.

참조링크

Ajax 기초