ajax는 무엇인가요

• ajax는 Asynchronous Javascript And Xml의 줄임말임
  • 서버에 GET 요청을 날려서, 웹페이지에서 수정할 일부 내용에 대한 데이터만 받아서 업데이트
  • 따라서 새로운 데이터가 들어올 때마다 페이지 전체를 새로고침할 필요가 없고, 동적으로 해당 부분만 업데이트 가능
    
    
• 이름이 시사하듯이, ajax request는 비동기 방식으로 이루어짐.

XML이 뭔가요

<?xml version="1.0" encoding="UTF-8"?>
<book>
  <title>XML 입문</title>
  <author>홍길동</author>
  <year>2024</year>
  <price>25000</price>
</book>

• XML은 eXtensible Markup Language의 줄임말임

  • 어렵게 생각할 건 없고, JSON처럼 데이터 주고받는 형식이라고 생각하면 됨

• ajax에서 반드시 XML 형식으로 데이터를 주고받을 필요는 없고, JSON, HTML 등 다양한 형식 가능

---

예시 - XML 활용

<button id="loadData">데이터 불러오기</button>

• 예를 들어서 이런 버튼이 html에 있다고 치고

document.getElementById('loadData').addEventListener('click', function() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var data = JSON.parse(xhr.responseText);
            document.getElementById('result').innerHTML = 
                '<p>이름: ' + data.name + '</p>' +
                '<p>나이: ' + data.age + '</p>' +
                '<p>직업: ' + data.job + '</p>';
        }
    };
    xhr.open('GET', 'https://api.example.com/data', true);
    xhr.send();
});

• document.getElementById('loadData') 먼저 getElementById를 통해 해당 버튼 가지고와서
• .addEventListener('click', addEventLinstener('click')으로 클릭 액션 확인 후
• XMLHttpRequest()를 이용해 XML request 처리할 변수 생성
• xhr.onreadystatechange 이 부분을 통해 xhr에 변화가 생긴 후에 비동기적으로 처리할 것들을 뒤에 함수 형식으로 쓸 수 있음
  • 함수 안에 중요한 두 가지가 있는데
    • xhr.readyState === 4 : readyState는 XMLHttpRequest의 현재 상태를 나타내며, 값이 4일 때는 요청이 완료되었음을 의미함.
      • 0: 초기화 안 됨 , 1: 서버 연결됨 , 2: 요청 수신됨 , 3: 요청 처리 중 , 4: 요청 처리 완료
    • xhr.status === 200 : HTTP 응답 상태를 나타내는 부분. 200이면 ok라는 것.
      • 404: Not Found (리소스를 찾을 수 없음) , 500: Internal Server Error (서버 오류) , 403: Forbidden (접근 거부)

---

jQuery랑 같이 쓰기

요즘은 잘 안 쓰지만, jQuery라는 라이브러리를 활용해서 ajax에 붙여서 쓰면 가독성이 매우 좋아짐.

$.ajax({
    url: 'https://api.example.com/data',
    method: 'GET',
    dataType: 'json',
    success: function(data) {
        $('#result').html('<p>이름: ' + data.name + '</p>' +
                          '<p>나이: ' + data.age + '</p>' +
                          '<p>직업: ' + data.job + '</p>');
    },
    error: function(xhr, status, error) {
        console.error('Ajax 요청 실패:', error);
    }
});

• 코드를 보면 {} bracket 안에 url, method, dataType 등을 쉽게 정의할 수 있음.
  • success 시 어떤 작업을 수행할지, error 발생 시 어떻게 처리할지 등을 정의함.

---

fetchAPI

조금 더 현대적인(?) 방식으로는 fetchAPI 방식을 사용하는 것임.

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('네트워크 응답이 올바르지 않습니다');
    }
    return response.json();
  })
  .then(data => {
    document.getElementById('result').innerHTML = 
      `<p>이름: ${data.name}</p>
       <p>나이: ${data.age}</p>
       <p>직업: ${data.job}</p>`;
  })
  .catch(error => {
    console.error('Fetch 에러:', error);
  });

• 보면, Promise에서 사용하는 문법들(.then, .catch) 등을 통해 데이터를 처리할 수 있음. 따라서, async/await 문법으로도 사용 가능.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('네트워크 응답이 올바르지 않습니다');
    }
    const data = await response.json();
    document.getElementById('result').innerHTML = 
      `<p>이름: ${data.name}</p>
       <p>나이: ${data.age}</p>
       <p>직업: ${data.job}</p>`;
  } catch (error) {
    console.error('Fetch 에러:', error);
  }
}

fetchData();

• fetchAPI는 내장 API라서 추가 설치 필요 없음.

이 외에도 axios 등의 라이브러리가 있음...

---

출처 1: https://mundol-colynn.tistory.com/75
출처 2: https://www.elancer.co.kr/blog/view?seq=182
출처 3: https://www.w3schools.com/js/js_ajax_intro.asp
출처 4: https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch