AJAX(Asynchronous Javascript And XML)란 ?

 

AJAX란?

• 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 로드하지 않고 필요한 일부 페이지의 데이터만을 로드하는 기법
• 자바스크립트를 사용하여 웹 서버와 클라이언트 간 비동기적으로 XML 데이터를 교환하고 조작하기 위한 웹 기술
• 하이퍼텍스트 표기 언어(HTML)만으로는 어려운 다양한 작업을 웹 페이지에서 구현해서 이용자가 웹 페이지와 자유롭게 상호 작용할 수 있도록 구현하는 기법

 

비동기란 ? 특정 코드가 끝날때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 의미

 

AJAX의 동작 원리

클라이언트에서 서버로 데이터 요청, 그에 대한 결과를 반환받음 = 서버와 클라이언트의 통신

1. 사용자에 의한 요청 이벤트 발생
2. 요청 이벤트가 발생하면 이벤트 핸들러에 의해 자바스크립트 호출
3. 자바스크립트는 XMLHttpRequest 객체를 사용하여 서버로 요청, 이때 웹 브라우저는 요청을 보내고 나서 서버의 응답을 기다릴 필요 없이 다른 작업 처리 가능
4. 서버는 전달받은 XMLHttpRequest 객체를 가지고 AJAX 요청을 처리
5. 서버는 처리한 결과를 HTML, XML, JSON 형태의 데이터로 웹 브라우저에 전달
6. 서버로 전달받은 데이터를 가지고 웹 페이지의 일부분만을 갱신하는 자바스크립트를 호출
7. 결과적으로 웹 페이지의 일부분만이 다시 로딩되어서 표시

 

AJAX의 장단점

장점

• 웹 페이지의 속도 향상
• 서버의 처리가 완료될 때까지 기다리지 않고 다른 작업 처리 가능
• 서버에서 데이터만 전송하면 되므로 전체적인 코딩의 양이 줄어든다.

단점

• 페이지 이동없는 통신으로 인한 보안상의 문제 존재
• 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있음
• 히스토리 관리가 되지 않음

 

---

 

AJAX의 주요 기술

1. XMLHttpRequest : 웹 브라우저와 웹 서버 간에 메서드가 데이터를 전송하는 객체 폼의 API
2. Javascript : 객체 기반의 스크립트 프로그래밍 언어
3. XML(Extensible Markup Language) : HTML의 단점을 보완한 인터넷 언어로서 SGML의 복잡한 단점을 개선한 특수한 목적을 갖는 마크업 언어
4. DOM(Document Object Model) : XML 문서를 트리 구조의 형태로 접근할 수 있게 해주는 API
5. XSLT(Extensible Stylesheet Language Transformations) : XML 문서를 다른 XML 문서로 변환하는 데 사용하는 XML 기반 언어
6. HTML(Hyper Text Markup Language) : 인터넷 웹(WWW) 문서를 표현하는 표준화된 마크업 언어
7. CSS(Cascading Style Sheets) : 마크업 언어가 실제 표시되는 방법을 기술하는 언어