AJAX, Asynchronous Javascript with XML
Ajax 정의
-
(XML을 이용한) 비동기식 자바스크립트
-
HTTP 통신을 자바스크립트를 이용하여 비동기식으로 수행하는 것
-
자바스크립트로 HTTP요청을 보내고 XML 또는 JSON 파일 형식으로 응답을 받는 기술
-
자바스크립트의 내장객체인 XMLHttpRequest 를 사용
Ajax 사용 예 )
-
이미 사용중이거나 탈퇴한 아이디입니다. (onblur, onfocus 이용 // onblur에 Ajax사용)
-
처음에는 안보여주다가 버튼클릭시 가져오는식으로 사용할때(게시판+댓글)
+XHR 객체
-
XMLHttpRequest 객체
-
AJAX 통신을 하기 위한 자바스크립트 기본 내장 객체
-
IE 예전버전에서는 존재하지 않는 객체이며 ActiveX를 이용해 구현된다(크로스브라우징 처리가 필요)
-
개발자 도구 네트워크 > 콘텐츠 형식 필터에서 Ajax 호출시 전달받는 응답부분을 확인할 수 있다.
+XHR 객체 속성(property)
readyState
-
XHR 객체는 준비 - 전송 - 완료 단계를 거친다.
-
각 단계를 표현하는 속성값
-
0 : UNSENT - open() 호출 전(XHR 객체 생성한 단계)
-
1 : OPENED - open() 호출 후 ~ 응답을 받기 전
-
2 : HEADERS_RECEIVED - send() 호출 후 ~ 응답을 받기 전 -- 응답 메시지의 header를 받음
-
3 : LOADING - 다운로드 중 (response 메시지를 받는 도중
-
응답 메시지의 body를 받음
-
Loading 상태에 돌입하면서 XHR.onprogress 이벤트 동작
-
-
4 : DONE - XHR 동작 완료(요청과 응답이 완료된 상태)
-
DONE 상태 시 XHR.onload 이벤트 동작함
-
-
-
사용 예제)
-
onprogress와 onload를 이용하여 Modal(뒤에 창 못눌리게 하는 것(팝업)) 처리 가능
-
=> onprogress때는 로딩중 으로 마스킹하고 onload가 발생하면 다시 풀어줌
-
-
onreadystatechange
-
readyState가 변경될 때마다 발생하는 이벤트 처리 코드
-
callback 함수로 값을 지정한다
responseText
-
응답 데이터를 String타입으로 추출(파싱)하는 속성
responseXML
-
응답 데이터를 XML타입으로 추출(파싱)하는 속성
status
-
HTTP 응답 상태코드
-
readyState : 4(DONE) 이후 응답상태에 따라 결과 처리 설정에 사용함
statusText
-
HTTP 응답 메시지
-
404, Not Found
-
202, OK.
-
405, Method Not Allowed.
-
500, Internal Server Error.
-
+XHR 객체 함수
void open(String method, String url, [, boolean asynch])
-
AJAX 요청 정보를 초기화하는 함수
-
요청 정보를 설정하는 함수
-
method - HTTP 요청 메소드 지정
-
url - HTTP 요청 URL 지정
-
asynch - 동기(false), 비동기(true) [기본값: true]
-
**asynch를 동기(false)로 설정하면 요청에 대한 응답이 완료될 때까지 브라우저는 대기상태(BLOCKED)가 된다
void send(null)
-
GET 요청 전송 함수
-
파라미터는 open()함수의 url 매개변수에 쿼리스트링으로 포함시킨다
void send(params)
-
POST 요청 전송 함수
-
파라미터를 쿼리스트링 형식의 문자열로 매개변수로 추가한다