AJAX

Ajax Asynchronous JavaScript + XML

비동기. 페이지 이동이 없다 -> 리로딩(번쩍번쩍)이 없다
RIA rich internet application / rich 풍부한.
DOM Document Object Model 문서 객체 모델. 전체를 객체로 받아들인다.

Ajax 구성요소

- XMLHttpRequest : 웹서버와 통신 담당. 사용자의 요청을 웹서버로 전송, 그로부터 받은 결과를 웹 브라우저에 전달.
- Dom : 문서의 구조. 폼 동의 정보나 화면 구성 조작.
- CSS : UI관련 부문 담당
- 자바스크립트 : XMLHttpRequest객체를 이용하여 웹서버에 요청 전송.
                        XMLHttpRequest 객체로부터 응답이 오면 DOM, CSS등을 이용해 화면을 조작.

Ajax 처리 순서

(사용자 이벤트 발생) 자바스크립트 - DOM을 사용하여 필요 정보 구함 -> XMLHttpRequest객체를 통해 웹서버에 요청 전달
(웹서버) XMPHttpRequest - 요청 처리 -> XML이나 단순 텍스트로 생성하여 XMLHttpRequest에 전송
(응답도착) XMLHttpRequest객체 - 자바스크립트로 도착 사실을 알림 -> 자바스크립트 - 응답데이터와 DOM조작하여 화면 반영

XMLHttpRequest

- 웹서버에 요청 전송
httpRequest = getXMLHttpRequest();                                           XMLHttpRequest객체 받음
(GET)
httpRequest.open("GET","/open.jsp?name=ruri&age=20","true");     GET방식으로 open.jsp에 접속. true/false 동기/비동기 방식
httpRequest.send(null);                                                             보냄
(POST)
httpRequest.open("POST","/open.jsp","true");                               POST방식으로 open.jsp에 접속. true/false 동기/비동기 방식
httpRequest.send("name=ruri&age=20");                                      전달할 데이터와 함께 보냄
- 서버 응답 처리
httpRequest = getXMLHttpRequest();
httpRequest.onreadystatechange = view;
httpRequest.open("GET","/open.jsp","true");
httpRequest.send(null);
function view(){
//서버로부터 응답받은 결과 처리
}

XMLHttpRequest 객체의 상태 : readyState

onreadystatechange에서의 콜백함수는 readyState 프로퍼티의 값이 변경될때 마다 호출된다.
readyState 프로퍼티의 값
httpRequest.readyState
0
1
2
3
*중요 4 COMPLETED 데이터를 전부 받은상태.

서버로부터 응답 상태 ststus/ ststusText

httpRequest.status
ststus    ststusText                 설명
200        OK                           요청 성공    
403        Forbidden                  접근 거부
404        Not Found                  페이지 없음
500        Internal Server Error    서버오류발생

응답 데이터 responseText

httpRequest.responseText 웹서버가 생성한 단순 응답 텍스트