JS) AJAX 란?

🐤 AJAX?

AJAX는 Asynchronous JavaScript And XML의 약자로, 말 그대로 JavaScript와 XML을 이용한 비동기적 정보 교환 기법이다.

브라우저의 XMLHttpRequest를 이용해 전체 페이지를 새로 가져오지 않고도 페이지 일부만을 변경할 수 있도록 javascript를 실행해 서버에 데이터만을 별도로 요청한다.

➡️ 새로고침 없이 서버에서 데이터를 가져올 수 있음

데이터를 가져올 때마다 페이지를 새로고침하는 방식보다 부드럽게 동작하는 웹/앱을 구현할 수 있다.

확인용 예시 사이트 ⇒ AJAX

위 사이트에서 확인해보면,

• AJAX 가 적용되지 않은 사이트에서는, 페이지를 누를때마다 페이지가 새로고침되며 유튜브 영상이 초기화 되지만,

• AJAX가 적용된 사이트는 페이지를 눌러도 유튜브 영상은 계속해서 재생된다!!

🐥 AJAX 코드 작성법?

옛날 JS 방식 (XMLHttpRequest)

<script>
  var ajax = new XMLHttpRequest();
  ajax.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      console.log(ajax.responseText)
    }
  };
  ajax.open("GET", "https://Yun-Jinwoo.github.io/price.json", true);
  ajax.send();
</script>

• XMLHttpRequest 객체를 생성하여 서버와 HTTP 요청 주고받음

• onreadystatechange 이벤트를 통해 요청 상태를 확인하고,
  readyState == 4이면서 status == 200일 때 데이터를 처리

  • ❓readyState❓
    readyState는 요청의 현재 상태를 나타내며, 다음과 같은 값을 가진다

    • 0 (UNSENT): XMLHttpRequest 객체가 생성되었지만, 아직 open() 메서드가 호출되지 않은 상태.
    • 1 (OPENED): open() 메서드가 호출된 상태로, 요청이 초기화됨.
    • 2 (HEADERS_RECEIVED): 요청이 서버로 전송되었고, 응답 헤더가 수신된 상태.
    • 3 (LOADING): 응답 본문을 처리 중인 상태.
    • 4 (DONE): 요청이 완료되고 모든 데이터가 수신된 상태.

  • ❓status❓

    • status는 HTTP 응답 코드로, 서버에서 반환된 응답의 성공 여부를 나타낸다.

    • 200: 요청이 성공적으로 처리됨 (OK).

    • 400: 클라이언트 오류 (Bad Request).

    • 500: 서버 오류 (Internal Server Error).

• GET으로 데이터를 가져온 뒤 responseText로 출력

요즘 JS 방식 (Fetch API)

<script>
  fetch('https://Yun-Jinwoo.github.io/price.json')
    .then((response) => {
      if (!response.ok) {
        throw new Error('400 아니면 500 에러남');
      }
      return response.json();
    })
    .then((결과) => {
      console.log(결과);
    })
    .catch(() => {
      console.log('에러남');
    });
</script>

• Promise 기반의 fetch() 메서드를 사용하여 데이터를 가져옴
• response.ok를 이용해 HTTP 응답 상태를 확인
  • 상태 코드가 성공(200)이 아니면 에러 발생
• 첫 번째 then()에서 응답 객체를 JSON으로 변환
• 두 번째 then()에서 변환된 데이터를 처리
• 에러가 발생하면 catch() 블록에서 처리됨

외부 라이브러리 방식 (Axios 사용)

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.24.0/axios.min.js">
</script>

<script>
  axios.get('https://Yun-Jinwoo.github.io/price.json')
    .then((result) => {
      console.log(result.data);
    })
    .catch(() => {
      console.log('에러남');
    });
</script>

• 외부 라이브러리인 Axios를 활용해, HTTP 요청을 간단하게 처리
• axios.get() 을 사용하여 데이터를 가져옴
  • 성공하면 응답 데이터(result.data)를 출력
  • 실패하면 catch() 블록에서 에러를 처리