Ajax (Asynchronous JavaScript and XML)

• Ajax

비동기 JavaScript 및 XML(AJAX)은 웹 애플리케이션이 사용자 상호 작용에 더 잘 반응하도록 하는 웹 애플리케이션 개발 기술의 조합이다. 사용자가 단추나 체크 표시 상자를 클릭하는 등 웹 애플리케이션과 상호 작용할 때마다 브라우저는 원격 서버와 데이터를 교환한다. 데이터 교환으로 인해 페이지가 다시 로드되어 사용자 경험이 중단될 수 있다. AJAX를 사용하면 웹 애플리케이션이 백그라운드에서 데이터를 보내고 받을 수 있으므로, 필요에 따라 페이지의 일부만 새로 고칠 수 있다.

말 그대로 JavaScript와 XML을 이용한 비동기적 정보 교환 기법이다. 다만 요즘은 XML보다는 JSON을 주로 사용한다.

브라우저의 XMLHttpRequest를 이용해 전체 페이지를 새로 가져오지 않고도 페이지 일부만을 변경할 수 있도록 javascript를 실행해 서버에 데이터만을 별도로 요청하는 기법이다.

HTTP 프로토콜을 이용한 비동기 통신이며 브라우저는 정적 HTML 파일과 CSS파일, 데이터를 어떻게 요청하면 되는지를 설명한 javascript를 통해 HTML,CSS를 이용해 골격을 먼저 형성하고 ajax 실행 부가 담긴 javascript 영역을 실행하여 데이터를 별도로 가져와 적절한 방법으로 데이터를 끼워 넣은 후 페이지를 로딩한다.

 

• 사용 사례

자동 완성

검색 엔진은 사용자가 검색 창에서 특정 키워드를 검색할 때 실시간으로 자동 완성 옵션을 제공합니다. AJAX를 사용하면 웹 페이지가 각 문자 입력을 웹 서버로 릴레이하고 기존 페이지의 관련 권장 사항 목록을 반환할 수 있습니다.

양식 검증

AJAX를 사용하면 웹 애플리케이션이 사용자가 양식을 제출하기 전에 양식의 특정 정보를 확인할 수 있습니다. 예를 들어 새 사용자가 계정을 만들면 웹 페이지는 사용자가 다음 섹션으로 이동하기 전에 사용자 이름을 사용할 수 있는지 자동으로 확인할 수 있습니다.

채팅 기능

텍스트 메신저와 챗봇은 AJAX를 사용하여 브라우저에 실시간 대화를 표시합니다. AJAX는 사용자가 작성한 텍스트를 서버로 전송하고 다른 사용자의 채팅 인터페이스에 동시에 게시합니다.

소셜 미디어

소셜 미디어 플랫폼은 AJAX를 사용하여 브라우저에 새 페이지를 로드하지 않으면서 최신 콘텐츠로 사용자의 피드를 업데이트합니다. 예를 들어 Twitter는 내가 팔로우하는 누군가가 새 소식을 트윗할 때마다 피드를 즉시 새로 고칩니다.

투표 및 등급 시스템

일부 포럼 및 소셜 북마킹 사이트는 AJAX를 사용하여 특정 게시물의 등급 또는 투표 결과를 실시간으로 표시합니다. 예를 들어 Reddit에서는 전체 페이지를 새로 고치지 않고도 게시물에 찬성 또는 반대 투표를 할 수 있습니다.