jQuery REST API 통신 실습

✅ AJAX를 활용한 동적 데이터 처리 & REST API 통신 실습

AJAX(Asynchronous JavaScript and XML)는 웹 페이지가 서버와 비동기적으로 데이터를 주고받을 수 있게 해주는 기술입니다. 이를 통해 페이지를 새로고침하지 않고도 실시간으로 데이터를 받아오고 처리할 수 있습니다.
본 강좌에서는 AJAX를 활용한 동적 데이터 처리 및 REST API 통신을 실습합니다.

📡 1. AJAX 기본 개념

AJAX는 페이지를 다시 로드하지 않고 서버와 데이터를 주고받을 수 있는 기술로, 서버와의 비동기 통신을 통해 웹 애플리케이션의 성능을 크게 향상할 수 있습니다.

AJAX 예시 코드

const xhr = new XMLHttpRequest(); // XMLHttpRequest 객체 생성

xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true); // 요청 설정

xhr.onload = function() {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText); // 응답 데이터 처리
    console.log(data); // 데이터 출력
  } else {
    console.log("요청 실패", xhr.status);
  }
};

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

위 코드는 `GET` 요청을 사용하여 서버에서 JSON 데이터를 가져오는 AJAX 요청입니다.
xhr.onload 콜백 함수에서 응답을 처리하고, 성공적인 요청이면 JSON을 파싱 하여 출력합니다.

📲 2. jQuery를 사용한 AJAX

jQuery는 AJAX 요청을 쉽게 처리할 수 있는 메서드를 제공합니다. $.ajax(), $.get(), $.post() 메서드를 사용하여 비동기적으로 데이터를 받아올 수 있습니다.

jQuery AJAX 예시

$.ajax({
  url: "https://jsonplaceholder.typicode.com/posts",
  type: "GET",
  success: function(data) {
    console.log(data); // 데이터 출력
  },
  error: function(error) {
    console.log("에러 발생:", error);
  }
});
  

$. ajax()를 사용하여 GET 요청을 보내고, 성공 시 데이터를 출력합니다. 에러가 발생하면 에러 메시지를 출력합니다.

💻 3. 실습: REST API 통신 실습

이번 실습에서는 JSONPlaceholder라는 가상의 API를 사용하여, 사용자 목록을 받아오고 동적으로 웹 페이지에 표시하는 방법을 배워보겠습니다. 실제로 API와 통신하고 데이터를 받아와 화면에 출력하는 과정입니다.

REST API 통신 실습 예시

$(document).ready(function() {
  // 버튼 클릭 시 API 요청
  $("#loadData").click(function() {
    $.ajax({
      url: "https://jsonplaceholder.typicode.com/users", // 사용자 목록 API
      type: "GET",
      success: function(data) {
        let usersList = "<ul>";
        data.forEach(function(user) {
          usersList += "<li>" + user.name + " (" + user.email + ")</li>";
        });
        usersList += "</ul>";
        $("#userList").html(usersList); // 사용자 목록 동적으로 추가
      },
      error: function(error) {
        $("#userList").html("데이터를 가져오는데 실패했습니다.");
      }
    });
  });
});

위 코드는 `$.ajax()`를 사용하여 사용자의 데이터를 가져와 웹 페이지에 동적으로 표시하는 예시입니다.

API로부터 받은 데이터는 태그로 구성된 사용자 목록으로 변환되어 `#userList`라는 아이디를 가진 요소에 추가됩니다.

🔄 4. 서버와의 비동기 통신 흐름

• 클라이언트에서 서버로 AJAX 요청 전송
• 서버에서 데이터를 처리하고 JSON 형식으로 응답
• 클라이언트에서 받은 데이터를 동적으로 페이지에 출력

위의 흐름은 AJAX와 REST API를 사용한 기본적인 데이터 통신 방식입니다. 서버와의 비동기 통신을 통해 페이지를 새로고침 없이 데이터를 갱신할 수 있습니다.

🔗 요약

• AJAX: 비동기적으로 서버와 데이터 통신
• REST API: 웹 서비스에서 자원을 주고받는 표준 아키텍처
• jQuery: AJAX를 더욱 간편하게 사용할 수 있도록 도와주는 라이브러리