Ajax

3. 기존 기술과의 차이점

3. 1. 장점

• 페이지 이동없이 고속으로 화면을 전환할 수 있다.
• 웹 서버 처리를 기다리지 않고, 비동기 요청이 가능하다.
• 수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다.
• 플러그인 없이도 상호작용적인 웹 페이지를 구현할 수 있다.^[18][19][20]

3. 2. 단점

• Ajax를 사용할 수 없는 브라우저에 대한 대응이 필요하다. (한국에서는 과거 액티브X 사용 제한 등으로 인해 문제가 되었으나, 현재는 대부분의 브라우저가 Ajax를 지원한다.)
• HTTP 클라이언트의 기능이 한정되어 있다.
• 페이지 이동 없는 통신으로 인해 보안 문제가 발생할 수 있다.
• 지원하는 문자 집합(Charset)이 한정되어 있다.
• 스크립트로 작성되므로 디버깅이 용이하지 않다.
• 요청을 남발하면 역으로 서버 부하가 늘 수 있다.
• 동일-출처 정책으로 인해 다른 도메인과의 통신이 불가능하다. (최근에는 CORS를 통해 해결 가능)

4. Ajax의 구성 기술

제시 제임스 개럿은 자신의 기사에서 Ajax를 구성하는 기술로 다음을 제시했다.^[11][2]

• 표현을 위한 HTML(또는 XHTML) 및 CSS
• 데이터의 동적 표시 및 상호 작용을 위한 DOM(문서 객체 모델)
• 데이터 교환을 위한 XML 및 XML 조작을 위한 XSLT
• 비동기 통신을 위한 XMLHttpRequest 객체
• 이러한 기술들을 통합하는 자바스크립트

5. 웹 브라우저 지원 현황

웹 브라우저의 Ajax 지원은 크게 두 가지로 나눌 수 있다.

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

마이크로소프트 인터넷 익스플로러 5.0 이상^[3][4][5] (현재는 마이크로소프트 엣지 사용 권장), 게코 기반 브라우저 (모질라, 모질라 파이어폭스, 시몽키, 에피파니, 갈레온 등), KHTML 기반 컹커러, 애플 사파리, 오페라 8.0 이상, 구글 크롬

'''Ajax를 지원하지 않는 웹 브라우저'''

오페라 7 이하^[3], 마이크로소프트 인터넷 익스플로러 4.0 이하^[3], 텍스트 기반 브라우저 (링크스, w3m)^[3], 시각 장애인을 위한 브라우저 (일부 지원)^[3], 1997년 이전 브라우저^[3]

5. 1. Ajax를 지원하는 웹 브라우저

• 마이크로소프트 인터넷 익스플로러 5.0 이상^[3][4][5] (현재는 마이크로소프트 엣지 사용 권장)
• 게코 기반 모질라, 모질라 파이어폭스, 시몽키, 에피파니, 갈레온
• KHTML 기반 컹커러, 애플 사파리
• 오페라 8.0 이상
• 구글 크롬

5. 2. Ajax를 지원하지 않는 웹 브라우저

• 오페라 7 이하^[3]
• 마이크로소프트 인터넷 익스플로러 4.0 이하^[3]
• 텍스트 기반 브라우저 (링크스, w3m)^[3]
• 시각 장애인을 위한 브라우저 (일부 지원)^[3]
• 1997년 이전 브라우저^[3]

6. Ajax와 접근성

Ajax 기술을 지원하지 않는 브라우저 사용자들을 위한 대체 수단을 제공하는 것은 매우 어렵다. 이러한 한계는 WAI 접근성 지침에 어긋나는 면이 있다.^[1]

하지만 웹 개발자들은 때때로 웹 페이지의 일부분만 바꾸기 위해 Ajax를 사용하기도 한다. Ajax를 사용하지 않는 사용자는 전체 페이지를 불러와야 하지만, Ajax 사용자는 페이지의 일부분만 불러올 수 있다. 이를 통해 개발자들은 Ajax를 지원하지 않는 환경의 사용자들이 웹 페이지에 접근하는 것을 포함한 경험을 보호하면서도, 적절한 브라우저를 사용하는 경우에는 전체 페이지를 불러오지 않고도 응답성을 높일 수 있다.^[1]

7. Ajax 프레임워크

Ajax 개발의 복잡성을 줄이고, 브라우저 호환성 문제를 해결하기 위해 다양한 프레임워크가 개발되었다.^[2] 이러한 프레임워크들은 기존 웹 개발 방식에서 Ajax를 사용할 때 발생하는 여러 문제점들을 해결해 준다. 예를 들어, 서로 다른 웹 브라우저 간의 DHTML 구현 차이를 프레임워크 코드가 흡수하여 개발자가 브라우저 호환성 문제를 직접 해결할 필요가 없게 해준다.^[29]

대표적인 Ajax 프레임워크는 다음과 같다:

• 구글 웹 툴킷(Google Web Toolkit)
• 프로토타입 자바스크립트 프레임워크(Prototype JavaScript Framework)
• 제이쿼리(jQuery)
• 스프라이(Spry)

8. Ajax 관련 비판

어댑티브 패스(Adaptive Path)의 컨설턴트는 "Ajax"라는 용어를 만든 제시 제임스 개럿이^[32] 이미 존재하는 기법을 마케팅 수단 및 밈으로 사용하고 있다고 주장했다.^[33][34][35] Ajax 기술은 이전에는 일반적인 이름이 없었기 때문에 이 용어 자체가 발전이 될 수 있었다. 그러나 이 기술을 이용해 가장 특출한 애플리케이션들을 만든 사람 중 하나인 구글 엔지니어는 그들이 사용한 기술을 '자바스크립트'라고 간주한다고 언급했다.^[36]

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

9. 예제

다음은 GET을 사용하여 Ajax 요청을 하는 간단한 예제이다.



// 클라이언트-사이드 스크립트

// 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); // 요청 도중 에러 발생

}

}






// 서버-사이드 스크립트

// 내용의 형식을 설정합니다

header('Content-Type: text/plain');

// 데이터를 보냅니다

echo "반환된 텍스트";

?>



jQuery에서는 $.ajax를 사용하거나 요청 방식에 따라 $.get 또는 $.post를 사용한다.



$.get('send-ajax-data.php').done(function(data) {

console.log(data); // '반환된 텍스트'

}).fail(function(data) {

console.log('에러: ' + data); // 요청 도중 에러 발생

});



GET 방식을 사용하는 간단한 Ajax 요청의 예시 (JavaScript로 작성됨).



// 이것은 클라이언트측 스크립트입니다.

// HTTP 요청을 초기화합니다.

let xhr = new XMLHttpRequest();

// 요청을 정의합니다.

xhr.open('GET', 'send-ajax-data.php');

// 요청의 상태 변경을 추적합니다.

xhr.onreadystatechange = function () {

const DONE = 4; // readyState 4는 요청이 완료되었음을 의미합니다.

const OK = 200; // 상태 200은 성공적인 반환을 의미합니다.

if (xhr.readyState === DONE) {

if (xhr.status === OK) {

console.log(xhr.responseText); // 'This is the output.'

} else {

console.log('Error: ' + xhr.status); // 요청 중 오류가 발생했습니다.

}

}

};

// send-ajax-data.php로 요청을 보냅니다.

xhr.send(null);






// 이것은 서버측 스크립트입니다.

// 콘텐츠 유형을 설정합니다.

header('Content-Type: text/plain');

// 데이터를 다시 보냅니다.

echo "This is the output.";

?>



Fetch는 기본 제공되는 자바스크립트 API이다.^[17] 구글 개발자 문서에 따르면, "Fetch는 기존의 XMLHttpRequest보다 웹 요청을 하고 응답을 처리하는 것을 더 쉽게 만듭니다."



fetch('send-ajax-data.php')

.then(data => console.log(data))

.catch (error => console.log('Error:' + error));

async function doAjax1() {

try {

const res = await fetch('send-ajax-data.php');

const data = await res.text();

console.log(data);

} catch (error) {

console.log('Error:' + error);

}

}

doAjax1();



Fetch는 JavaScript Promise에 의존한다.

fetch 명세는 다음과 같은 중요한 면에서 Ajax와 다릅니다.

• fetch()에서 반환되는 Promise는 응답이 HTTP 404 또는 500이더라도 '''HTTP 오류 상태에 대해 거부되지 않습니다'''. 대신 서버가 헤더로 응답하는 즉시 Promise는 정상적으로 해결되고(응답이 200~299 범위에 없으면 응답의 ok 속성이 false로 설정됨), 네트워크 오류 또는 요청 완료를 방지한 것이 있을 때만 거부됩니다.
• fetch()는 ''credentials'' 초기화 옵션을 설정하지 않는 한 '''크로스-오리진 쿠키를 보내지 않습니다'''. (2018년 4월부터. 명세는 기본 자격 증명 정책을 same-origin으로 변경했습니다. Firefox는 61.0b13부터 변경되었습니다.)

참조

_[1] 웹사이트 Ajax - Web developer guides https://developer.mo[...] 2018-02-27
_[2] 서적 Beginning Ajax http://www.wrox.com/[...] wrox 2007-03-00
_[3] 웹사이트 Article on the history of XMLHTTP by an original developer http://www.alexhopma[...] Alexhopmann.com 2007-01-31
_[4] 웹사이트 Specification of the IXMLHTTPRequest interface from the Microsoft Developer Network http://msdn.microsof[...] Msdn.microsoft.com
_[5] 웹사이트 Native XMLHTTPRequest object http://blogs.msdn.co[...] Microsoft 2006-01-23
_[6] 웹사이트 Dynamic HTML and XML: The XMLHttpRequest Object https://developer.ap[...] Apple Inc.
_[7] 웹사이트 Story of XMLHTTP http://www.alexhopma[...]
_[8] 웹사이트 The 16 Greatest Moments in Web History https://www.entrepre[...] 2007-10-01
_[9] 웹사이트 A Brief History of Ajax http://www.aaronsw.c[...] Aaron Swartz 2005-12-22
_[10] 웹사이트 Kayak User Interface http://kayaklabs.blo[...] 2006-04-12
_[11] 웹사이트 Ajax: A New Approach to Web Applications http://adaptivepath.[...] AdaptivePath.com 2005-02-18
_[12] 웹사이트 The XMLHttpRequest Object http://www.w3.org/TR[...] World Wide Web Consortium 2006-04-05
_[13] 웹사이트 XMLHttpRequest Level 1 https://www.w3.org/T[...] W3C
_[14] 웹사이트 XMLHttpRequest Standard https://xhr.spec.wha[...]
_[15] 웹사이트 JavaScript Object Notation http://tapestry.apac[...] Apache.org
_[16] 웹사이트 Speed Up Your Ajax-based Apps with JSON http://www.devx.com/[...] DevX.com
_[17] 웹사이트 Fetch API - Web APIs https://developer.mo[...]
_[18] 웹사이트 What is AJAX? Advantages & Disadvantages of Ajax? https://www.mageplaz[...] magaplaza
_[19] 웹사이트 What is AJAX? Advantages & Disadvantages of AjaxAdvantages And Disadvantages Of AJAX – You Know About Them https://blog.potenza[...] POTENZA
_[20] 웹사이트 Top 5+ Advantages and Disadvantages of AJAX https://yovak.com/ad[...] POTENZA
_[21] 웹사이트 Ajax【Asynchronous JavaScript + XML】とは http://e-words.jp/w/[...]
_[22] 웹사이트 えいじゃっくす 【Ajax】 Asynchronous JavaScript + XML http://yougo.ascii.j[...]
_[23] 웹사이트 アジャックスとは http://www.weblio.jp[...]
_[24] 웹사이트 Ajaxとは http://www.sophia-it[...]
_[25] 웹사이트 いまさら聞けない、“Ajax”とは何なのか？ https://atmarkit.itm[...]
_[26] 문서 Jesse James Garrett
_[27] 웹사이트 JavaScriptのパラダイムシフトAjaxって何？ https://allabout.co.[...]
_[28] 웹사이트 マンガで学ぶ♪アリサのネット難解最新用語講座 Ajax http://trendy.nikkei[...]
_[29] 웹사이트 Microsoft XML パーサー (MSXML) のバージョン一覧 http://support.micro[...]
_[30] 웹인용 Opera: Web specifications support http://www.opera.com[...] 2005-06-02
_[31] 웹인용 adaptive path » ajax: a new approach to web applications http://www.adaptivep[...] 2006-11-07
_[32] 웹인용 AJAX: Web 'shift' or business as usual? | News Blog - CNET News http://news.com.com/[...] 2012-07-10
_[33] 웹사이트 Dare Obasanjo aka Carnage4Life - SOA, AJAX and REST: The Software Industry Devolves into the Fashion Industry http://www.25hoursad[...]
_[34] 웹사이트 On Ajax and Marketing Technologies http://www.fiftyfour[...]
_[35] 웹사이트 Building Richly Interactive Web Apps with Ajax http://developers.sl[...]
_[36] 웹인용 Tech News, Blogs, Product Reviews & IT Resources - ZDNet Asia http://asia.cnet.com[...] 2005-06-02