AJAX, XMLHttpRequest 개념 정리

💻 Frontend/JS, TS

AJAX, XMLHttpRequest 개념 정리

hjinn0813 2024. 10. 11. 15:25

728x90

Axios의 특징을 서술하며 언급되었던 XMLHttpRequest와 AJAX에 대해서 개념을 정리해본다.

※ Axios 기본 개념 정리 - https://hjinn0813.tistory.com/127

Axios 기본 개념 정리

Axios란?자바스크립트(JS)에서 HTTP 요청을 보내고 데이터를 받아오기 위한 Promise 기반 HTTP 클라이언트 라이브러리.브라우저와 Node.js 환경에서 모두 사용할 수 있어서 React, Vue와 같은 프레임워크에

hjinn0813.tistory.com

XMLHttpRequest

웹 브라우저에서 서버와 비동기적으로 데이터를 주고받을 수 있도록 해주는 JavaScript 객체.

AJAX(Asynchronous JavaScript and XML) 기술의 핵심으로, 웹페이지를 다시 로드하지 않고도 서버와 데이터를 주고받을 수 있게 한다. 주로 웹 애플리케이션에서 서버로 데이터를 보내거나, 서버로부터 데이터를 가져와 페이지를 동적으로 업데이트할 때 사용된다.

👉 ex) 검색 자동 완성 기능, 댓글 작성 후 페이지 새로고침 없이 댓글을 보여줄 때, 데이터(예: 차트, 통계 등) 실시간 업데이트

XMLHttpRequest 특징

비동기 통신: 웹페이지를 새로 고치지 않고, 서버와 비동기적으로 데이터를 주고받을 수 있다.
다양한 데이터 형식 지원: XML 외에도 JSON, HTML, 일반 텍스트 등 다양한 형식의 데이터를 주고받을 수 있다.
HTTP 요청: GET, POST, PUT, DELETE 등 다양한 HTTP CRUD 메서드를 사용할 수 있다.
CORS 지원: 다른 도메인 간의 요청 허용 여부를 브라우저가 결정하는 CORS 정책을 따른다.
동기/비동기 모드: 비동기 모드로 주로 사용되지만, 필요한 경우 동기 요청도 가능하다.

💡 CORS (Cross-Origin Resource Sharing)
교차 출처 리소스 공유.
웹 브라우저에서 다른 출처의 요청을 허용하도록 서버 응답 방식을 설정하는 메커니즘.
자세한 설명은 아래 링크 확인!
https://hjinn0813.tistory.com/129

CORS 개념 정리

CORS란?Cross-Origin Resource Sharing.영어를 직역하자면, 출처가 다른 리소스를 공유하는 정책.웹 브라우저에서 Cross-Origin(다른 출처) 요청을 허용하도록 서버 응답 방식을 설정하는 메커니즘. 한 출처(Or

hjinn0813.tistory.com

XMLHttpRequest 장단점

장점

- 페이지 리로드 없이 서버와 통신 가능: 사용자가 웹페이지를 새로 고칠 필요 없이 서버와 데이터를 주고받을 수 있다.
- 비동기 처리: 페이지의 다른 작업을 방해하지 않고, 서버와 데이터를 주고받을 수 있다.
- HTTP 메서드 지원: 다양한 HTTP 메서드(GET, POST 등)를 통해 서버에 요청할 수 있다.
- 다양한 데이터 형식 지원: XML, JSON, 텍스트 등 다양한 형식으로 서버와 데이터를 주고받을 수 있다.

단점

- 복잡한 사용법: 현대의 API(예: fetch나 Axios)에 비해 코드가 상대적으로 복잡하고 가독성이 떨어질 수 있다. 예를 들어, onreadystatechange 이벤트 리스너를 사용해야 하고, 상태 코드 등을 직접 처리해야 한다.
- 구식 API: 최신 표준에 비해 구식이며, 동기적 방식으로 사용할 경우 웹페이지가 멈추는 문제가 생길 수 있다.
- CORS 제약: 다른 도메인 간의 요청(CORS)을 처리할 때 설정이 복잡할 수 있다.

XMLHttpRequest 준비상태 코드(readyState)

값	설명
0	UNSENT XMLHttpRequest가 아직 초기화되지 않음.
1	OPENED open() 메서드가 호출되어 연결 준비됨.
2	HEADERS_RECEIVED 서버가 요청을 받아서 응답 헤더를 보냄.
3	LOADING 응답 데이터를 받는 중.
4	DONE 요청이 완료되어 모든 데이터가 도착함.

AJAX

Asynchronous JavaScript and XML.

웹 페이지를 다시 로드하지 않고 서버와 비동기적으로 데이터를 주고받을 수 있는 JS 라이브러리.

언어가 아니라, 여러 기술들을 조합해 데이터를 동적으로 주고받는 방식을 의미한다. 주로 JS의 XMLHttpRequest 객체를 사용해 서버와 통신하며, XML뿐만 아니라 JSON이나 HTML 등 다양한 데이터 형식을 사용할 수 있다.

AJAX의 구성 요소

HTML, CSS : 웹 페이지의 구조와 스타일을 정의.
JavaScript : 서버와의 통신을 제어.
XMLHttpRequest : 서버와 데이터를 주고받기 위한 JavaScript 객체.
XML, JSON, HTML : 서버로부터 응답받는 데이터 형식.

→ 이를 보면 알 수 있듯이, 주로 순수 HTML/CSS/JS로 만든 웹 페이지에서 많이 사용되었던 기술이다. 비동기적으로 서버와 통신할 수 있어서 아래와 같은 상황에서 주로 쓰였다.

실시간 검색: 검색창에 입력할 때마다 관련된 검색어를 실시간으로 불러오는 기능.
동적 콘텐츠 로딩: 스크롤을 내릴 때마다 더 많은 콘텐츠를 불러오는 무한 스크롤.
양식 제출 후 응답 처리: 폼 데이터를 제출하고 페이지를 새로 고치지 않고 응답을 받아 처리할 때.
댓글, 리뷰 등: 사용자 입력에 대한 응답을 실시간으로 반영하는 UI (댓글 작성 후 페이지 새로고침 없이 반영).

AJAX의 특징

비동기 데이터 통신: 페이지를 새로고침하지 않고도 서버와 통신할 수 있어서, UX를 방해하지 않고 서버 부하를 줄여준다.
데이터 포맷 유연성: 초기에는 XML을 많이 사용했지만, 현재는 주로 JSON을 사용해 데이터를 주고받는다.
실시간 페이지 업데이트: 서버에서 수신한 데이터를 DOM 조작으로 즉시 페이지에 반영할 수 있다.
동기/비동기 지원: 기본적으로 비동기적이지만, 동기 방식도 지원한다.

AJAX 장단점

장점

- 페이지 리로드 없이 데이터 갱신: 전체 페이지를 다시 로드할 필요 없이, 필요한 부분만 서버와 통신해 업데이트할 수 있다.
- 빠른 사용자 경험: 서버로부터 필요한 데이터만 가져오고, 페이지를 다시 불러오지 않아 성능이 향상된다.
- 서버 부하 감소: 전체 페이지가 아닌 필요한 데이터만 주고받으므로, 서버 부하를 줄일 수 있다.
- 호환성: 대부분의 브라우저에서 지원되며, 다양한 서버 기술과 함께 사용할 수 있다.

단점

- SEO 문제: 비동기적으로 데이터를 불러오면, 검색 엔진 크롤러가 데이터를 읽지 못해 SEO가 어려울 수 있다.
- 보안 문제: AJAX 요청은 클라이언트에서 직접 수행되므로, 민감한 데이터가 노출되거나 악용될 수 있어서 추가적인 보안 조치가 필요하다.
- 브라우저 호환성 문제: 구형 브라우저에서는 XMLHttpRequest나 AJAX 기능이 지원되지 않을 수 있다.
- 코드 복잡성: AJAX는 비동기적으로 데이터를 처리하므로, 복잡한 로직을 다루는 경우 코드의 유지보수가 어려울 수 있다.

AJAX 예시 코드 (GET 요청)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX Example</title>
    <script>
        function loadData() {
            // XMLHttpRequest 객체 생성 및 비동기 get 요청 설정
            const xhr = new XMLHttpRequest();
            xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);

            // 서버 응답 처리 이벤트 핸들러 설정 (콜백함수)
            xhr.onload = function() {
                if (this.readyState == 4 && this.status === 200) {
                    const data = JSON.parse(this.responseText);
                    document.getElementById('output').innerHTML = `<h3>${data.title}</h3>`;
                } else {
                    console.error('Error occurred');
                }
            };

            xhr.onerror = function() {
                console.error('Request error');
            };

            xhr.send();
        }
    </script>
</head>
<body>
    <h1>AJAX Example</h1>
    <button onclick="loadData()">Load Data</button>
    <div id="output"></div> <!-- 데이터를 출력할 곳 -->
</body>
</html>

이 코드를 해석하자면,

1. XMLHttpRequest 객체 생성하고 GET 요청을 비동기적으로 보낸다.

2. 서버 응답 상황을 이벤트 핸들러로 정의.

- onload는 데이터 가져오기 성공할 경우, 만약 서버 준비상태 코드가 4이고 HTTP 상태코드가 200이라면, JSON 데이터를 파싱하고 DOM 요소에 결과를 출력. 아니면 'Error occurred'라는 메시지를 화면에 띄운다.

- onerror는 데이터 가져오기 실패할 경우, 콘솔에 에러 메시지를 출력한다.

→ AJAX는 콜백함수를 기반으로 코드를 처리하고, 여기서의 function() 부분이 콜백함수.

3. 이렇게 서버에서 응답을 어떻게 처리할지 설정한 후에, send() 메서드로 요청을 보낸다.

💡 Ajax, Axios, Fetch API
AJAX는 JS의 XMLHttpRequest 객체를 기반으로 동작하는 비동기 통신 라이브러리로, 주로 콜백함수를 통해 비동기 처리를 하기 때문에 코드가 길고 복잡해질 수 있다. 특히 여러 개의 요청을 순서대로 처리해야 할 때는 '콜백 지옥' 문제가 발생해 유지보수가 어려워질 수 있다.
반면에 Axios와 Fetch는 비동기 통신을 훨씬 간단하게 처리할 수 있는 현대적인 API이다. 이들은 Promise를 사용해 간단한 문법으로 직관적인 코드 작성이 가능하여, 가독성과 유지보수성 측면에서 더 우수하다. 특히 Axios는 요청 헤더 설정이나 에러 처리 등의 기능이 기본적으로 내장되어 있어서 복잡한 요청 처리에 유리하다. 최근에도 AJAX 자체는 여전히 사용되지만, XMLHttpRequest 대신 Axios나 Fetch 같은 현대적인 API를 사용해 구현하는 경우가 많다.

/* Ajax + fetch */
function loadData() {
    // 비동기 GET 요청
    fetch('https://jsonplaceholder.typicode.com/todos/1')
        .then(resp => {
            // 응답 상태 체크
            if (!resp.ok) {
                throw new Error('Network response was not ok');
            }
            return resp.json(); // JSON 형식으로 변환
        })
        .then(data => {
            // 데이터 처리
            document.getElementById('output').innerHTML = `<h3>${data.title}</h3>`;
        })
        .catch(error => {
            console.error('Error occurred:', error);
        });
}

// ============================================
/* Ajax + Axios */
function loadData() {
    // 비동기 GET 요청
    axios.get('https://jsonplaceholder.typicode.com/todos/1')
        .then(resp => {
            // 데이터 처리
            document.getElementById('output').innerHTML = `<h3>${resp.data.title}</h3>`;
        })
        .catch(error => {
            console.error('Error occurred:', error);
        });
}

※ 참고하면 좋은 글 - https://www.elancer.co.kr/blog/detail/182?seq=182

Ajax는 활력 있는 웹페이지를 만들기 위한 필수 기능 I 이랜서

웹페이지에서 역동적인 느낌을 전하기 위해 동적 기능을 살리는 웹페이지를 만드는데 사용하는 'Ajax'의 특징과 사용법에 대해 IT 프리랜서 플랫폼 '이랜서'에서 알려드립니다! I ajax, jquery, ajax 사

www.elancer.co.kr

728x90

저작자표시 비영리 변경금지