09. 제이쿼리(jQuery) 비동기 방식 연동

웹 페이지는 새로고침 없이 서버와 데이터를 주고받을 수 있다.

이 방식이 바로 AJAX다.

1. AJAX

1) AJAX란?

AJAX(Asynchronous JavaScript And XML)는 페이지를 새로고침하지 않고 서버와 데이터를 주고 받는 기술이다.

기존 방식

• 요청 → 전체 페이지 새로고침 → 응답

AJAX 방식

• 요청 → 데이터만 응답 → 화면 일부만 변경

즉, 비동기 통신 방식이다.

2. AJAX 관련 메서드

jQuery는 AJAX를 간단하게 사용할 수 있는 메서드를 제공한다.

1) AJAX 관련 메서드들

① $.ajax()

가장 기본이 되는 메서드

$.ajax({
  url: "data.json",
  type: "GET",
  dataType: "json",
  success: function(data) {
    console.log(data);
  },
  error: function(error) {
    console.log("에러 발생");
  }
});

옵션 설명

② $.get()

$.get("data.json", function(data) {
  console.log(data);
});

GET 요청 전용

③ $.post()

$.post("server.php", { name: "John" }, function(data) {
  console.log(data);
});

POST 요청 전용

④ $.getJSON()

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

JSON 데이터 전용

3. AJAX로 JSON 데이터 바인딩하기

JSON은 가장 많이 사용하는 데이터 형식이다.

[
  {"name": "Tom", "age": 20},
  {"name": "Jane", "age": 25}
]

바인딩 예시

$.getJSON("data.json", function(data) {
  let output = "";

  $.each(data, function(index, item) {
    output += "<p>" + item.name + " - " + item.age + "</p>";
  });

  $("#result").html(output);
});

• $.each() → 반복 처리
• html() → 화면 출력

4. AJAX로 XML 데이터 바인딩하기

XML도 지원 가능하다.

<people>
  <person>
    <name>Tom</name>
    <age>20</age>
  </person>
</people>

XML 바인딩 예시

$.ajax({
  url: "data.xml",
  dataType: "xml",
  success: function(data) {
    $(data).find("person").each(function() {
      let name = $(this).find("name").text();
      let age = $(this).find("age").text();
      $("#result").append("<p>" + name + " - " + age + "</p>");
    });
  }
});

5. 자바스크립트의 보안 정책과 외부 데이터 바인딩

브라우저에는 Same-Origin-Policy(동일 출처 정책)가 있다.

즉,

• 다른 도메인
• 다른 포트
• 다른 프로토콜

에서 직접 데이터를 요청하면 차단된다.

① CORS(Cross-Origin Resource Sharing)

서버에서 허용해야 외부 요청이 가능하다.

응답 헤더에 아래 코드 명시

Access-Control-Allow-Origin: *

또는 특정 도메인 지정

② JSONP(구버전 방식)

CORS 이전에는 JSONP를 사용했다.

$.ajax({
  url: "https://example.com/data",
  dataType: "jsonp"
});

현재는 거의 사용되지 않는다.