JavaScript 09 - Ajax

JavaScript와 XML을 이용한 비동기적 정보 교환 기법

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

· HTTP 프로토콜을 이용한 비동기 통신이며, 브라우저는 정적 HTML 파일과 CSS 파일, 데이터를 어떻게 요청하면 되는지를 설명한 JavaScript를 통해 HTML, CSS를 이용해 골격을 먼저 형성하고 Ajax 실행부가 담긴 JavaScript 영역을 실행하여 데이터를 별도로 가져와 페이지를 로딩함

Ajax 설정값

종류	설명
url	Ajax 요청할 데이터가 매핑된 url
type	HTTP 통신의 종류를 설정 (기본값 : get)	get, post, delete, put
dataType	리턴받을 데이터의 타입 설정 (생략시 : 자동 결정)	xml, html, json, script, jsonp, text
contentType	기본값 : application/x-www-form-urlencoded; charset=UTF-8
timeout	호출된 시점부터 시간을 측정하여 초과될 경우 에러 등의 상태로 전환 $.ajaxSetup()의 global timeout에 의해 override	number(milli secs)
data	URL 파라미터를 통해 보낼 데이터	Object(Key:Value) / String / Array
beforeSend	요청이 전송되기 전에 실행되는 이벤트 반환값을 false로 설정하거나 jqXHR.abort() 로 설정하면 ajax 전송 취소 가능
success	통신이 성공했을 때 실행되는 콜백함수
error	request 실패시 실행되는 콜백함수
complete	success나 error가 호출된 이후에 호출되는 콜백함수

Ajax 메소드 종류

종류	설명
GET	데이터를 읽거나 검색할 때 주로 사용
POST	새로운 리소스를 생성할 때 주로 사용
PUT	리소스를 생성 및 업데이트할 때 주로 사용
DELETE	지정된 리소스를 삭제할 때 주로 사용

 

참고 블로그

[Web] Ajax 완벽 정리, 다양한 예제 포함 (tistory.com)