제이쿼리 Ajax 기능

온라인 쇼핑몰에서 회원가입을 하려면 먼저 ID 중복 여부부터 체크합니다. 이때 보통 회원가입 페이지는 브라우저에 표시된 채 ID 중복 여부를 확인하는 창만 서버에 절의하여 다음과 같이 화면에 따로 보여줍니다.

 

이처럼 클라이언트 측에서의 직업과는 상관 없이 비동기적으로 서버와 작업을 수행 할 때 Ajax 기능을 사용합니다. Ajax란 Asynchronous Javascript(비동기 스크립트) + XML의 의미로 자바스크립트를 사용한 비동기 통신, 즉 클라이언트와 서버 간의 XML이나 JSON 데이터를 주고받는 기술을 의미합니다.

 

Ajax는 페이지 이동 없이 데이터 처리가 가능하며, 서버의 처리를 기다리지 않고 비동기 요청이 가능하다는 특징이 있습니다.

 

다음 그림들을 통해 기존 웹 페이지의 처리 방식과 Ajax를 이용한 웹 페이지의 처리 방식을 비교할 수 있습니다. 먼저 JSP 페이지의 동작 방식인 아래 그림을 봅시다.

기존 웹 페이지 동작 방식

 

 

 

개인 정보를 입력하고 서버에 요청하면 서버에서 결과를 처리한 후 HTML 태그를 클라이언트의 브라우저에 전송하여 다른 페이지를 보여줍니다. 즉, 페이지 이동이 발생합니다.

 

반면에 아래 그림의 Ajax로 페이지를 처리하는 경우를 보면 요청 페이지의 결과를 서버에서 처리한 후 다시 XML이나 JSON으로 원래 요청 페이지로 전송됩니다. 즉, 페이지 이동이 발생하지 않습니다.

 

Ajax 웹 페이지 동작 방식