AJAX 편집하기

'''Asynchronous JavaScript and XML'''

== 개요 ==
'''AJAX'''(에이잭스)는 '''Asynchronous JavaScript and XML'''의 줄임말로, 웹페이지를 새로고침하지 않고도 서버와 데이터를 주고받을 수 있게 해주는 웹 개발 기술이다. 

~~사실 요즘엔 XML보다 JSON을 더 많이 쓰지만 이름은 그대로다~~

2005년 제시 제임스 개럿(Jesse James Garrett)이 처음 명명했으며, [[Web 2.0]] 시대의 핵심 기술 중 하나로 자리잡았다.

== 상세 ==

=== 작동 원리 ===
기존의 웹 방식은 사용자가 어떤 동작을 할 때마다 서버에 요청을 보내고, 서버가 완전히 새로운 HTML 페이지를 응답으로 보내주는 방식이었다. 이는 다음과 같은 문제점들이 있었다:

* 페이지 전체가 다시 로드되어 '''깜빡임''' 현상 발생
* 불필요한 데이터 전송으로 인한 '''대역폭 낭비'''
* 사용자 경험(UX) 저하

AJAX는 이러한 문제를 해결하기 위해 다음과 같은 방식으로 작동한다:

# 사용자가 특정 동작 수행 (버튼 클릭, 입력 등)
# JavaScript가 '''XMLHttpRequest''' 객체를 생성
# 백그라운드에서 서버에 '''비동기''' 요청 전송
# 서버가 필요한 데이터만 응답 (전체 페이지가 아닌)
# JavaScript가 받은 데이터로 페이지의 '''일부분만''' 업데이트

=== 구성 요소 ===
AJAX는 사실 하나의 기술이 아니라 여러 기술들의 조합이다:

* '''[[JavaScript]]''' - 클라이언트 사이드 스크립팅
* '''[[XMLHttpRequest]]''' - 서버와의 비동기 통신을 담당하는 객체
* '''[[DOM]]''' (Document Object Model) - 페이지 요소 조작
* '''[[CSS]]''' - 스타일링 및 시각적 효과
* '''[[XML]]''' 또는 '''[[JSON]]''' - 데이터 교환 형식
* '''[[HTML]]''' / '''[[XHTML]]''' - 마크업

~~요즘은 거의 JSON이 XML을 대체했지만 이름은 여전히 AJAX다~~

== 특징 ==

=== 장점 ===
* '''페이지 새로고침 없음''' - 사용자 경험 크게 향상
* '''빠른 응답속도''' - 필요한 데이터만 전송하므로 효율적
* '''서버 부하 감소''' - 전체 페이지가 아닌 일부 데이터만 처리
* '''동적인 웹페이지''' 구현 가능
* '''실시간 업데이트''' 가능 (채팅, 알림 등)

=== 단점 ===
* '''브라우저 호환성''' 문제 ~~IE는 언제나 문제다~~
* '''SEO 최적화 어려움''' - 검색엔진이 동적 콘텐츠를 인덱싱하기 어려움
* '''뒤로가기 버튼''' 문제 - 브라우저 히스토리 관리 복잡
* '''JavaScript 비활성화''' 시 동작하지 않음
* '''디버깅의 어려움''' - 비동기 처리로 인한 복잡성

== 예제 코드 ==

=== 순수 JavaScript ===
<pre>
// XMLHttpRequest 객체 생성
var xhr = new XMLHttpRequest();

// 요청 설정
xhr.open('GET', '/api/data', true);

// 응답 처리
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        document.getElementById('result').innerHTML = data.message;
    }
};

// 요청 전송
xhr.send();
</pre>

=== jQuery 사용 ===
<pre>
$.ajax({
    url: '/api/data',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        $('#result').html(data.message);
    },
    error: function() {
        alert('요청 실패!');
    }
});

// 더 간단한 방법
$.get('/api/data', function(data) {
    $('#result').html(data.message);
});
</pre>

=== 현대적인 방법 (Fetch API) ===
<pre>
fetch('/api/data')
    .then(response => response.json())
    .then(data => {
        document.getElementById('result').innerHTML = data.message;
    })
    .catch(error => {
        console.error('Error:', error);
    });

// async/await 사용
async function getData() {
    try {
        const response = await fetch('/api/data');
        const data = await response.json();
        document.getElementById('result').innerHTML = data.message;
    } catch (error) {
        console.error('Error:', error);
    }
}
</pre>

== 활용 사례 ==

=== 일반적인 사용 예 ===
* '''검색 자동완성''' - 구글, 네이버 등의 검색창
* '''무한 스크롤''' - 페이스북, 인스타그램 피드
* '''실시간 채팅''' - 카카오톡 웹버전, 디스코드 등
* '''폼 검증''' - 실시간 아이디 중복 확인
* '''장바구니''' - 페이지 이동 없이 상품 추가/제거
* '''좋아요/북마크''' - 소셜미디어의 즉시 반응
* '''주식/환율 정보''' - 실시간 가격 업데이트

=== 대표적인 AJAX 사이트들 ===
* '''[[Gmail]]''' - 이메일 확인과 전송을 페이지 새로고침 없이
* '''[[Google Maps]]''' - 지도 이동 시 해당 부분만 로드
* '''[[YouTube]]''' - 댓글 로드, 추천 영상 등
* '''[[Netflix]]''' - 콘텐츠 미리보기, 추천 시스템
* '''[[트위터]]''' - 실시간 트윗 업데이트

== 보안 고려사항 ==

=== CSRF (Cross-Site Request Forgery) ===
AJAX 요청도 CSRF 공격의 대상이 될 수 있다. 따라서 다음과 같은 보안 조치가 필요하다:
* '''CSRF 토큰''' 사용
* '''SameSite 쿠키''' 설정
* '''Referer 헤더''' 검증

=== CORS (Cross-Origin Resource Sharing) ===
다른 도메인으로의 AJAX 요청은 브라우저의 '''동일 출처 정책'''에 의해 제한된다. 이를 해결하기 위해:
* 서버에서 적절한 '''CORS 헤더''' 설정 필요
* 또는 '''JSONP''' 같은 우회 방법 사용 ~~하지만 JSONP는 보안상 권장하지 않는다~~

=== XSS (Cross-Site Scripting) ===
서버로부터 받은 데이터를 DOM에 직접 삽입할 때 XSS 공격에 노출될 수 있다:
* 입력 데이터 '''검증''' 및 '''이스케이핑''' 필수
* '''innerHTML''' 대신 '''textContent''' 사용 권장

== 관련 기술 ==

=== XMLHttpRequest 대안들 ===
* '''[[Fetch API]]''' - 모던 브라우저의 표준
* '''[[Axios]]''' - 인기 있는 HTTP 클라이언트 라이브러리
* '''[[jQuery.ajax()]]''' - jQuery의 AJAX 메서드

=== 프레임워크에서의 AJAX ===
* '''[[React]]''' - useEffect + fetch 또는 axios
* '''[[Vue.js]]''' - axios 또는 Vue Resource
* '''[[Angular]]''' - HttpClient 서비스
* '''[[Svelte]]''' - 내장 fetch 사용

== 현재 상황과 미래 ==

=== Fetch API의 등장 ===
XMLHttpRequest의 복잡함을 해결하기 위해 '''Fetch API'''가 등장했다. Promise 기반으로 더 직관적이고 모던한 API를 제공한다.

=== 서버 사이드 렌더링 (SSR) ===
'''[[Next.js]]''', '''[[Nuxt.js]]''' 등의 프레임워크에서는 SEO 문제를 해결하기 위해 서버 사이드 렌더링과 AJAX를 적절히 조합해서 사용한다.

=== GraphQL ===
REST API의 한계를 극복하기 위해 '''[[GraphQL]]'''이 등장했고, 이 역시 AJAX를 기반으로 동작한다.

== 트리비아 ==
* AJAX라는 용어가 만들어지기 전에도 해당 기술들은 이미 존재했다. 다만 통칭할 이름이 없었을 뿐.
* '''Microsoft'''가 1999년 Internet Explorer 5에서 XMLHttpRequest를 처음 도입했다. ~~그때는 Microsoft가 혁신적이었다~~
* '''Gmail'''의 성공이 AJAX 기술의 대중화에 큰 역할을 했다.
* 현재 모든 주요 브라우저에서 AJAX를 지원한다.

== 참고 자료 ==
* [https://developer.mozilla.org/ko/docs/Web/Guide/AJAX MDN Web Docs - AJAX]
* [https://www.w3schools.com/js/js_ajax_intro.asp W3Schools - AJAX Introduction]

== 관련 문서 ==
* [[JavaScript]]
* [[XMLHttpRequest]]
* [[JSON]]
* [[REST API]]
* [[Web 2.0]]
* [[SPA (Single Page Application)]]
* [[Fetch API]]
* [[CORS]]

[[분류:웹 기술]]
[[분류:JavaScript]]
[[분류:프로그래밍]]