비동기 통신 Ajax와 Fetch API

출처:
https://king-ja.tistory.com/82

비동기 통신 Ajax와 Fetch API

 
 

ajax를 통해서 데이터를 가 져와서 페이지 이동없는 부드러운 UX를 만들고, 예시 코드 알려줘

Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)는 웹 애플리케이션에서 비동기적으로 데이터를 교환하고 웹 페이지의 일부를 동적으로 업데이트하는 프로그래밍 기법입니다. 여기에는 XMLHttpRequest 객체가 중요한 역할을 합니다. XMLHttpRequest 객체는 브라우저와 웹 서버 간에 데이터를 전송하기 위한 핵심적인 수단 중 하나입니다.

XMLHttpRequest 객체의 주요 역할은 다음과 같습니다:

비동기 통신 관리: XMLHttpRequest를 사용하여 브라우저는 페이지 전체를 새로 고치지 않고도 서버와 통신할 수 있습니다. 이는 웹 페이지의 일부분만 업데이트할 수 있게 하며 사용자에게 더 나은 사용자 경험을 제공합니다.

서버와의 데이터 교환: XMLHttpRequest를 통해 브라우저는 서버로 데이터를 보낼 수 있고, 서버는 클라이언트에게 데이터를 전송할 수 있습니다. 이를 통해 동적으로 웹 페이지를 업데이트하거나 필요한 데이터를 가져와서 화면에 표시할 수 있습니다.

이벤트 기반 프로그래밍: XMLHttpRequest는 비동기적으로 작동하며, 서버로부터 응답이 도착하면 이벤트를 발생시킵니다. 이를 통해 데이터가 도착하면 특정 동작을 수행하도록 프로그래밍할 수 있습니다.

다양한 데이터 형식 지원: 초기에는 XML을 주로 사용했지만 현재는 JSON이 더 일반적으로 사용됩니다. XMLHttpRequest는 여러 종류의 데이터 형식을 다룰 수 있으며, 특히 JSON 형식은 가볍고 파싱이 쉬워서 많이 활용됩니다.

아래는 간단한 예시입니다. 이 코드는 XMLHttpRequest를 사용하여 서버로부터 데이터를 비동기적으로 가져와서 처리하는 것을 보여줍니다. 이 예시에서는 JSON 형식의 데이터를 주고받는 것을 가정하고 있습니다.