jQuery AJAX 요청

🔗 AJAX 요청

AJAX(Asynchronous JavaScript and XML)는 웹 페이지 전체를 새로고침하지 않고도 서버와 비동기적으로 데이터를 주고받을 수 있게 해 줍니다.
jQuery는 간결하고 직관적인 AJAX API를 제공하여 빠르게 서버와 통신할 수 있습니다.

📌 주요 메서드 요약

• $.ajax() : 가장 유연하고 강력한 AJAX 메서드
• $.get() / $.post() : 간단한 GET/POST 요청
• .done() / .fail() / .always() : 요청 결과 처리

📥 예제 1 : $.get()으로 데이터 가져오기

<button id="loadUser">사용자 정보 가져오기</button>
<div id="userInfo"></div>

<script>
  $('#loadUser').click(function() {
    $.get('https://jsonplaceholder.typicode.com/users/1', function(data) {
      $('#userInfo').html('이름: ' + data.name + '<br>이메일: ' + data.email);
    });
  });
</script>
  

$.get()은 간단하게 GET 요청을 보낼 수 있습니다. 위 예제에서는 가상의 사용자 API에서 데이터를 가져와서 화면에 출력합니다.

📤 예제 2 : $.post()로 데이터 전송하기

<button id="saveData">서버에 저장</button>

<script>
  $('#saveData').click(function() {
    $.post('https://jsonplaceholder.typicode.com/posts', {
      title: 'jQuery AJAX',
      body: 'jQuery를 사용한 POST 요청 예제입니다.',
      userId: 1
    }, function(response) {
      alert('응답 ID: ' + response.id);
    });
  });
</script>
  

$. post()는 POST 방식으로 데이터를 전송하며, 콜백 함수로 응답 결과를 처리할 수 있습니다.

⚙️ 예제 3 : $.ajax()로 완전 제어

<script>
  $.ajax({
    url: 'https://jsonplaceholder.typicode.com/posts/1',
    method: 'GET',
    dataType: 'json'
  })
  .done(function(data) {
    console.log('성공:', data);
  })
  .fail(function(jqXHR, textStatus, errorThrown) {
    console.error('에러 발생:', textStatus);
  })
  .always(function() {
    console.log('요청 완료');
  });
</script>
  

$. ajax()는 다양한 설정을 통해 HTTP 메서드, 데이터 형식, 성공/실패 콜백을 자유롭게 지정할 수 있습니다.

💡 Tip : 서버와 통신할 때 주의할 점

• Cross-Origin(CORS) 정책에 따라 외부 도메인 접근이 차단될 수 있음
• 데이터 전송 시 JSON.stringify()를 사용하는 경우도 있음
• REST API에서는 GET, POST, PUT, DELETE 등 HTTP 메서드 구분 필요

📌 마무리

jQuery의 AJAX는 프런트엔드에서 백엔드와 데이터를 주고받는 데 매우 유용한 도구입니다. 오늘 배운 $.get(), $.post(), $.ajax() 메서드를 활용해 서버와 자유롭게 통신하는 웹 페이지를 만들어 보세요.