📚 Study/Javascript

AJAX :: AJAX(에이작스) 개념

bono-hye 2023. 12. 27. 23:24

🔎 AJAX(에이작스)

 

✔ 개요

 AJAX 는 XML 에 기반한 종합 기술로 비동기 자바스크립트 XML (Asynchronous Javascriopt And Xml) 을 줄인말로
자바스크립트로 HTTP 요청을 보내서 XML 응답을 받아 사용하는 기술이다.

 

AJAX 는 하나의 독립된 기술이 아니다.

화면은 HTML + CSS 로 구성 및 작성하고
화면에 대한 조작과 상호 작용은 문객체모델(Document Object Model : DOM)로 처리하고
데이터 교환은 XML 형식으로 처리하며,
데이터 변환과 검색은 XML 기술인 XSL 과 XPath 를 사용하며,
비동기 통신에는 웹 브라우저 안에 내장되어 있는 XMLHttpRequest 객체를 사용하고,

(비동기 : 아메리카노 주문하고 진동벨 받아감, 나올 때 까지 줄서서 안 기다려도 됨)
이 모든 것을 하나로 묶어주는 개념으로 Javascript / jQuery 를 사용하는 것.
이것을 AJAX 라고 한다.

 

✔ 특징

- 비동기 자바스크립트 XML
- 자바스크립트로 HTTP 요청을 보내서 XML 응답을 받아 사용
- 처리 과정
   ① HTTP 요청을 보냄
      → ② XML 문서를 응답으로 받음
            → ③ 자동으로 XML 객체가 생성
                  → ④ 자바스크립트는 XML 객체에 접근하여 다양한 작업을 수행


   ==> HTML+CSS, DOM, XML, XSLT, XPath, XMLHttpRequest, Javascript 를 합쳐서 사용

 

✔ 장점

- 비동기 통신을 사용함으로써 데이터를 보내고 나서도 사용자는 다른 작업을 수행할 수 있다.
- 데이터만 들어가 있는 형식으로 응답을 받았기 때문에
   전통적인 웹 어플리케이션 방식에 비해 서버측 처리 속도가 빠르고 전송 데이터 양도 훨씬 적다.

- 응답으로 받은 XML 문서를 XML 객체로 접근하여 스크립트로 조작하고
   XPath 를 사용하여 XML 문서를 검색하거나 XSL 을 사용하여 변환을 할 수 있다.
   따라서 실행 속도가 빠르다.

- 불필요한 데이터 요청을 최소화할 수 있고 많은 일들이 클라이언트인 웹 브라우저에서 처리될 수 있다.

 

✔ 단점

- 외부 검색 엔진이 웹 페이지를 검색할 수 없는 문제가 있다.
- AJAX 는 클라이언트 풀링 방식으로 실시간 서비스를 제공할 수 없다.
- AJAX 가 포함된 HTML 페이지가 속한 서버가 아닌 다른 서버로 요청을 보낼 수 없고,
  클라이언트 PC 의 파일에 접근할 수도 없다.

 

✔ 기존 웹 사이트에서 AJAX 를 사용하면 효과가 있는 경우
    또는, AJAX 어플리케이션으로 개발할 필요가 있는 경우

- 웹 페이지를 전환하지 않고 현재 페이지에서 다른 동작을 수행하고자 할 때

- 불필요한 팝업을 사용하여 처리하는 작업을 다른 방법을 통해 대체하려 할 때   

(모달 팝업이라고 있는데 그거 제외하면 팝업은 다 에이작스)
- 여러 번 불필요한 화면을 다시 출력할 때
- 특정한 데이터를 반복 사용하면서 다양한 작업을 수행할 때

 

✔ 주의사항

- 뒤로가기 버튼 사용의 어려움
   AJAX 는 Javascript 를 사용하여 동작하기 때문에
   페이지 단위의 브라우저에서 사용자 경험(UX)과 다르게 작동하는 경우가 있다.
   특히, 뒤로가기 버튼의 기능 상실로 AJAX 를 유해한 기술로 매도하기도 한다.
   (뒤로가기 버튼은 웹 서핑을 수행하는 사용자들이 일반 클릭 다음으로 많이 사용하는 기술이므로...)
   하지만, 이미 iframe 을 사용한 해결책이 제사된 바 있으며

    AJAX 를 활용한 서비스 사용 경험이 증대되며 이런 문제는 줄어들고 있다.

 

- 진행상황 파악의 어려움
   XMLHttpRequest 를 통해 통신하는 경우
   웹 페이지 로딩과는 달리 사용자에게 아무런 진행 정보가 주어지지 않는다.
   그래서 아직 요청이 완료되지 않았는데 사용자가 페이지를 떠나거나
   기다림을 참지 못한 사용자가 다른 기능을 수행함으로써 오작동을 일으킬 우려가 발생하게 된다.
   이 경우 사용자의 요청이 처리중에 있다는 표시를 화면에 보여주도록 처리할 수 있다.
   중간 중간 "loading" 상태 표시를 통해 사용자의 요청이 처리중임을 알려주는 방법을 예로 들 수 있다.
   이러한 상태는 XMLHttpRequest.readyState 의 상태를 통해 판단할 수 있다.
   또한, 이 때 사용할 수 있는 이미지를 활용하기도 한다.

 

✔ 참고 사이트

- http://www.w3.org
- http://www.w3schools.com

 

✔ AJAX 의 필요성

기존의 웹 브라우저는 서버로부터 페이지 단위로만 데이터를 수신하여 받을 수 있었다.
때문에 간단한 상호작용을 하려고 해도 페이지 전체를 로딩해야 했고 이것은 대역폭 낭비를 초래하게 되었다.
하지만, AJAX 를 사용하면 XML 파일 조각 단위로 데이터를 받아올 수 있기 때문에
전체 페이지를 다시 로드하지 않아도 페이지 일부를 동적으로 갱신할 수 있다.

 

✔ AJAX 객체의 사용

AJAX 객체를 사용하려면 먼저 AJAX 생성 함수를 사용하여 AJAX 객체를 만들어야 한다.    
인터넷 익스플로러의 경우 『new ActiveXObject("Microsoft.XMLHTTP")』를 실행하며
모질라 웹 브라우저의 경우 『new XMLHttpRequest()』를 실행하여 AJAX 객체를 생성한다.
인터넷 익스플로러 7.0 이후부터는 모질라 웹 브라우저처럼 『new XMLHttpRequest()』를 통해 객체를 생성할 수 있다.

저작자표시