AJAX (Asynchronous JavaScript and XML)란?

Coding History

AJAX (Asynchronous JavaScript and XML)란?

BlackBirdIT 2024. 8. 21. 10:06

AJAX는 웹 페이지에서 동적으로 데이터를 주고받아, 전체 페이지를 다시 로드하지 않고도 웹 페이지의 일부분을 업데이트할 수 있게 해주는 기술이다. 즉, 사용자가 웹 페이지에서 특정 동작을 할 때, 전체 페이지가 새로고침되지 않고도 필요한 데이터를 서버에서 가져와서 화면에 반영할 수 있게 해준다.

주요 특징

비동기성 (Asynchronous)

AJAX의 가장 큰 특징은 비동기적(실시간)으로 동작한다는 것이다. 이는 요청을 보내고 서버의 응답을 기다리는 동안에도 다른 작업을 계속할 수 있다는 의미다.
ex) 사용자가 버튼을 클릭해서 데이터를 요청하더라도, 페이지가 멈추거나 새로고침되지 않고, 사용자의 활동에 제약없이 페이지를 이용할 수 있다.

부분 업데이트

AJAX를 사용하면 웹 페이지의 특정 부분만 업데이트할 수 있다. 페이지 전체를 다시 로드하지 않아도 되므로, 빠른 응답 속도와 부드러운 사용자 경험을 제공한다.
ex) 사용자가 댓글을 작성하고 제출하면, 댓글 영역만 새로고침되어 새로운 댓글이 표시된다.

XMLHttpRequest 객체

AJAX는 브라우저 내에서 XMLHttpRequest 객체를 사용하여 서버와 데이터를 주고받는다.
이 객체는 HTTP 요청을 만들고, 서버의 응답을 비동기적으로 처리할 수 있게 해줍니다.
(XMLHttpRequest (XHR) 객체는 서버와 상호작용할 때 사용한다. XHR을 사용하면 페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 있다. 이를 활용하면 사용자의 작업을 방해하지 않고 페이지의 일부를 업데이트할 수 있습니다.)

데이터 포맷

AJAX는 XML뿐만 아니라, JSON, HTML, 텍스트 등 다양한 데이터 형식을 주고받을 수 있다. 요즘은 가볍고 사용이 편리한 JSON이 많이 사용된다.

AJAX의 동작 흐름

사용자가 웹 페이지에서 특정 동작을 수행 (예: 버튼 클릭, 댓글 쓰기 등)
AJAX 요청: XMLHttpRequest 객체가 생성되고, 서버로 비동기 요청이 전송된다.
서버 처리: 서버는 요청을 받아 필요한 데이터를 처리하고 응답을 반환한다.
AJAX 응답: 브라우저는 서버에서 받은 데이터를 처리하고, 웹 페이지의 일부분을 업데이트한다.
사용자 경험: 사용자는 페이지 전체가 새로고침되지 않고도, 변화된 내용을 즉시 확인할 수 있다.

AJAX의 장점과 단점

장점	단점
사용자 경험 향상: 전체 페이지를 다시 로드하지 않아도 되어 빠르고 부드러운 사용자 경험을 제공	복잡성 증가: 동기식 요청보다 코드가 복잡해질 수 있다.
네트워크 사용 효율성: 필요한 데이터만 주고받아 네트워크 자원을 절약	SEO 어려움: 검색 엔진은 일반적으로 AJAX로 동적으로 로드된 콘텐츠를 쉽게 인덱싱하지 못함.
서버 부하 감소: 페이지 전체가 아닌 일부만 업데이트하여 서버 부하를 줄일 수 있음	브라우저 호환성: 일부 오래된 브라우저에서는 AJAX 지원이 제한적일 수 있다.
실시간 데이터 처리 가능: 실시간으로 서버와 데이터를 주고받아 동적인 페이지 구현 가능	디버깅 어려움: 비동기 특성으로 인해 디버깅이 까다로울 수 있다.

AJAX 예제코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX Example</title>
    <script>
        function loadData() {
            const xhr = new XMLHttpRequest();
            xhr.open("GET", "data.txt", true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    document.getElementById("content").innerHTML = xhr.responseText;
                }
            };
            xhr.send();
        }
    </script>
</head>
<body>
    <button onclick="loadData()">Load Data</button>
    <div id="content">Here will be the loaded data.</div>
</body>
</html>

코드의 기능 및 동작 설명:

loadData 함수: 사용자가 버튼을 클릭하면 loadData() 함수가 호출됨.

  <script>
      function loadData() {
          const xhr = new XMLHttpRequest();
          xhr.open("GET", "data.txt", true);
          xhr.onreadystatechange = function() {
              if (xhr.readyState === 4 && xhr.status === 200) {
                  document.getElementById("content").innerHTML = xhr.responseText;
              }
          };
          xhr.send();
      }
  </script>

XMLHttpRequest 객체: 이 함수는 XMLHttpRequest 객체를 사용하여 data.txt 파일을 서버에 요청합니다.
```
          const xhr = new XMLHttpRequest();
          xhr.open("GET", "data.txt", true);
```

readyState: 서버 응답이 완료되면, readyState === 4와 status === 200이 충족되면 서버로부터 받은 데이터를 content div에 넣습니다.

          xhr.onreadystatechange = function() {
              if (xhr.readyState === 4 && xhr.status === 200) {
                  document.getElementById("content").innerHTML = xhr.responseText;
              }
          };

결과: 페이지를 새로 고침하지 않고도, data.txt 파일의 내용이 content div에 표시됨.

코드는 GPT에게 예제를 만들어달라고 부탁해서 가져온 것이다.

해당 코드에 대한 이미지인데 깨진 글은 대충 넘기고 감각적으로 어떤 느낌인지만 보면 될 것 같다.

아무튼 AJAX는 사용자가 웹 페이지에서 경험하는 인터랙션을 크게 개선할 수 있는 중요한 기술이다. 하지만 이를 구현할 때는 비동기 작업의 특성과 복잡성을 고려하여 신중하게 설계해야 한다. 아까의 단점을 참고하면 된다.