Ajax와 동기와 비동기의 차이

여러 프로젝트를 하면서 기획자랑 소통할때, 비동기와 동기에 대한 개념을 모르는 경우를 보면서 나 또한 아는것을 제대로 설명하고 소통하기 위해 개념 및 차이에 대해 제대로 정리해보고 싶어졌다.

 

💻 Ajax란?

*AJAX (Asynchronous JavaScript and XML)는 웹 페이지가 서버와 비동기적으로 소통할 수 있게 해주는 기술이다. 이 방식은 웹 페이지를 전체적으로 새로고침하지 않고도 데이터를 주고받을 수 있게 하여 사용자 경험을 향상시킨다. 특히, 실시간 데이터 업데이트가 필요한 경우 유용하게 사용된다.

 

💻 Ajax의 작동방식

AJAX는 클라이언트 측에서 XMLHttpRequest 객체나 Fetch API를 사용하여 서버에 요청을 보내고, 서버에서 데이터를 받아와 페이지의 일부만 갱신하는 방식으로 작동한다. 이 과정에서 페이지 전체를 다시 로드할 필요가 없기 때문에 사용자 인터페이스가 더욱 응답성 있게된다.

 

💻 비동기 AJAX 요청

요청을 보낸 후에도 다른 자바스크립트 코드가 실행될 수 있습니다. 서버의 응답이 도착했을 때, 지정한 콜백 함수가 호출되어 응답을 처리한다.

 

 

💻 사용 예시

 

• 실시간 검색 기능: 사용자가 입력할 때마다 서버에 요청을 보내 결과를 실시간으로 보여주는 검색 기능.
• 데이터 무한 스크롤: 사용자가 페이지를 스크롤할 때 추가 데이터를 로드하여 무한 스크롤을 구현.
• 비동기 데이터 제출: 폼 제출 시 전체 페이지를 새로고침하지 않고 서버에 데이터를 보냄.

jQuery를 사용한 비동기 AJAX요청

$.ajax({
    url: 'https://api.example.com/data',
    type: 'GET',
    success: function(data) {
        console.log('데이터 받음:', data);
        // 받은 데이터를 페이지에 반영하는 로직
    },
    error: function(error) {
        console.error('오류 발생:', error);
    }
});

 

 

Fetch API를 사용한 비동기 AJAX 요청

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
        console.log('데이터 받음:', data);
        // 받은 데이터를 페이지에 반영하는 로직
    })
    .catch(error => {
        console.error('오류 발생:', error);
    });

 

💻 동기와 비동기의 차이점과 AJAX의 역할

>> 동기 방식에서는 서버와 통신이 완료될 때까지 사용자가 아무 작업도 할 수 없다. 이로 인해 페이지가 응답하지 않거나 멈춘 것처럼 보일 수 있게된다. 비동기 방식인 AJAX는 이러한 문제를 해결한다. 사용자가 다른 작업을 할 수 있게 해, 사용자 경험을 향상시키는 역할을 한다고 볼 수 있다.

 

또한, AJAX는 단순히 서버로부터 데이터를 가져오는 것뿐만 아니라, 실시간으로 데이터를 서버에 보내거나 페이지 일부를 동적으로 업데이트하는 데 사용된다. 이러한 기능은 현대 웹 애플리케이션에서 매우 중요하며, 다양한 상호작용을 지원하는 데 필수적이라 볼 수 있다.