LabEx
로그인무료 가입

XMLHttpRequest 로 AJAX 요청 생성하기

HTMLBeginner
지금 연습하기

소개

이 랩에서는 참가자들이 AJAX (Asynchronous JavaScript and XML) 의 강력한 세계를 탐험하고 XMLHttpRequest 를 사용하여 동적 웹 애플리케이션을 만드는 방법을 배웁니다. 이 포괄적인 튜토리얼은 비동기 웹 통신의 기본 개념을 다루며, 페이지를 다시 로드하지 않고 서버에서 데이터를 보내고 받는 과정을 안내합니다.

참가자들은 XMLHttpRequest 객체를 생성하고, HTTP 요청 메서드를 구성하며, 서버 응답 상태를 처리하고, 기본적인 AJAX 데이터 검색 기술을 구현하는 실질적인 기술을 습득하게 됩니다. 이러한 핵심 원리를 이해함으로써 개발자들은 사용자 참여와 애플리케이션 성능을 향상시키는 더욱 반응적이고 상호 작용적인 웹 경험을 구축할 수 있게 됩니다.

AJAX 및 비동기 요청 이해하기

이 단계에서는 AJAX (Asynchronous JavaScript and XML) 에 대해 배우고, AJAX 가 웹 통신을 어떻게 혁신하는지 알아봅니다. AJAX 를 사용하면 전체 페이지를 다시 로드하지 않고도 웹 페이지의 콘텐츠를 동적으로 업데이트할 수 있어 더욱 부드럽고 반응성이 뛰어난 사용자 경험을 제공합니다.

AJAX 란 무엇인가?

AJAX 는 웹 애플리케이션이 기존 페이지의 표시 및 동작을 방해하지 않고 서버에서 데이터를 비동기적으로 (백그라운드에서) 보내고 받을 수 있도록 하는 웹 개발 기술입니다. 즉, 전체 페이지를 새로 고치지 않고 웹 페이지의 일부를 업데이트할 수 있습니다.

비동기 요청의 주요 특징

  1. Non-Blocking (논블로킹): 기존의 동기 요청과 달리 AJAX 는 서버 응답을 기다리는 동안 브라우저가 다른 작업을 계속 실행할 수 있도록 합니다.
  2. Background Communication (백그라운드 통신): 사용자의 현재 상호 작용을 방해하지 않고 서버와 데이터를 교환할 수 있습니다.
  3. Partial Page Updates (부분 페이지 업데이트): 웹 페이지의 특정 부분만 업데이트할 수 있어 성능과 사용자 경험을 향상시킵니다.

간단한 AJAX 개념 시연

비동기 요청의 개념을 설명하기 위해 간단한 HTML 파일을 만들어 보겠습니다. WebIDE 를 사용하여 이 예제를 만들 것입니다.

WebIDE 를 열고 새 파일 ~/project/ajax-demo.html을 만듭니다.

<!doctype html>
<html>
  <head>
    <title>AJAX Demonstration</title>
  </head>
  <body>
    <h1>AJAX Example</h1>
    <button id="loadData">Load Data</button>
    <div id="result"></div>

    <script>
      document
        .getElementById("loadData")
        .addEventListener("click", function () {
          console.log("Button clicked: Initiating AJAX request");
          // Asynchronous request will be implemented in later steps
        });
    </script>
  </body>
</html>

실제 AJAX 사용 사례

  • 자동 완성 검색 제안
  • 실시간 콘텐츠 업데이트
  • 페이지 새로 고침 없는 양식 제출
  • 새 알림 폴링
  • API 에서 데이터 가져오기

비동기 요청이 중요한 이유

비동기 요청은 여러 웹 개발 문제를 해결합니다.

  • 향상된 사용자 경험
  • 서버 부하 감소
  • 더 빠르고 반응성이 뛰어난 웹 애플리케이션
  • 보다 효율적인 데이터 교환

XMLHttpRequest 객체 생성하기

이 단계에서는 JavaScript 에서 비동기 요청을 수행하는 핵심 메커니즘인 XMLHttpRequest 객체를 만드는 방법을 배웁니다. 이전 단계의 HTML 파일을 기반으로 XMLHttpRequest 기능을 추가할 것입니다.

WebIDE 에서 ~/project/ajax-demo.html 파일을 열고 스크립트 섹션을 업데이트하여 XMLHttpRequest 객체를 생성합니다.

<!doctype html>
<html>
  <head>
    <title>XMLHttpRequest Demonstration</title>
  </head>
  <body>
    <h1>AJAX Request Example</h1>
    <button id="loadData">Load Data</button>
    <div id="result"></div>

    <script>
      document
        .getElementById("loadData")
        .addEventListener("click", function () {
          // Create XMLHttpRequest object
          var xhr = new XMLHttpRequest();

          // Log the creation of XMLHttpRequest object
          console.log("XMLHttpRequest object created:", xhr);
        });
    </script>
  </body>
</html>

XMLHttpRequest 객체 이해

XMLHttpRequest (XHR) 객체는 다음과 같은 기능을 제공하는 브라우저 내장 API 입니다.

  • HTTP 요청 생성
  • 서버로 데이터 전송
  • 서버에서 데이터 수신
  • 다시 로드하지 않고 웹 페이지의 일부 업데이트

XMLHttpRequest 의 주요 메서드

  1. open(): 새 요청을 초기화합니다.
  2. send(): 서버로 요청을 보냅니다.
  3. onreadystatechange: 요청의 상태를 추적합니다.

브라우저 호환성

XMLHttpRequest 는 모든 최신 브라우저에서 지원되므로 AJAX 통신에 안정적인 선택입니다. 최신 웹 개발에서는 Fetch API 도 사용하지만 XMLHttpRequest 는 여전히 널리 사용됩니다.

예시 출력

"Load Data" 버튼을 클릭하면 XMLHttpRequest 객체의 생성을 보여주는 콘솔 로그가 표시됩니다.

XMLHttpRequest object created: XMLHttpRequest {...}

HTTP 요청 메서드 설정

이 단계에서는 XMLHttpRequest 를 사용하여 HTTP 요청 메서드를 구성하는 방법을 배웁니다. ajax-demo.html 파일을 업데이트하여 다양한 유형의 HTTP 요청을 설정하는 방법을 시연합니다.

WebIDE 에서 ~/project/ajax-demo.html 파일을 열고 스크립트 섹션을 수정합니다.

<!doctype html>
<html>
  <head>
    <title>HTTP Request Methods</title>
  </head>
  <body>
    <h1>AJAX Request Methods</h1>
    <button id="getButton">GET Request</button>
    <button id="postButton">POST Request</button>
    <div id="result"></div>

    <script>
      // GET Request Configuration
      document
        .getElementById("getButton")
        .addEventListener("click", function () {
          var xhr = new XMLHttpRequest();

          // Configure GET request
          xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);

          // Set request headers
          xhr.setRequestHeader("Content-Type", "application/json");

          // Log request details
          console.log("GET Request Configured");

          // Send the request
          xhr.send();
        });

      // POST Request Configuration
      document
        .getElementById("postButton")
        .addEventListener("click", function () {
          var xhr = new XMLHttpRequest();

          // Configure POST request
          xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true);

          // Set request headers
          xhr.setRequestHeader("Content-Type", "application/json");

          // Prepare data to send
          var data = JSON.stringify({
            title: "foo",
            body: "bar",
            userId: 1
          });

          // Log request details
          console.log("POST Request Configured");

          // Send the request with data
          xhr.send(data);
        });
    </script>
  </body>
</html>

HTTP 요청 메서드

가장 일반적인 HTTP 요청 메서드는 다음과 같습니다.

  1. GET: 서버에서 데이터 검색
  2. POST: 서버에서 처리할 데이터 제출
  3. PUT: 기존 데이터 업데이트
  4. DELETE: 데이터 삭제

요청 구성을 위한 주요 메서드

  • open(method, url, async):

    • method: HTTP 메서드 (GET, POST 등)
    • url: 서버 엔드포인트
    • async: 비동기 요청에 대한 부울 값 (일반적으로 true)

  • setRequestHeader(): 요청 헤더 설정

  • send(): 요청 전송 (선택적 데이터 포함)

예시 출력

버튼을 클릭하면 다음과 같은 콘솔 로그가 표시됩니다.

GET Request Configured
POST Request Configured

서버 응답 상태 처리

이 단계에서는 XMLHttpRequest 의 다양한 상태를 처리하고 서버 응답을 처리하는 방법을 배웁니다. 응답 처리를 시연하기 위해 ajax-demo.html 파일을 업데이트합니다.

WebIDE 에서 ~/project/ajax-demo.html 파일을 열고 스크립트 섹션을 수정합니다.

<!doctype html>
<html>
  <head>
    <title>Server Response Handling</title>
  </head>
  <body>
    <h1>AJAX Response States</h1>
    <button id="fetchData">Fetch Data</button>
    <div id="result"></div>

    <script>
      document
        .getElementById("fetchData")
        .addEventListener("click", function () {
          var xhr = new XMLHttpRequest();
          var resultDiv = document.getElementById("result");

          // Track request states
          xhr.onreadystatechange = function () {
            // Log current ready state
            console.log("Ready State:", xhr.readyState);

            // Check if request is complete and successful
            if (xhr.readyState === 4) {
              if (xhr.status === 200) {
                // Successful response
                try {
                  var data = JSON.parse(xhr.responseText);
                  resultDiv.innerHTML = `
                                <h3>Data Received:</h3>
                                <pre>${JSON.stringify(data, null, 2)}</pre>
                            `;
                  console.log("Request Successful");
                } catch (error) {
                  resultDiv.innerHTML = "Error parsing response";
                  console.error("Parsing Error:", error);
                }
              } else {
                // Error handling
                resultDiv.innerHTML = `Error: ${xhr.status}`;
                console.error("Request Failed", xhr.status);
              }
            }
          };

          // Configure and send request
          xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
          xhr.send();
        });
    </script>
  </body>
</html>

XMLHttpRequest 준비 상태

XMLHttpRequest 에는 5 가지 준비 상태가 있습니다.

  • 0: UNSENT (요청 초기화되지 않음)
  • 1: OPENED (연결 설정됨)
  • 2: HEADERS_RECEIVED (요청 수신됨)
  • 3: LOADING (요청 처리 중)
  • 4: DONE (요청 완료)

응답 처리 핵심 개념

  1. onreadystatechange를 사용하여 요청 진행 상황 추적
  2. 완료된 요청에 대해 readyState === 4 확인
  3. 성공적인 응답에 대해 status === 200 확인
  4. 데이터에 액세스하려면 responseText 또는 responseXML 사용
  5. 다양한 상태 코드에 대한 오류 처리 구현

예시 출력

"Fetch Data"를 클릭하면 다음과 같은 콘솔 로그가 표시됩니다.

Ready State: 1
Ready State: 2
Ready State: 3
Ready State: 4
Request Successful

기본 AJAX 데이터 가져오기 구현

이 단계에서는 AJAX 를 사용하여 API 에서 데이터를 검색하고 표시하는 방법을 배웁니다. 사용자 정보를 가져와 표시하는 간단한 사용자 관리 애플리케이션을 만들 것입니다.

WebIDE 에서 ~/project/ajax-demo.html 파일을 열고 내용을 다음 코드로 바꿉니다.

<!doctype html>
<html>
  <head>
    <title>User Management App</title>
    <style>
      #userList {
        margin-top: 20px;
        border: 1px solid #ddd;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>User Management</h1>
    <button id="fetchUsers">Fetch Users</button>
    <div id="userList"></div>

    <script>
      document
        .getElementById("fetchUsers")
        .addEventListener("click", function () {
          var xhr = new XMLHttpRequest();
          var userListDiv = document.getElementById("userList");

          xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
              if (xhr.status === 200) {
                try {
                  var users = JSON.parse(xhr.responseText);

                  // Clear previous content
                  userListDiv.innerHTML = "<h2>User List</h2>";

                  // Create user list
                  users.forEach(function (user) {
                    var userDiv = document.createElement("div");
                    userDiv.innerHTML = `
                                    <p>
                                        <strong>Name:</strong> ${user.name}<br>
                                        <strong>Email:</strong> ${user.email}<br>
                                        <strong>Company:</strong> ${user.company.name}
                                    </p>
                                `;
                    userListDiv.appendChild(userDiv);
                  });
                } catch (error) {
                  userListDiv.innerHTML = "Error parsing user data";
                }
              } else {
                userListDiv.innerHTML = `Error fetching users: ${xhr.status}`;
              }
            }
          };

          // Fetch users from JSONPlaceholder API
          xhr.open("GET", "https://jsonplaceholder.typicode.com/users", true);
          xhr.send();
        });
    </script>
  </body>
</html>

데이터 검색의 핵심 개념

  1. 데모를 위해 공개 API (JSONPlaceholder) 사용
  2. 여러 사용자 레코드 가져오기
  3. JSON 응답 구문 분석
  4. 동적으로 HTML 요소 생성
  5. 잠재적 오류 처리

예시 출력

"Fetch Users"를 클릭하면 다음과 같이 사용자의 세부 정보가 포함된 사용자 목록이 표시됩니다.

User List
Name: Leanne Graham
Email: Sincere@april.biz
Company: Romaguera-Crona

Name: Ervin Howell
Email: Shanna@melissa.tv
Company: Deckow-Crist

... (more users)

모범 사례

  • 항상 데이터 유효성 검사 및 정리
  • 오류 처리 구현
  • JSON 구문 분석에 try-catch 사용
  • 동적이고 반응형 UI 생성

요약

이 랩에서는 참가자들이 AJAX 및 비동기 웹 통신의 기본 사항을 탐구하여 전체 페이지를 다시 로드하지 않고도 동적 웹 경험을 만드는 방법을 배웁니다. 이 랩에서는 논블로킹 요청 (non-blocking requests), 백그라운드 데이터 교환, 부분 페이지 업데이트와 같은 핵심 개념을 소개하고 XMLHttpRequest 가 웹 클라이언트와 서버 간의 원활한 상호 작용을 어떻게 가능하게 하는지 보여줍니다.

실용적인 예제를 통해 AJAX 의 핵심 원리를 이해함으로써 학습자는 데이터를 동적으로 가져오고 표시할 수 있는 반응형 웹 애플리케이션을 구현하는 방법에 대한 통찰력을 얻습니다. 이 랩에서는 XMLHttpRequest 객체 생성, HTTP 메서드 구성, 서버 응답 처리 및 데이터를 비동기적으로 검색하는 데 필요한 필수 기술을 다루며, 현대 웹 개발 관행을 위한 포괄적인 기반을 제공합니다.

관련 HTML 코스
초보자를 위한 HTML

초보자를 위한 HTML

htmlweb-development
틱택토 웹 앱 만들기

틱택토 웹 앱 만들기

javascriptweb-development
두더지 잡기 웹 게임 만들기

두더지 잡기 웹 게임 만들기

javascriptweb-development