[javascript] AJAX와 HTTP 요청

18 Dec 2023

javascript

AJAX란 무엇인가요?

AJAX는 “Asynchronous JavaScript and XML”의 약자로, 웹 페이지에서 비동기적으로 서버와 통신하기 위한 기술을 의미합니다. 이를 통해 페이지의 새로고침 없이 서버와 데이터를 주고받을 수 있어서 웹 애플리케이션의 사용자 경험을 향상시키는 데 사용됩니다.

AJAX를 이용한 HTTP 요청

AJAX를 사용하면 클라이언트 측에서 HTTP 요청을 생성하고 서버와 통신할 수 있습니다. 주로 XMLHttpRequest 객체나 최근에는 fetch API를 사용하여 HTTP 요청을 만들고 응답을 처리합니다.

다음은 XMLHttpRequest를 사용하여 GET 요청을 보내는 간단한 예제입니다.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.example.com/data', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();

위의 코드에서는 XMLHttpRequest 객체를 사용하여 GET 요청을 보냅니다. 응답이 도착하면 onreadystatechange 함수가 호출되어 응답 데이터를 처리합니다.

요약

AJAX를 통해 클라이언트 측에서 서버와 비동기적으로 통신할 수 있으며, 이를 이용하여 HTTP 요청을 생성하고 응답을 처리할 수 있습니다. 이를 통해 웹 애플리케이션의 동적인 동작을 구현할 수 있습니다.

이러한 기술은 모던 웹 애플리케이션의 개발에서 매우 중요한 역할을 하며, JavaScript를 이용한 웹 프론트엔드 개발에 필수적인 요소입니다.

참고문헌:

https://developer.mozilla.org/ko/docs/Web/Guide/AJAX/Getting_Started