에이잭스

에이잭스(Ajax)

에이잭스(Ajax)

에이잭스(Ajax)는 "Asynchronous JavaScript and XML"의 약자로서, "비동기식 자바스크립트와 XML"을 뜻한다. Ajax라고 소문자로 쓰기도 한다. 웹 페이지 전체를 리로드(reload)하지 않고 필요한 부분의 데이터만 서버로 보내고 받아와서 해당 부분만 갱신해 주는 기술이다. 검색어 자동완성 기능 등에 사용된다. '에이잭스'라고 읽지만, '아작스'라고 읽는 사람도 있다.

개요

에이잭스(Ajax)는 비동기적인 웹 애플리케이션의 제작을 위해 표현 정보를 위한 HTML과 CSS, 동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, 자바스크립트와 같은 조합을 이용하는 웹 개발 기법이다. DHTML이나 LAMP와 같이 에이잭스는 자체가 하나의 특정한 기술을 말하는 것이 아니며, 함께 사용하는 기술의 묶음을 지칭하는 용어다. 실제로 AFLAX와 같이 사실상 에이잭스에 바탕을 두고 있는 유사하고 복합적인 기술들이 속속 나타나고 있다. 에이잭스 애플리케이션은 실행을 위한 플랫폼으로 웹 브라우저를 이용한다.

역사

1990년대까지 웹 애플리케이션(Web Application)은 사용자가 서버로 요청을 보내면, 서버가 비지니스 로직을 처리한 후 새로운 웹 페이지를 만들어 클라이언트로 전송하는 방식이었다. 일부 데이터만 갱신하고 싶어도 페이지 전체를 받아와야하기 때문에 낭비가 많았다. 1996년에 마이크로소프트(Microsoft)는 인터넷 익스플로러(Internet Explorer)에

특징

웹 브라우저(Web Browser)가 제공하는 기능만으로 에이잭스방식의 애플리케이션을 구현할 수 있고 어떠한 종류의 ActiveX나 플러그인 프로그램을 설치하지 않는다. 에이잭스를 사용하면 사용자에게 즉각적인 반응과 풍부한 사용자 인터페이스(UI) 경험을 제공할 수 있고 페이지 이동 없이 결과가 화면에 반영된다. 웹 서버의 응답 결과가 HTML이 아닌 XML 단순텍스트이다.

장단점

에이잭스의 장점은 웹페이지의 속도를 향상해주고 서버의 처리가 완료 될 때까지 기다리지 않고 처리 가능하다. 서버에서 데이터(Data)만 전송하면 되므로 전체적인 코딩(coding)의 양이 줄어든다. 기존 웹에서는 불가능했던 다양한 사용자 인터페이스(UI)를 가능하게 해준다. 사진 공유 사이트 Flickr의 경우 사진의 제목이나 태그를 페이지 리로드 없이 수정할 수 있다. 단점으로는 히스토리 관리가 안 되어 보안에 더 신경을 써야 한다. 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다. XMLHttpRequest를 통해 통신하는 경우 사용자에게 아무런 진행정보를 주지 않는다. 그래서 아직 요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생한다 등의 이유가 있다.

사용이유

기본적으로 HTTP 프로토콜은클라이언트(Client) 쪽에서 요청을 보내고 서버 쪽에서 응답을 받으면 이어졌던 연결이 끊기게 되어있다. 그래서 화면의 내용을 갱신하기 위해서는 다시 요청하고 응답을 하면서 페이지 전체를 갱신하게 된다. 하지만 이렇게 할 경우 페이지의 일부분만 갱신할 경우에도 페이지 전체를 다시 로드해야 하는데 엄청난 자원 낭비와시간 낭비를 초래한다. 하지만 에이잭스는 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest 객체를 통해 서버에 요청한다. 이 경우 제이슨(JSON)이나 XML 형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다. 요새 웹페이지에서 가장 중요한 것은 속도다. 이 이유 하나만으로도 에이잭스를 사용해야 하는 이유로 충분하다.

제이쿼리와의 시너지

에이잭스 하면 제이쿼리(jQuery)에 대한 설명을 빼놓을 수 없다. 일반 자바스크립트(Javascript)만으로 에이잭스를 하게 되면 코딩량도 많아지고 브라우저별로 구현방법이 다른 단점이 있는데 제이쿼리를 이용하면 더 적은 코딩량과 동일한 코딩 방법으로 대부분의 브라우저에서 같은 동작은 할 수 있게 된다. 제이쿼리 에이잭스를 사용하면, HTTP 겟(Get)방식과 HTTP 포스트(Post) 방식 모두 사용하여 원격 서버로부터 데이터를 요청할 수 있다. 제이쿼리는 에이잭스처럼 자바스크립트의 라이브러리 중 하나인데 자바스크립트를 좀 더 사용하기 쉽게 패키징 화 시켜놓은 것이다.

활용

에이잭스의 활용 방향으로 페이지의 일부분에만 새로운 콘텐츠(Contents)를 로드하는 기능은 사용자의 전체적인 사용 경험을 향상할 수 있다. 이는 페이지의 일부만 수정하게 되면 사용자가 전체 페이지가 로드될 때까지 기다릴 필요가 없기 때문이다. 이 기법은 소위 단일 페이지 웹 애플리케이션(브라우저에서 실행되기는 하지만 마치 소프트웨어 애플리케이션 같은 느낌을 주는 웹 기반 도구)이 등장하는 계기가 되었다. 에이잭스의 활용예시로는 라이브 검색, 사용자 정보 표시등이 있다. 라이브 검색이라고 불리는 기능은 주로 에이잭스를 이용한다. 오늘날 검색사이트의 대부분이 사용하는 기술이다. 이 방법은 검색막대나 인터넷 웹사이트에서 검색어를 입력하는 동시에 검색 결과가 나타나도록 한다. 사용자 정보 표시는 사용자가 생성한 콘텐츠를 사용하는 웹사이트는 독자들의 웹사이트에 본인의 정보를 노출하는 기능을 제공한다. 이를 위해 자신들의 서버에 데이터를 수집한다. 이 밖에도 회원가입 시중복 아이디일 경우, 이미 사용 중인 아이디어다. 를 표시하게 하는 기능에서도 활용되고 있으며, 온라인쇼핑몰에서 장바구니에 원하는 물품을 추가했을 때 페이지 이동이나 전체 페이지에 대한 새로 고침 없이도 물품 정보만 추가되는 기능을 구현하고자 할 때, 이 에이잭스를 활용한다.

구성

'

이 름	의 미
XMLHttpRequest	웹 서버와 통신을 담당. 사용자의 요청을 웹 서버에 전송. 웹서버로부터 받은 결과를 웹브라우저에 전달
DOM	문서의 구조를 나타냄. 폼등의 화면구성을 조작할 때 사용
CSS	글자 색, 배경색 위치, 투명도 등 UI와 관련된 부분 담당
자바스크립트	사용자가 마우스를 드래그하거나 클릭 할때 XMLHttpRequest객체를 사용해서 웹서버에 요청을 전송. 또한 XMLHttpRequest객체로부터 응답이 오면 DOM, CCSemddmf 사용해서 화면 조작

XMLHttpRequest 객체는 사용자가 페이지 이동 없이 즉각적으로 웹서버와 데이터를 주고받을 때 사용한다. 프로그래밍 순서는 XMLHttpRequest 객체를 구해서 웹서버에 전송을 요청한다. 웹서버에서 응답이 오면 화면에 반영한다.

XMLHttpRequest

XMLHttpRequest를 이용하면 클라이언트에서 비동기로 서버 측과 통신할 수 있다. 그런데 XMLHttpRequest라는 이름은 오해의 소지가 있다. 이 이름은 마치 XML 데이터만 주고받아야 할 것 같고, HTTP 프로토콜만 이용해야 할 것 같은 느낌을 준다. 하지만 실제로는 JSON, HTML, 일반 텍스트로 응답 결과로 받을 수 있고, 여기에 더해 HTTP 이외의 다른 프로토콜도 지원한다. 요즘에는 XMLHttpRequest를 이용하지 않는 웹 사이트를 찾아보기 힘들 정도로 보편적인 기술이 되었다. 이에 따라 제이쿼리(jQuery)와 같이 대중적으로 큰 인기를 얻고 있는 몇몇 라이브러리는 XMLHttpRequest를 편하게 이용할 수 있는 인터페이스를 제공한다.

메소드

에이잭스 관련 메소드

종 류	풀 이
load()	외부 콘텐츠를 가져올 때 사용
$.ajax()	데이터를 서버에 POST, GET 방식으로 전송이 가능하며, HTML,XML JSON, 텍스트 유형에 데이터를 요청할 수 있는 통합적인 메소드
$.post()	데이터를 서버에 POST 방식으로 전송한 후 서버 측의 응답을 받을 때 사용
$.get()	데이터를 서버에서 GET 방식으로 전송한 후 서버 측의 응답을 받을 때 사용
$.getJSON()	데이터를 서버에 GET 방식으로 전송한 후 서버 측의 응답을 JSON 형식으로 받을 때 사용
.getScript()	Ajax를 이용하여 외부 자바스크립트를 불러올 때 사용
.ajaxStop(function(){...})	비동기 방식으로 서버에 응답 요청이 완료되었을 때 함수에 실행문이 수행
.ajaxSuccess(function(){ ... })	ajax 요청이 성공적으로 완료되면 함수에 실행문을 수행
.ajaxComplete(function(){ ... })	Ajax 통신이 완료되면 함수에 실행문을 실행
serializeArray()	JSON 데이터로 변환하여 액션 페이지에 전송
serialize()	쿼리 스트링 형식의 데이터로 변환하여 액션 페이지에 전송 방식

옵션 종류

.ajax() 메소드 옵션 종류

async	통신을 동기 또는 비동기 방식으로 설정하는 옵션 기본값은 true
beforeSend	요청하기 전에 함수를 실행하는 이벤트 핸들러
cache	요청한 페이지를 캐시에 저장할지 여부 설정. 기본값은 true
complete	에이잭스가 완료되었을 때 함수를 실행하는 이벤트 핸들러
contentType	서버로 전송시킬 데이터의 content-type을 설정
data	서버로 전송할 데이터를 지정
dataType	서버에서 요청 받아올 데이터의 형식을 지정
error	통신에 문제가 발생했을 때 함수를 실행
success	Ajax로 통신이 정상적으로 이뤄지면 함수를 실행
timeout	통신 시간을 제한. 시간 단위는 밀리 초
type	데이터를 전송할 때 방식을 설정
url	데이터를 전송할 페이지를 설정. 기본값은 현재 페이지
username	HTTP 액세스를 할 때 인증이 필요할 경우 사용자 이름을 지정

대체 기술

에이잭스는 비동기 데이터 전송 기술이지만 양방향 기술이 아니며 또한 요청 응답 사이클이 지나고 나면 통신 소켓을 닫아버린다는 문제가 있다. 따라서 완전한 실시간 통신을 지원하기 위해 웹 소켓이라는 새로운 기술이 구현되었다. 웹 소켓은 요청 응답 사이클이 지나도 통신 소켓을 닫지 않고 계속해서 요청을 송수신할 수 있도록 기존의 HTTP 프로토콜에 약간의 변형을 가한다. 웹 소켓이 TCP에 기반하고 있어 대규모 실시간 데이터 전송에 적합하지 않기 때문에 UDP에 기반한 Web RTC라는 기술이 구현되었다. Web RTC는 여기서 한발 더 나아가 서버(Server)의 중개를 해야 하지 않는 브라우저(browser) 간 피투피(P2P) 통신 채널을 형성하는 기능도 가지고 있다. 에이잭스 기술 위에서 구현된 실시간 통신 기술로 Long polling 기술이 있다. 이것은 서버에 요청을 보내면 서버는 즉시 응답을 주는 게 아니라 새로운 정보가 갱신될 때까지 소켓을 열어둔 채 응답을 미룬다. 새로운 정보가 들어오면 그때 열려 있는 소켓을 통해 응답을 돌려주며 클라이언트(웹 브라우저)는 응답을 받는 즉시 새로운 요청을 서버에 날린다. 이렇게 해서 응답하면 통신 채널이 닫히는 문제를 우회한다. Socket.io 라이브러리의 웹 소켓 대체 모드가 Long polling 방식으로 이루어진다. 웹 소켓이 지원되지 않는 브라우저가 감지되면 Socket.io는 Long polling 방식으로 통신 방식을 바꾼다.

참고자료

• Ajax Wikipedia - https://ko.wikipedia.org/wiki/Ajax
• KimCoding, 〈AJAX & CORS Overview〉, 《훈스미》, 2014-04-20
• ajax, 〈AJAX의 특징〉, 《티스토리》, 2009-08-26
• 코딩팩토리, 〈Ajax란 무엇인가?〉, 《티스토리》, 2018-05-12
• 파쿠군, 〈Aajx 란?〉, 《티스토리》, 2018-11-07
• 〈자바스크립트::Ajax-개념 및 활용방향〉, 《티스토리》, 2015-07-07
• Soft91 soft91, 〈(JQuery) Ajax 기본 문법〉, 《티스토리》, 2017-10-30
• 에이잭스 나무위키 - https://namu.wiki/w/AJAX#fn-6

같이 보기

• 프로그래밍 언어
• 자바스크립트
• XML
• HTML
• CSS

이 에이잭스 문서는 프로그래밍에 관한 글로서 검토가 필요합니다. 위키 문서는 누구든지 자유롭게 편집할 수 있습니다. [편집]을 눌러 문서 내용을 검토·수정해 주세요.

개발 : 프로그래밍 □■⊕, 소프트웨어, 데이터, 솔루션, 보안, 하드웨어, 컴퓨터, 사무자동화, 인터넷, 모바일, 사물인터넷, 게임, 메타버스, 디자인 프로그래밍 언어 ASP • C 언어 • C++ • C# • CSS • D 언어 • HTML • HTML5 • JSP • PHP • R • XHTML • XML • XSLT • 고(Go) • 고급언어 • 기계어 • 델파이 • 러스트 • 루비 • 루아 • 리액트 • 리퀴디티 • 무브 • 미켈슨 • 베이직 • 브이비스크립트 • 비주얼 C++ • 비주얼베이직(VB) • 비주얼베이직닷넷(VB.NET) • 솔리디티 • 스몰토크 • 스위프트 언어 • 스칼라 • 스크립트 언어 • 알골 • 어셈블리 • 언리얼스크립트 • 얼랭 • 에이잭스(Ajax) • 엠에프씨(MFC) • 오브젝티브-C • 오브젝트 파스칼 • 오카멜 • 웹어셈블리(WASM) • 이와즘(eWASM) • 자바 • 자바스크립트 • 저급언어 • 제이슨(JSON) • 제이쿼리(jQuery) • 카멜 • 코볼 • 코틀린 • 콜드퓨전 • 타입스크립트 • 파스칼 • 파워스크립트 • 파이썬 • 펄(Perl) • 포트란 • 프로씨(Pro-C) • 피엘에스큐엘(PL/SQL) • 피엘원(PL/I) • 하스켈 개발방법론 CBD 개발방법론 • EA • 구조적 개발방법론 • 객체지향 개발방법론 • 라이브러리 • 람다 아키텍처 • 모듈 • 모듈화 • 벤치마킹 • 소프트웨어 개발방법론 • 스크럼 • 스프린트 • 아키텍처 • 아키텍트 • 애자일 • 웹개발방법론 • 정보공학 개발방법론 • 컴포넌트 • 테일러링 • 템플릿 • 폭포수 모델 • 프로젝트 • 프로토타입 • 피드백 코딩 EUC-KR • UTF-8 • 값 • 글루웨어 • 노팔로우 링크 • 두팔로우 링크 • 디버깅 • 디코딩 • 마크업 • 버그 • 부트스트랩 • 세이브포인트 • 소스코드 • 시큐어코딩 • 아스키 • 액티브엑스 • 오픈소스 • 유니코드 • 인코딩 • 재컴파일 • 주석 • 컴파일 • 컴퓨터 프로그램 • 코드 • 코딩 • 태그 • 테스트 • 테이블 • 텍스트 • 파싱 • 퍼블리싱 • 퓨니코드 • 하드코딩 • 하이퍼링크 • 하이퍼텍스트 프로그래밍 C 명령어 • 객체 • 객체지향 • 객체지향 프로그래밍 • 거짓 • 관계연산자 • 기본형 변수 • 널 • 논리 • 논리연산 • 논리연산자 • 다중상속 • 다형성 • 대입 • 대입문 • 대입연산자 • 더블 • 도스 명령어 • 디폴트 • 레지스터변수 • 루프 • 리눅스 명령어 • 리턴 • 메모리 주소 • 메소드 • 멤버 • 명령문 • 명령어 • 무한루프 • 문자 • 문자열 • 바이트 • 반복문 • 배열 • 변수 • 분기 • 분기문 • 불린 • 브레이크 • 비교연산자 • 비트연산자 • 산술연산자 • 상속 • 상수 • 생성자 • 선언 • 선언문 • 설정자 • 속성 • 스위치 • 스태틱 • 시프트연산자 • 실행 • 실행문 • 어노테이션 • 에코 • 역참조 • 연산 • 연산문 • 연산자 • 오버로딩 • 오버라이딩 • 외부변수 • 윈도우 명령어 • 유닉스 명령어 • 인스턴스 • 인스트럭션 • 인클루드 • 인터페이스 • 임포트 • 입력 • 입력문 • 입출력 • 입출력문 • 자료형(데이터 타입) • 자바 명령어 • 자바 예약어 • 자바 컬렉션 • 전역변수 • 접근자 • 접근제어자 • 정보은닉 • 정수형 • 정적변수 • 제어 • 제어문 • 제어자 • 조건 • 조건문 • 조건연산자 • 주소 • 증감연산자 • 지역변수 • 참 • 참조 • 참조변수 • 초기화 • 추상메소드 • 추상클래스 • 추상화 • 출력 • 출력문 • 캡슐화 • 케이스 • 클래스 • 파라미터(매개변수) • 파이널 • 패키지 • 퍼블릭 • 포인터 • 프라이빗 • 프로텍티드 • 필드(멤버변수) • 함수 • 환경변수 명령어 abstract • array • boolean • break • byte • case • char • continue • default • double • do while • echo • elif • else • else if • false • final • float • for • gosub • goto • if • if else • import • include • int • join • long • long long • null • print • printf • println • private • protected • public • return • scanf • short • stdio.h • static • string • switch • temp • then • true • unsigned • void • while 디자인패턴 구조패턴 • 동시성패턴 • 동시실행패턴 • 모델-뷰-컨트롤러 패턴 • 상태패턴 • 생성패턴 • 싱글톤패턴 • 아키텍처패턴 • 전략패턴 • 커맨드패턴 • 행동패턴 프로그래밍 인물 귀도 반 로썸 • 그레이스 머레이 호퍼 • 니클라우스 비르트 • 댄 브릭클린 • 더그 커팅 • 데니스 리치 • 리누스 토르발스 • 리처드 그린블라트 • 마거릿 해밀턴 • 마크 앤드리슨 • 빈트 서프 • 빌 게이츠 • 빌 조이 • 스티브 잡스 • 에이다 러브레이스 • 제임스 고슬링 • 척 벤턴 • 켄 톰슨 • 팀 패터슨 위키 : 자동차, 교통, 지역, 지도, 산업, 기업, 단체, 업무, 생활, 쇼핑, 블록체인, 암호화폐, 인공지능, 개발, 인물, 행사, 일반