[AJAX] XMLHttpRequest 요청 및 처리 흐름

* AJAX 의 XMLHttpRequest 요청 및 처리

1. AJAX의 주요 기본구성요소 중 하나인 XMLHttpRequest 객체

2. XMLHttpRequest  : 웹서버와 통신을 담당함.  사용자의 요청을 웹서버에 전송 및 웹서버로부터 받은 결과를 웹브라우저에 전달함.

 

1. XMLHttpRequest  프로그래밍 순서

- XMLHttpRequest  객체 구하기

- 웹 서버에 요청 전송하기

- 웹 서버에서 응답이 도착하면 화면에 반영하기

 

 

1) XMLHttpRequest  객체 생성

- new ActiveXObject("Msxml2.XMLHTTP"); // IE신버전

- new ActiveXObject("Microsoft.XMLHTTP"); // IE구버전

- new XMLHttpRequest();  // IE이외 버전

if(window.XMLHttpRequest){ // IE7+, Firefox, chrom,

xmlhttp = new XMLHttpRequest();

}else{

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5 

}

2) 송신 방법

- xmlhttp.open("GET", "URL", true);

- 괄호 첫번째가 송신방법, 가운데는 URL, 마지막은 통신방법을 작성

- GET 방식의 경우 URL 뒤에 ?를 붙이고, 함께 넘길 paremeter 들을 넘기면 됨(parameter없을 경우 주소만 넘기면 됨)

- POST 방식의 경우 send() 함수에 데이터를 넣어서 보냄.

3) 처리 데이트 송신

       -xhr.open("GET", URL+"&dummy="+Math.random(), true);
       - xhr.send(null);

4) 처리상태 변경발생

 - 클라이언트와 서버가 처리를 시작하게되면 처리 상태가 변경된다.

변경되는 상태에 따라 적절한 처리를 수행해야 하는데 onreadystatechange 프로퍼티를 이용한다.

- XMLHttpRequest 객체의 onreadystatechange 프로퍼티는 웹 서버로부터 응답이 도착할때 호출 될 함수를 지정 할 수 있다.

-  xmlhttp.onreadystatechange = function();

5) 처리 결과 체크

- onreadystatechange 프로퍼티가 이벤트를 발생시키면 서버의 처리상태가 변경된 것 이므로 readyState 의 코드값을 체크한다.

- if (xmlhttp.readyState == 4)

6) 데이터 편집

- 서버에서 가져온 파일의 데이터를 편집하여 브라우저에 출력한다.

- readyState의 값이 4이고, status 값이 200일때 요청이 성공적으로 수행되었는지 확인하는 것을 callback 함수라고한다.

- if ((xhr.readyState == 4) && (xhr.status == 200))