[기술질문] AJAX란 무엇인가요?

🙋🏻‍♀️ 기술 블로그의 가장 기본적이면서 중요한 첫 질문! 
AJAX란 무엇인가요? 
AJAX를 알아보면서, 꼬리 질문으로 다양한 개념을 알아보자! 

 

 

 

 

---

💁‍♀️ AJAX란?

AJAX는 서버와 클라이언트가 XML이나 JSON과 같은 데이터를 비동기적으로 교환하고 처리할 수 있도록 하는 웹 개발 기법

👀 XML이란?  데이터를 표시하고 전송하는 데 사용하는 데 사용되는 마크업 언어
👀 JSON이란?  데이터를 저장하고 전송하기 위한 경량의 데이터 형식
👀 비동기적이란?  일부 작업이 완료되는 것을 기다리지 않고, 즉시 다음 작업을 실행하는 것

 

 

💁‍♀️ AJAX 구성은?

AJAX를 구현하기 위해서는 보통 XMLHttpRequest 객체 또는 Fetch API가 사용됩니다. 
XMLHttpRequest 객체는 웹 서버와 비동기적으로 통신할 수 있게 해주는 API입니다. 
Fetch API는 네트워크 요청을 할 수 있는 javascript 인터페이스이며, 이는 클라이언트가 서버로 HTTP 요청을 보낼 수 있습니다. 요청을 보낸 후에는 서버로부터 받은 응답을 처리할 수 있습니다. 

👀 HTTP란?  서버와 클라이언트가 정보를 교환하는 프로토콜

 

 

💁‍♀️ AJAX 사용 예시

fetch('https://api.example.com/data', {
  method: 'GET', // GET 요청
})
.then(response => response.json())
.then(data => {
  // 요청 성공 시, 수행할 작업 작성
})
.catch(error => {
  // 요청 실패 시, 해당 오류 출력
  console.error('Error:', error);
})

👉🏻 해당 예시는 Fetch API를 사용한 예시이며, 표준 HTTP 메서드 중 'GET'을 통해 서버로 데이터를 요청합니다.
만약 GET 서버 요청을 성공하면 then 이후의 작업을 실행하고, 요청에 오류가 생기거나 실패할 경우에는 catch를 실행합니다. 
위의 예시처럼 클라이언트가 서버로 데이터를 요청할 수 있습니다. 

👀 표준 HTTP 메서드 종류
1️⃣ GET : 서버로 데이터를 요청하는 메서드로, 요청한 데이터를 가져와 응답합니다.
2️⃣ POST : 서버로 데이터를 전송하는 메서드로, 전송한 데이터의 처리 결과를 응답합니다. 
3️⃣ PUT : 서버로 데이터를 업데이트하는 메서드로, 해당 데이터를 저장하고 처리 결과를 응답합니다.
4️⃣ DELETE : 서버에 데이터를 삭제하는 메서드로, 해당 데이터를 삭제하고 처리 결과를 응답합니다. 

❗️ POST와 PUT의 구분 ➡️ POST는 데이터를 생성, PUT은 기존 데이터를 갱신(덮어 씌움)

 

 

💁‍♀️ AJAX 장점은?

✅ AJAX 기법을 통해 새로고침 없이 서버로부터 데이터를 받아올 수 있습니다. 
✅ 웹 페이지의 일부분만을 변경할 수 있습니다. (특정 부분만을 서버로부터 로딩)
✅ 불필요한 데이터 전송을 피하고, 서버로의 요청 수를 줄일 수 있으므로 서버 부하를 감소할 수 있습니다.

 

 

💁‍♀️ AJAX 단점은?

✅ 모든 웹 브라우저에서 동일하게 동작하지 않을 수 있습니다.
✅ AJAX는 비동기적인 통신을 사용하기 때문에, 통신의 순서나 타이밍을 제어하는 것이 복잡할 수 있습니다.
✅ 웹 페이지의 일부만 업데이트하기 때문에, 웹 브라우저의 히스토리 관리가 제대로 되지 않을 수 있습니다.