Ajax란?

AJAX(Asynchronous JavaScript and XML)

현대 웹 애플리케이션에서 페이지를 새로 고치지 않고도 서버와 비동기적으로 데이터를 주고받을 수 있는 기술이다.

AJAX를 사용하면 웹 페이지의 일부분만을 동적으로 업데이트할 수 있어 사용자 경험을 크게 향상시킬 수 있다.

AJAX의 개념

AJAX는 Asynchronous JavaScript and XML의 약자로, JavaScript와 XML을 기반으로 한 비동기적 데이터 전송 기법입니다. AJAX의 핵심 목표는 웹 페이지를 전체적으로 새로 고치지 않고도 서버와 비동기적으로 통신하여 사용자 경험을 향상시키는 것이다.

AJAX의 주요 구성 요소

1. JavaScript:
   • 웹 페이지에서 AJAX 요청을 보내고 응답을 처리하기 위해 사용된다. JavaScript는 클라이언트 측에서 실행되며, 서버와의 데이터 통신을 담당한다.
2. XMLHttpRequest 객체:
   • AJAX의 핵심 구성 요소로, 클라이언트와 서버 간의 비동기적 데이터 전송을 관리한다. 이 객체를 사용하여 HTTP 요청을 보내고, 서버 응답을 받아 처리한다.
   • 최신 브라우저에서는 XMLHttpRequest 객체 대신 fetch API가 사용되기도 한다. fetch API는 더 간결한 문법과 기능을 제공한다.
3. 서버:
   • 클라이언트(웹 브라우저)로부터 요청을 받아 처리하고 응답을 반환하는 역할을 한다. 서버는 데이터베이스에서 정보를 조회하거나 비즈니스 로직을 처리하여 응답을 생성한다.
4. 데이터 형식:
   • AJAX 요청과 응답 데이터는 다양한 형식으로 전송이 가능하다. 가장 일반적으로 사용되는 형식은 JSON(일반적으로)과 XML(역사적으로)이다.  하지만 최근에는 HTML 조각이나 일반 텍스트 형식도 사용이 가능하다.

 

 

기존의  웹 애플리케이션 작동방식

출처:IBM

 

웹 서버는 요청을 처리하고 클라이언트에 HTML 페이지를 리턴한다. HTTP 전송 중에 사용자는 웹 애플리케이션과 상호작용이 불가능하다는 단점이 있다.

 

AJAX의 동작 흐름

1. 요청 생성:
   • JavaScript를 사용하여 XMLHttpRequest 객체를 생성하고, 서버에 보낼 요청을 설정한다. 이 단계에서 요청의 종류(GET, POST 등), URL, 요청 헤더, 데이터 등을 정의한다.
2. 서버에 요청 보내기:
   • 설정된 요청을 서버로 전송합니다. 비동기적으로 처리되기 때문에 페이지의 다른 부분이 영향을 받지 않고, 사용자 상호작용이 계속될 수 있습니다.
3. 서버 응답 처리:
   • 서버는 요청을 처리하고 응답을 반환합니다. 응답 데이터는 JSON, XML, HTML, 또는 텍스트 형식일 수 있습니다. JavaScript는 이 응답을 받아서 필요한 정보를 추출합니다.
4. 응답 데이터로 페이지 업데이트:
   • JavaScript는 응답 데이터를 처리하고, DOM(Document Object Model)을 조작하여 웹 페이지의 특정 부분만을 업데이트합니다. 전체 페이지를 새로 고치지 않고도 데이터가 동적으로 변경됩니다.

 

 

Ajax동작 흐름도

 

하지만 Ajax를 사용하면 웹 애플리케이션에서 사용자와 웹 애플리케이션의 상호작용은 중단되지 않는다.

• Ajax 엔진 또는 JavaScript 해석기를 사용하면 인터페이스를 렌더링
• 사용자 대신 서버와의 통신을 처리하여 사용자가 서버와의 HTTP 전송과는 독립적으로 웹 애플리케이션과 상호작용이 가능하다.

 

AJAX의 장점

빠른 사용자 경험:

페이지 전체를 새로 고치지 않고도 데이터만을 업데이트하므로 웹 애플리케이션이 더 빠르고 반응성이 좋아진다.

 

네트워크 트래픽 감소:

전체 페이지를 요청하는 대신 필요한 데이터만 전송되므로 네트워크 트래픽이 줄어들고, 데이터 전송 효율이 향상된다.

 

비동기 처리:

데이터 요청과 처리 과정을 비동기적으로 수행하여 사용자 인터페이스가 중단되지 않고 매끄럽게 동작한다.

 

AJAX의 단점

브라우저 호환성:

오래된 브라우저에서는 AJAX 기능이 제대로 지원되지 않는 경우가 있다. 하지만 대부분의 최신 브라우저는 AJAX를 지원한다.

 

SEO 문제: 

동적으로 로드된 콘텐츠는 검색 엔진 크롤러가 인식하지 못할 수 있습니다. 이로 인해 검색 엔진 최적화(SEO)에 영향을 줄 수 있습니다.

 

복잡성 증가:

비동기 요청과 응답 처리를 위한 추가 코드가 필요하므로 애플리케이션의 복잡성이 증가할 수 있습니다.

 

보안:

클라이언트 측에서 서버와 비동기적으로 통신하므로, 악의적인 공격자가 API를 악용할 수 있는 가능성이 있습니다. 이를 방지하기 위해 적절한 보안 조치를 취해야 합니다.

 

 

Ajax에 제한사항

 

브라우저 지원 - 모든 브라우저에서 JavaScript 또는 XMLHttpRequest 오브젝트를 지원하지는 않을수도 있다. JavaScript 및 XMLHttpRequest를 지원하는 브라우저 중에서도 해당 오브젝트는 서로 다르게 처리될 수 있습니다. 각 브라우저의 Ajax 구현을 고려해야 합니다. (Internet Explorer 5.5 이전 버전은 XMLHttpRequest의 객체를 지원하지 않음 또한, 초기 모바일 브라우저는 AJAX 요청을 제대로 처리하지 못할 수 있다.)

 

보안 및 사용자 개인정보 보호 - 모든 문제가 처리되지는 않습니다. Ajax 애플리케이션을 개발할 때 보안 및 사용자 개인 정보에 관한 문제를 고려해야 해야한다.

 

보통 밑에 있는 4가지의 문제를 고려한다.

(교차 사이트 요청 위조 (CSRF), 교차 출처 리소스 공유 (CORS), 정보 노출, 개인정보 보호)

 

 

 

내게 필요한 옵션 - 일부 브라우저에는 JavaScript 또는 XMLHttpRequest 오브젝트 지원이 없기에 모든 사용자가 웹 애플리케이션에 액세스할 수 있는 방법을 제공해야 한다.

 

책갈피 및 탐색 - Ajax를 사용하여 컨텐츠 일부를 기존 페이지에 비동기적으로 로드하므로 일부 페이지 정보는 새로 로드된 페이지에 대응하지 않을 수 있다. 브라우저 히스토리 및 책갈피는 변경할 페이지 부분에도 불구하고 URL이 변경되지 않았으므로 올바른 동작을 보이지 않는 경우도 있다.

 

검색 엔진 - Ajax 애플리케이션은 검색할 수 없지만 검색 가능한 애플리케이션에서 Ajax 기능 및 요소를 사용할 수는 있다.