{{위키데이터 속성 추적}}
{{다른 뜻|에이젝스}}
{{다른 뜻|아이아스}}
{{Infobox programming language
| name = AJAX
| logo = AJAX logo by gengns.svg
| title = Asynchronous JavaScript and XML
| released = 1999년 3월
| influenced by = [[자바스크립트]] 및 [[XML]]
| File extensions = .js
| File format = [[자바스크립트]]
}}
'''Ajax'''('''A'''synchronous [[자바스크립트|'''J'''avaScript]] '''a'''nd [[XML|'''X'''ML]], 에이잭스)는 비동기적인 [[웹 애플리케이션]]의 제작을 위해 아래와 같은 '''조합'''을 이용하는 [[월드 와이드 웹|웹]] 개발 기법이다.

* 표현 정보를 위한 [[HTML]] (또는 [[XHTML]]) 과 [[CSS]]
* 동적인 화면 출력 및 표시 정보와의 상호작용을 위한 [[DOM]], [[자바스크립트]]
* 웹 서버와 비동기적으로 데이터를 교환하고 조작하기 위한 [[XML]], [[XSLT]], [[XMLHttpRequest]] (Ajax 애플리케이션은 XML/XSLT 대신 미리 정의된 HTML이나 일반 텍스트, [[JSON]], [[JSON-RPC]]를 이용할 수 있다).

[[DHTML]]이나 [[LAMP]]와 같이 Ajax는 자체가 하나의 특정한 기술을 말하는 것이 아니며, 함께 사용하는 기술의 묶음을 지칭하는 용어이다. 실제로 [[AFLAX|AFLAC]]와 같이 사실상 Ajax에 바탕을 두고 있는 유사/복합 기술들이 속속 나타나고 있다.

Ajax 애플리케이션은 실행을 위한 플랫폼으로 위에서 열거한 기술들을 지원하는 [[웹 브라우저]]를 이용한다. 이것을 지원하는 브라우저로는 [[모질라 파이어폭스]], [[인터넷 익스플로러]], [[오페라 (웹 브라우저)|오페라]], [[사파리 (웹 브라우저)|사파리]], [[구글 크롬]] 등이 있다. 단, 오페라는 현재 XSL 포맷팅 객체와 XSLT 변환을 지원하지 않는다.<ref>{{웹 인용 |url=http://www.opera.com/docs/specs/ |제목=Opera: Web specifications support<!-- 봇이 붙인 제목 --> |확인날짜=2005-06-02 |보존url=https://archive.today/20120604/http://www.opera.com/docs/specs/ |보존날짜=2012-06-04 |url-status=dead }}</ref>

== 기존 기술과의 차이점 ==
[[파일:Ajax-vergleich-en.svg|섬네일|400px|전통적인 [[웹 애플리케이션]] 모델과 Ajax를 사용한 애플리케이션의 비교]]
기존의 [[웹 애플리케이션]]은 브라우저에서 [[폼]]을 채우고 이를 웹 서버로 제출(submit)을 하면 하나의 요청으로 웹 서버는 요청된 내용에 따라서 데이터를 가공하여 새로운 웹 페이지를 작성하고 응답으로 되돌려준다. 이때 최초에 폼을 가지고 있던 페이지와 사용자가 이 폼을 채워 결과물로써 되돌려 받은 페이지는 일반적으로 유사한 내용을 가지고 있는 경우가 많다. 결과적으로 중복되는 [[HTML]] 코드를 다시 한번 전송을 받음으로써 많은 대역폭을 낭비하게 된다. 대역폭의 낭비는 금전적 손실을 야기할 수 있으며 사용자와 대화(상호 반응)하는 서비스를 만들기 어렵게도 한다.

반면에 Ajax 애플리케이션은 필요한 데이터만을 웹서버에 요청해서 받은 후 클라이언트에서 데이터에 대한 처리를 할 수 있다. 보통 [[SOAP]]이나 [[XML]] 기반의 웹 서비스 프로토콜이 사용되며, 웹 서버의 응답을 처리하기 위해 클라이언트 쪽에서는 [[자바스크립트]]를 쓴다. [[웹 서버]]에서 전적으로 처리되던 데이터 처리의 일부분이 클라이언트 쪽에서 처리되므로 웹 브라우저와 웹 서버 사이에 교환되는 데이터량과 웹서버의 데이터 처리량도 줄어들기 때문에 애플리케이션의 응답성이 좋아진다. 또한 웹서버의 데이터 처리에 대한 부하를 줄여주는 일이 요청을 주는 수많은 컴퓨터에 대해서 일어나기 때문에 전체적인 웹 서버 처리량도 줄어들게 된다.

'''장점'''

* 페이지 이동없이 고속으로 화면을 전환할 수 있다.
* 서버 처리를 기다리지 않고, 비동기 요청이 가능하다.
* 수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다.
*플러그인 없이도 인터렉티브한 웹페이지 구현할 수 있다.

'''단점'''

* Ajax를 쓸 수 없는 브라우저에 대한 문제가 있다.
* HTTP 클라이언트의 기능이 한정되어 있다.
* 페이지 이동없는 통신으로 인한 보안상의 문제
* 지원하는 문자집합(Charset)이 한정되어 있다.
* 스크립트로 작성되므로 디버깅이 용이하지 않다.
* 요청을 남발하면 역으로 서버 부하가 늘 수 있음.
* [[동일-출처 정책]]으로 인해 다른 도메인과는 통신이 불가능하다.

== Ajax의 보급 ==
이것은 이미 존재하던 기술이었지만 2000년도 중반 이후로 인기를 끌기 시작했다. [[구글]]은 2004년에 [[Gmail]], 2005년에 [[구글 지도]] 등의 웹 애플리케이션을 만들기 위해 비동기식 통신을 사용했다. Ajax라는 용어는 공식적으로 AJAX: A new approach for a new application<ref>{{웹 인용 |url=http://www.adaptivepath.com/publications/essays/archives/000385.php |제목=adaptive path » ajax: a new approach to web applications<!-- 봇이 붙인 제목 --> |확인날짜=2006년 11월 7일 |보존url=https://web.archive.org/web/20061107032631/http://www.adaptivepath.com/publications/essays/archives/000385.php |보존날짜=2006년 11월 7일 |url-status=dead }}</ref> 기사에서 구글이 [[Google pages]]에서 사용한 기술에 기반하여 등장했다. 2006년 [[W3C]]는 공식적인 웹 표준을 만들기 위한 시도로 규격 초안을 발행했다.

현재 Ajax를 사용하는 웹 애플리케이션들이 급격히 늘어나고 있으며, 이는 부분적으로 이용할 수 있는 애플리케이션 툴킷(예: [[루비 온 레일즈|Ruby on Rails]], [[DWR]])이 늘어나 프로그래머들이 구현하기가 쉬워진 때문이다.

대한민국에서도 네이버와 다음등을 비롯한 웹 사이트에서 이 기술을 도입하고 있다.

== Ajax라는 용어에 대한 비판 ==
Ajax라는 용어에 대해서 비판이 있어 왔는데, [[어댑티브 패스]](Adaptive Path)의 컨설턴트는 이 조어를 만든 사람<ref>{{웹 인용 |url=http://news.com.com/2061-10798_3-5630188.html |제목=AJAX: Web 'shift' or business as usual? | News Blog - CNET News<!-- 봇이 붙인 제목 --> |확인날짜=2012년 7월 10일 |보존url=https://archive.today/20120710222051/http://news.com.com/2061-10798_3-5630188.html |보존날짜=2012년 7월 10일 |url-status=live }}</ref> 이 이미 있는 기법을 마케팅 수단(과 [[밈]])으로서 사용하고 있다고 주장했다.<ref>[http://www.25hoursaday.com/weblog/PermaLink.aspx?guid=018ea507-4a62-4493-b01b-321e3672d725 Dare Obasanjo aka Carnage4Life - SOA, AJAX and REST: The Software Industry Devolves into the Fashion Industry<!-- 봇이 붙인 제목 -->]</ref><ref>[http://www.fiftyfoureleven.com/weblog/news-rants-and-ephemera/on-ajax-and-marketing-technologies On Ajax and Marketing Technologies<!-- 봇이 붙인 제목 -->]</ref><ref>[http://developers.slashdot.org/article.pl?sid=05/02/23/1859222&tid=189&tid=95&tid=217&tid=8 Slashdot | Building Richly Interactive Web Apps with Ajax<!-- 봇이 붙인 제목 -->]</ref>.

Ajax 기술이 이전에는 일반적인 이름이 없었기 때문에 이 용어 자체가 발전이 될 수 있었다. 그러나 이 기술을 이용해 가장 특출한 애플리케이션들을 만든 사람 중 하나인 한 구글 엔지니어가 그들이 사용한 기술이 '자바스크립트'라고 간주한다는 얘기도 있다.<ref>{{웹 인용 |url=http://asia.cnet.com/news/software/0,39037051,39222174,00.htm |제목=Tech News, Blogs, Product Reviews & IT Resources - ZDNet Asia<!-- 봇이 붙인 제목 --> |확인날짜=2005년 6월 2일 |보존url=https://web.archive.org/web/20050605021840/http://asia.cnet.com/news/software/0,39037051,39222174,00.htm |보존날짜=2005년 6월 5일 |url-status=dead }}</ref>

Ajax는 소프트웨어 개발에 대한 새로운 접근방식이 아니다. 보다 높은 관점에서 Ajax는 [[MVC 패턴]]의 뷰와 컨트롤러에 해당하는 기술이며, 이런 방식은 이전의 프로그래밍 환경인 델파이, MFC, [https://web.archive.org/web/20170204183738/http://www.mp3-indir.gen.tr/ MP3], 비주얼 베이직, 오라클 ADF, 윈도 Forms 등에서 이미 많이 사용하고 있던 것이다. 예를 들어 WebDAV를 사용하는 마이크로소프트 아웃룩 웹 액세스와 브라우저에서 직접 웹 서비스를 이용하는 웹 기반의 ERP 시스템 P2plus 같은 것들이 해당한다. 그러나 이전에는 표준적인 통신 모델이 없었기 때문에, 이들은 모두 독자적인 확장을 이용한다.

Ajax의 새로운 양상은 [[마이크로소프트]]의 [[인터넷 익스플로러]]만을 고려하면 되었을 예전의 기술과는 달리 이 같은 애플리케이션을 이용할 수 있는 브라우저가 다양해 졌다는 점이다.

== Ajax와 접근성 ==
Ajax 사용에 있어서, Ajax 기술을 지원하지 않는 브라우저를 위한 대체물을 만드는 것은 거의 힘들다. 이 같은 한계는 [[WAI]] 접근성 지침에 거스르는 측면이 있다.

한편, 웹 개발자들은 때때로 Ajax를 단순히 웹 페이지의 일부분을 대체하기 위해 사용한다. 비 AJAX 사용자가 전체 페이지를 불러오는 것에 비해 Ajax 사용자는 페이지의 일부분만을 불러올 수가 있다. 이것으로 개발자들이 비 AJAX 환경에 있는 사용자의 접근성을 포함한 경험을 보호할 수 있으며, 적절한 브라우저를 이용하는 경우에 전체 페이지를 불러오는 일 없이 응답성을 향상시킬 수 있다.

== 웹 브라우저 ==
=== Ajax를 지원하는 웹 브라우저 ===

: 참고: 이 목록은 포괄적이며, 브라우저 특징에 따라서 Ajax 애플리케이션이 지원이 다를 수 있다.

* [[마이크로소프트]] [[인터넷 익스플로러]] 5.0 이상, 기타 [[인터넷 익스플로러]]를 기반으로 한 브라우저들 ([[맥 OS]] 버전은 미지원)
* [[게코 (레이아웃 엔진)|게코]] 기반 [[모질라]], [[모질라 파이어폭스]], [[시몽키]], 에피파니, [[갈레온]] 브라우저 그리고 [[넷스케이프]] 7.1 이상
* [[KHTML]] 3.2 이상, [[컹커러]] 3.2 이상 그리고 [[애플]] [[사파리 (웹 브라우저)|사파리]] 1.2 이상 포함
* [[오페라 (웹 브라우저)|오페라]] 브라우저 8.0 이상, [[오페라 (웹 브라우저)|오페라 모바일 브라우저]] 8.0 이상
* [[구글 크롬]]

=== Ajax를 지원하지 않는 웹 브라우저 ===
: 참고: 이 목록의 브라우저는 확실히 Ajax를 지원하지 않는다.
* [[오페라 (웹 브라우저)|오페라]] 7 이하
* [[마이크로소프트]] [[인터넷 익스플로러]] 4.0이하.
* 텍스트 기반의 브라우저 [[링크스 (웹 브라우저)|링크스]], [[w3m]]
* 시각장애인을 위한 브라우저
* 1997년 이전 브라우저

== 예제 ==
아래는 [[GET (HTTP)|GET]]을 사용하여 Ajax 요청을 하는 단순 예제이다.

get-ajax-data.js:

<syntaxhighlight lang="javascript">
// 클라이언트-사이드 스크립트

// Ajax 요청을 초기화합니다
var xhr = new XMLHttpRequest();
xhr.open('get', 'send-ajax-data.php');

// 요청의 상태 변화를 추적합니다
xhr.onreadystatechange = function(){
	if(xhr.readyState !== 4) return;
	// readyState 4: 완료

	if(xhr.status === 200) {
    // status 200: 성공
		console.log(xhr.responseText); // '반환된 텍스트'
	} else {
		console.log('에러: ' + xhr.status); // 요청 도중 에러 발생
	}
}
</syntaxhighlight>

send-ajax-data.php:

<syntaxhighlight lang="php">
<?php
// 서버-사이드 스크립트

// 내용의 형식을 설정합니다
header('Content-Type: text/plain');

// 데이터를 보냅니다
echo "반환된 텍스트";
?>
</syntaxhighlight>

=== jQuery 예제 ===

[[jQuery]]에서는 $.ajax를 사용하거나 요청 방식에 따라 $.get 또는 $.post를 사용한다.
<syntaxhighlight lang="javascript">
$.get('send-ajax-data.php').done(function(data) {
    console.log(data); //  '반환된 텍스트'
}).fail(function(data) {
    console.log('에러: ' + data); // 요청 도중 에러 발생
});
</syntaxhighlight>

== 같이 보기 ==
* [[액션스크립트]]
* [[코멧 (프로그래밍)]]
* [[HTTP/2]]
* [[Node.js]]
* [[웹소켓]]
* [[HTML5]]
* [[웹 프레임워크]]
* [[자바스크립트 라이브러리]]
== 각주 ==
<references/>

== 외부 링크 ==
{{위키공용분류}}
* [https://web.archive.org/web/20070928061225/http://www.redwiki.net/wiki/wiki.php/Ajax/Concept Ajax/Concept] RedWiki에 있는 Ajax의 개요 및 소개
* [http://blog.jjg.net/weblog/2005/08/ajax_vs_ajax.html Ajax vs. AJAX] {{웨이백|url=http://blog.jjg.net/weblog/2005/08/ajax_vs_ajax.html |date=20051208013816 }} Ajax 표기에 관한 Jesse의 의견
* [https://web.archive.org/web/20060328220834/http://www.ajaximpact.com/ Ajax Impact] Ajax Portal
* [http://www.ajaxian.com/ Ajaxian] Ajax 관련 논의를 위한 블로그
* [http://groups.google.com/group/AJAXKorea AJAXKorea Community] AJAX 커뮤니티 정보공유
* [http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=ajax&page=1 PHPSCHOOL Ajax] Tip&Tech, 기술문서, 뉴스등 정보교환과 기술논의를 위한 공간
* [https://codeclu.com/questions/48/ajax-는-무엇이고-어떻게-사용할-수-있나요 Codeclu Ajax]{{깨진 링크|url=https://codeclu.com/questions/48/ajax-%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%B4%EA%B3%A0-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%82%AC%EC%9A%A9%ED%95%A0-%EC%88%98-%EC%9E%88%EB%82%98%EC%9A%94 }} Ajax 사용 패턴 및 예제
* [http://api.jquery.com/category/ajax/ jQuery Ajax] jQuery Ajax 기술 문서

=== Ajax 프레임워크 ===
* [http://www.prototypejs.org Prototype] 널리 알려져 있는 AJAX 프레임워크
* [http://script.aculo.us script.aculo.us] Prototype을 기반으로 하는 여러 인터페이스 제공
* [http://www.jQuery.com jQuery] prototype만큼 많이 사용되는 AJAX 프레임워크
* [http://jqueryui.com/ JQuery UI] JQuery을 기반으로 하는 여러 인터페이스 제공
* [http://dojotoolkit.org dojo] 다양한 화면효과, 위젯등을 제공
* [https://web.archive.org/web/20080507204239/http://code.google.com/webtoolkit/ Google Web Toolkit] 구글에서 배포중인 AJAX 프레임워크
* [http://ajax.asp.net ASP.NET AJAX] MS에서 공식 개발된 ASP.NET 지원용 AJAX 프레임워크
* [http://developer.yahoo.com/yui YUI] Yahoo User Interface

{{웹 인터페이스}}
{{자바스크립트}}
{{전거 통제}}

[[분류:Ajax| ]]
[[분류:프로세스 간 통신]]
[[분류:웹 개발]]
[[분류:소프트웨어 구조]]
[[분류:웹 2.0 신조어]]