AJAX란 무엇인가?

💭 AJAX(Asynchronous JavaScript and XML)

AJAX는 JavaScript를 통해 서버와 비동기적으로 데이터 주고받는 기술입니다.

AJAX는 XML, JSON, HTML 등의 형식으로 서버와 데이터를 교환할 수 있습니다.

 

🧐 서버랑 비동기적으로 통신??

👉 서버

서버는 유저가 데이터를 요구하면 데이터를 보내주는 프로그램

원하는 데이터 URL로 get요청을 하면 서버가 데이터를 보내줌

 

👉 비동기적 통신

 비동기적이라는 의미는 요청과 응답이 서버로부터 도착할 때까지 기다리지 않고, 다른 작업을 계속할 수 있다는 것을 의미

AJAX는 XMLHttpRequest 객체나 Fetch API를 이용하여 서버와 통신하는데, 

사용자의 동작에 상관없이 웹 페이지의 다른 작업을 계속할 수 있도록 하고,

서버에서 데이터를 받아오는 동안 다른 코드를 실행할 수 있도록 합니다.

 

🧐 AJAX 요청 순서

👉 클라이언트에서 AJAX 요청을 보냅니다. (이때 XMLHttpRequest 객체나 Fetch API를 사용)

👉 서버는 해당 요청을 받아서 처리하고, 요청에 대한 응답을 생성합니다.

👉 서버는 클라이언트로 응답을 보냅니다.

👉 클라이언트는 받은 응답을 JavaScript를 사용하여 처리합니다. (일반적으로 JSON형식의 데이터를 받고, 해당 데이터를 동적으로 웹 페이지에 표시하거나 다른 작업을 수행합니다.

Fetch API로 데이터 요청하기 

<script>
  // Fetch API를 이용하여 AJAX 요청 보내는 함수
  function fetchData() {
    // AJAX 요청 보낼 URL
    const url = url주소
    
    //method부분은 기본 값이 GET이라서 get요청 시 작성 안 해도 됨,
    fetch(url, method:'GET')
    .then(response => {
      // 응답 상태 코드가 성공적인지 확인 ( 정확하게 에러 잡기)
      if (!response.ok) {
        throw new Error('Network response was not ok'); 
      }
      // 응답 데이터를 JSON 형식으로 파싱 하여 반환
      return response.json();
    })
    .then(data => {
      // 처리된 데이터를 이용하여 웹 페이지의 특정 부분 업데이트
      const resultDiv = document.getElementById('result');
      resultDiv.innerHTML = `<h1>${data.title}</h1><p>${data.content}</p>`;
    })
    .catch(error => {
      // 요청 실패 시 에러 처리
      console.error('Error:', error);
    });
  }
 
  // fetchData 함수를 호출하여 AJAX 요청 보내기
  fetchData();

</script>

 

🧐 AJAX의 장단점

👉 AJAX의 장점

  ➡ 속도와 성능 개선 : 필요한 데이터만 비동기적으로 가져오기 때문에 웹 애플리케이션의 성능이 향상되고, 전체 페이지를 로드하는 것보다 더 빠르게 데이터를 업데이트할 수 있습니다.

  ➡ 웹 애플리케이션의 동적 기능 구현 : 동적으로 데이터를 추가, 수정, 삭제할 수 있어서 다양한 기능을 웹 애플리케이션에 추가할 수 있습니다. 

  ➡ 서버 부담 감소 : 필요한 데이터만 가져오기 때문에 서버 부하가 감소합니다.(서버 리소스를 효율적으로 사용가능)

 

👉 AJAX의 단점

  ➡ 보안 문제 : AJAX요청은 동일 출처 정책에 따라 보안상의 제약을 받기 때문에 서로 다른 도메인으로 요청을 보내려면 CORS를 지원하는 서버 설정이 필요합니다.

  ➡ 검색 엔진 최적화(SEO) 문제 : 모든 브라우저에서 AJAX를 지원하는 것이 아니기 때문에 브라우저 호환성을 고려해서 코드를 짜야합니다.

  ➡ 디버깅의 어려움 : AJAX는 비동기적으로 동작하기 때문에 디버깅이 어려울 수 있습니다. 데이터 요청과 응답의 순서나 타이밍을 잡기가 어려울 수 있으며, 오류가 발생한 경우에는 브라우저 개발자 도구를 활용하여 디버깅을 수행해야 합니다.