[JavaScript] Ajax - XMLHttpRequest(XHR)

Same-Origin 정책(동일근원정책) 

브라우저에는 동일 근원 정책이 있음. 같은 도메인 안에서만 XHR 호출이 가능 - SOP

 

XMLHttpRequest(XHR)

Ajax 는 Asynchronous JavaScript and XML의 약자 비동기 통신
페이지 전체를 로드하지 않고 일부분만 로드하여 DOM을 사용하여 내용을 추가하거나 바꿀 수 있다.

 

XHR의 순서

1. XHR선언
2. 옵션 ( 콜백함수 설정)
3. 서버에 HTTP요청
4. 콜백함수에서 서버의 응답 받아와서 처리

1. XHR 선언

var XHR = new XHLHttpRequest();
익스플로러 경우에 따라
var XHR = new ActiveXObject("Msxml2.XMLHTTP");
var XHR = new ActiveXObject("Microsof.XMLHTTP");

2. 옵션 (콜백함수 설정)

XHR.open("GET", url, false);
Get 방식으로 전송하고 요청보낼 url false는 동기식

XHR.onreadystatechange = function;
응답받을 콜백함수를 설정

3. HTTP 요청 보내기

XHR.send(null);

4. 응답 처리

설정한 콜백함수에서 응답을 처리한다

XHR.onreadystatechange = function() {
        if ( XHR.readyState == 4 ) {
                if (XHR.status == 200) {
                        alert (XHR.responseText);
                   }
            }
}

// resayState

0 : open() 이 아직 호출되지 않음
1 : send() 가 호출되지 않음
2: 서버로부터 응답이 없음
3: 데이터를 받는 중
4: 서버로부터 응답을 다 받았음

status

"200" ; Section 10.2.1 : Ok
"204" ; Section 10.2.5 : No Content
"400" ; Section 10.4.1 : Bad Request
"500" ; Section 10.5.1 : Internal Server Error
"503" ; Section 10.5.4 : Service Unavailable

 

 

 

 

 

 

 

 

 

출처 : http://blog.naver.com/mimi215/60179874174