에이잭스

에이잭스(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)방식 모두 사용하여 원격 서버로부터 데이터를 요청할 수 있다. 제이쿼리는 에이잭스처럼 자바스크립트의 라이브러리 중 하나인데 자바스크립트를 좀 더 사용하기 쉽게 패키징화 시켜놓은 것이다.

구성

'

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

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

XMLHttpRequest

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

참고자료

• Ajax 위키백과 - https://ko.wikipedia.org/wiki/Ajax
• ajax,〈AJAX의 특징〉,《티스토리》,2009-08-26
• 코딩팩토리,〈Ajax란 무엇인가?〉,《티스토리》,2018-05-12
• 파쿠군, 〈Aajx 란?〉,《티스토리》, 2018-11-07

같이 보기

• 프로그래밍 언어
• 자바스크립트
• 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 디자인패턴 구조패턴 • 동시성패턴 • 동시실행패턴 • 모델-뷰-컨트롤러 패턴 • 상태패턴 • 생성패턴 • 싱글톤패턴 • 아키텍처패턴 • 전략패턴 • 커맨드패턴 • 행동패턴 프로그래밍 인물 귀도 반 로썸 • 그레이스 머레이 호퍼 • 니클라우스 비르트 • 댄 브릭클린 • 더그 커팅 • 데니스 리치 • 리누스 토르발스 • 리처드 그린블라트 • 마거릿 해밀턴 • 마크 앤드리슨 • 빈트 서프 • 빌 게이츠 • 빌 조이 • 스티브 잡스 • 에이다 러브레이스 • 제임스 고슬링 • 척 벤턴 • 켄 톰슨 • 팀 패터슨 위키 : 자동차, 교통, 지역, 지도, 산업, 기업, 단체, 업무, 생활, 쇼핑, 블록체인, 암호화폐, 인공지능, 개발, 인물, 행사, 일반