[FE] 📚 AJAX란?

728x90

🤗 오늘의 위클리 페이퍼는

AJAX에 대해 학습하는 토픽입니다.

📗 AJAX란 무엇인가?

AJAX는 Asynchronous JavaScript and XML의 약자로, 웹 페이지를 새로 고침하지 않고도 서버와 데이터를 주고받을 수 있는 기술을 말합니다. AJAX를 사용하면 웹 애플리케이션이 더 빠르고, 상호작용이 풍부하며, 사용자 경험이 향상됩니다.

즉, AJAX는 웹 브라우저가 현재 페이지를 그대로 유지한 채로 서버에 리퀘스트를 보내고 리스폰스를 받아서, 새로운 페이지를 로드하지 않고도 페이지에 변화를 줄 수 있게 해주는 기술입니다.

여기서 XML은 AJAX라는 용어가 생겨난 당시에 가장 많은 인기를 누리던 데이터 타입을 뜻합니다. 요즘은 더 가벼운 용량과 JavaScript의 일부라는 장점 때문에 JSON을 많이 사용합니다. JSON과 XML 모두 AJAX에서 정보를 담을 때 사용합니다.

📙 AJAX의 활용

AJAX에서 서버와 통신하기 위해 보내는 HTTP 리퀘스트가 기술의 핵심이라고 할 수 있는데요. 이를 위해서는 기능을 제공하는 객체의 인스턴스가 필요했고, XMLHttpRequest 가 대표적으로 사용된 객체입니다.

요즘은 Fetch API나 XMLHttpRequest 를 기반으로 더 쓰기 편하게 만들어진 axios와 같은 패키지를 사용해서 AJAX를 활용하고 있습니다.

AJAX의 구성요소

XMLHttpRequest 객체: 브라우저에서 제공하는 객체로, 서버와의 비동기 통신을 담당합니다.
JavaScript: AJAX 통신을 제어하고, 서버로부터 받은 데이터를 처리합니다.
서버 측 스크립트: 서버에서 요청을 처리하고 응답을 반환하는 역할을 합니다. (예: PHP, Node.js)
데이터 형식: 서버와 주고받는 데이터 형식으로, 일반적으로 JSON이 많이 사용됩니다. XML도 사용될 수 있지만, 최근에는 JSON이 더 선호됩니다.

📘 AJAX의 동작 원리

XMLHttpRequest 객체 생성: 자바스크립트를 사용하여 XMLHttpRequest 객체를 생성합니다.
요청 준비: 서버에 보낼 요청을 설정합니다. (예: GET 또는 POST 메서드, 요청할 URL 등)
요청 전송: 서버에 요청을 전송합니다.
응답 처리: 서버로부터 응답이 오면 이를 처리하고, 필요한 경우 웹 페이지의 일부를 업데이트합니다.
아래는 간단한 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>
</head>
<body>
  <h1>AJAX Example</h1>
  <button id="loadDataBtn">Load Data</button>
  <div id="dataContainer"></div>

  <script>
    document.getElementById('loadDataBtn').addEventListener('click', function() {
      // XMLHttpRequest 객체 생성
      const xhr = new XMLHttpRequest();

      // 요청 준비 (GET 메서드, URL)
      xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);

      // 요청 전송
      xhr.send();

      // 응답 처리
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
          // 서버로부터 받은 JSON 데이터를 파싱
          const data = JSON.parse(xhr.responseText);
          
          // 웹 페이지 업데이트
          document.getElementById('dataContainer').innerText = `Title: ${data.title}\nBody: ${data.body}`;
        }
      };
    });
  </script>
</body>
</html>

✅ 요약

AJAX의 장점

비동기 통신: 페이지를 새로 고침하지 않고도 서버와 데이터를 주고받을 수 있어 사용자 경험이 향상됩니다.
빠른 응답: 필요한 데이터만 서버에서 가져오기 때문에 전체 페이지를 다시 로드하는 것보다 빠릅니다.
서버 부담 감소: 페이지 전체를 다시 로드하지 않으므로 서버의 부담이 줄어듭니다.

AJAX의 단점

브라우저 호환성: 모든 브라우저가 동일하게 동작하지 않을 수 있어, 이를 고려한 추가 작업이 필요할 수 있습니다.
보안 문제: 클라이언트 측에서 서버와의 통신이 이루어지기 때문에, 악의적인 사용자가 이를 악용할 가능성이 있습니다. 이를 방지하기 위해 서버 측에서 철저한 검증이 필요합니다.

결론

AJAX는 웹 페이지를 동적으로 업데이트하고, 사용자 경험을 향상시키는 강력한 기술입니다. AJAX를 이해하고 활용하면, 보다 빠르고 상호작용이 풍부한 웹 애플리케이션을 개발할 수 있습니다. 이번 글이 AJAX의 개념과 동작 원리를 이해하는 데 도움이 되었기를 바랍니다.