jquery + ajax 사용하기

ajax란?

AJAX란 Asynchronous Javascript And Xml의 약자로 비동기식 자바스크립트와 XML이라는 뜻이다.
보통의 브라우저와 서버의 호출방식에서는 서버 요청페이지로의 이동이 불가피하다. 예를들어 회원가입중 아이디 중복체크를 할때 일반적인 방식으로는 서버와의 통신을 위해 "중복확인"버튼이 눌리면 중복확인을 위한 페이지로 잠시 이동했다가 중복확인 완료후 원래 페이지로 되돌아오게 된다. 이로인해 사용자가 빈 화면을 보게되는 공백기간이 생기고, 이때 폼에 입력해두었던 비밀번호, 이름, 나이 등의 정보는 따로 설정을 해주지 않는 이상 전부 삭제되게 되는 불편함이 있다.
하지만 ajax를 사용하면 페이지 이동없이(서버 스크립트 페이지를 거치지 않고) 요청정보만 넘겨서 작업을 처리한후 응답 데이터를 생성해 돌려주게 된다. 즉, 웹 페이지에서 정말로 필요한 데이터만 요청하기 때문에 데이터 이용량이 줄고, 페이지 새로고침을 기다리는 시간또한 줄어들어 사용자를 방해하지 않고 데이터를 주고 받을수 있다.

ajax사용법: 

사용 예제:

ajaxTest1.jsp


ajaxTest2.jsp

결과:

지금은 간단한 확인을 위해 전달된 두 값을 더하기만 했지만 좀더 활용하면 전달된 값으로 서버작업을 하는것또한 가능하다는것을 알아두자.