jQuery Ajax 메소드 정리

jQuery의 Ajax 메소드를 이해하고 적절히 활용하면 서버와의 비동기 통신을 손쉽게 구현할 수 있습니다. 각 메소드의 역할과 예제를 함께 살펴보세요.

---

1. $.ajax() – 가장 강력한 Ajax 메소드

$.ajax()는 모든 Ajax 요청을 커스터마이징할 수 있는 메소드입니다. 다양한 옵션을 설정해 복잡한 데이터 통신을 구현할 수 있습니다.

기본 문법

$.ajax({
  url: "요청 URL",
  method: "GET",       // 또는 "POST"
  data: { key: "value" },
  dataType: "json",    // "html", "text", "script" 등도 가능
  success: function(response) {
    // 성공 시 처리
  },
  error: function(xhr, status, error) {
    // 실패 시 처리
  },
  complete: function(xhr, status) {
    // 무조건 실행
  }
});

실용 예제

$("#requestBtn").on("click", function () {
  $.ajax({
    url: "/api/data",
    method: "GET",
    data: { userId: 1 },
    dataType: "json"
  })
  .done(function (res) {
    alert("성공: " + res.message);
  })
  .fail(function (xhr, status, error) {
    alert("실패: " + error);
  })
  .always(function () {
    alert("요청 완료");
  });
});

---

2. 간단한 Ajax 메소드

$.get()

GET 방식 요청

$.get("/api/data", { key: "value" }, function (res) {
  alert(res.message);
});

$.post()

POST 방식 요청

$.post("/api/submit", { name: "홍길동" }, function (res) {
  alert(res.message);
});

$.getJSON()

JSON 응답을 받을 때 사용

$.getJSON("/api/data", function (json) {
  console.log(json);
});

$.getScript()

JavaScript 파일을 동적으로 불러오기

$.getScript("/scripts/example.js", function () {
  alert("스크립트 로드 완료!");
});

---

3. .load() 메소드 – HTML 조각 로드

서버에서 HTML을 일부만 로드하여 특정 요소에 삽입할 수 있습니다.

기본 문법

$(선택자).load("URL [선택자]");

예제

$("#loadBtn").on("click", function () {
  $("#content").load("/api/data.html #section"); // #section 부분만 로드
});

---

질문 정리

$.ajax()와 $.get(), $.post()의 차이는 무엇인가요?

→ $.ajax()는 완전한 설정 가능, $.get()과 $.post()는 단순한 요청에 적합합니다.

.load() 메소드는 어떤 상황에 쓰나요?

→ HTML 조각만 간편하게 로드할 때, 예: 탭 콘텐츠, 미니 콘텐츠 교체 등.

데이터 포맷이 JSON이 아닐 경우도 처리 가능한가요?

→ 가능합니다. dataType을 "text", "html", "script" 등으로 설정하세요.

POST 요청 시 보안에 신경 써야 하나요?

→ 반드시 서버에서 CSRF, XSS 등의 보안 검증을 수행해야 합니다.

---

마무리

jQuery의 Ajax 메소드는 비동기 데이터 통신을 쉽게 구현할 수 있는 도구입니다.

단순 요청은 .get(), .post()로, 복잡한 요청은 .ajax()로 유연하게 처리하세요.

상황에 맞게 선택하고 콜백 함수로 결과를 반영하면, 새로고침 없는 깔끔한 사용자 경험을 제공할 수 있습니다.