ajax XMLHttpRequest object, XHR 기초

---

XMLHttpRequest(XHR) 객체

• Ajax의 가장 핵심적인 구성 요소는 바로 XMLHttpRequest 객체
• XHR을 사용하면 페이지의 새로고침 없이도 URL에서 데이터 송수신 가능
• 웹 브라우저가 백그라운드에서 서버와 데이터를 교환할 때 사용되므로, Ajax 프로그래밍에서도 많이 사용됨
• 이름에 XML이 들어가긴 하지만, XMLHttpRequest은 XML 뿐만 아니라 모든 종류의 데이터 조작 가능

XMLHttpRequest 객체의 역사

• 비동기식 통신 방식인 XMLHttp는 가장 처음으로 익스플로러 5 버전에서 ActiveXObject라는 객체를 사용하여 구현
• 이후 모질라와 사파리에서 XMLHttpRequest라는 이름으로 도입하여 널리 사용
• 초기의 XMLHttpRequest 객체는 W3C 표준이 아니었기 때문에 웹 브라우저마다 구현상의 차이가 존재
• 따라서 현재 대부분의 웹 브라우저는 모두 비슷한 구현 방식으로 XMLHttpRequest 객체를 사용

XMLHttpRequest 객체의 생성

• XMLHttpRequest() 생성자는 새 XMLHttpRequest를 생성
• 서버에 요청을 보내기 위한 open()과 호출하기 위한 send() , 이전에 초기화를 위한 최소한의 생성자
• 현재 대부분의 주요 웹 브라우저는 XMLHttpRequest 객체를 내장

var 변수이름 = new XMLHttpRequest();

XMLHttpRequest 객체를 이용한 방법

• ActiveXObject 객체를 이용한 방법
• 크롬, 파이어폭스, 사파리, 오페라에서는 XMLHttpRequest 객체를 사용
• 하지만 익스플로러의 구형 버전인 5와 6 버전에서는 ActiveXObject 객체 사용만 가능

var 변수이름 = new ActiveXObject("Microsoft.XMLHTTP");

// 모든 웹 브라우저에서 XMLHttpRequest 인스턴스를 제대로 생성하기 위해서는 다음과 같이 작성
var httpRequest;

function createRequest() {
    if (window.XMLHttpRequest) { // 익스플로러 7과 그 이상의 버전, 크롬, 파이어폭스, 사파리, 오페라 등
        return new XMLHttpRequest();
    } else {                     // 익스플로러 6과 그 이하의 버전
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}

// 하지만 현재 익스플로러 6과 그 이하 버전을 사용하는 사용자는 거의 없으므로,
// 대부분 XMLHttpRequest 객체만 사용

XHR을 이용한 Ajax 구현

XMLHttpRequest.open() : open() 함수를 통해 XMLHttpRequest 객체를 초기화

XMLHttpRequest.open(method, url, async);

• method : 서버와 통신하여 수행할 GET , POST, PUT, DELETE 등의 전달방식 값을 설정
• url : 통신 요청을 처리할 주소 값
• async_(optional)_ : 비동기 여부를 설정하며, 기본값은 true로 비동기이다.

XMLHttpRequest.send()

send();           // GET 방식
send(문자열); // POST 방식

• send() 함수를 통해 요청을 서버에 전달
• 즉, GET , POST, PUT, DELETE 등의 수행이 서버에 전달되어 수행되는 것이으로 매개변수는 body(optional) 값이 존재하는데, 전송할 데이터 본문으로 POST, PUT의 경우 선택적으로 사용되는 값
• GET이나 HEAD 인 경우 body는 필요 없기 때문에 제외되며, null로 설정
• async 값이 true로 비동기인 경우 요청을 보대고 바로 반환되지만, false(비동기)인 경우 서버로부터 응답이 반활될 때까지 대기하기 때문에 true 값을 권장

function loadDoc() {
    // XHR 객체 생성
    var xhttp = new XMLHttpRequest();
    
    // onreadystatechange 사용, 이 부분은 readyState 속성값에 변화가 있으면, 불러야할 함수를 정의하는 부분
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("demo").innerHTML = this.responseText;
        }
    };

    // open은 Request를 구현하는 부분, 매개변수로는 method, url, async, user, password가 있는데, 뒤에 user, password는 따로 명시하지 않는 이상 불필요, async부분에 true가 들어가면서, 비동기로 통신
    xhttp.open("GET", "ajax_info.txt", true);
    // send를 사용하여 open에서 명시한 request를 서버에 전송
    xhttp.send();
}

위 코드에서 readyState의 경우 속성값은 다음과 같다.

• 0: UNSET(미전송) - 요청이 생성된 상태로 아직 서버에 요청을 보내지 않은 상태(요청 초기화 X)
  1: OPENED(열림) - open() 함수가 호출된 이후로, 요청을 서버가 받아 요청 초기화가 된 상태
  2: HEADERS_RECEIVED(헤더 응답) - send() 함수 호출 이후, 서버가 요청을 받아, 요청한 결과의 헤더를 수신한 상태
  3: LOADING(로딩) - send() 함수 호출 후 , 서버에 요청한 결과를 받아 처리하는 중
  4: DONE(완료) - 서버에 요청완료 되어 응답 대기
• 이렇게 총 5개의 경우를 가지고 있고, 0~4순으로 변경, 하지만 그러다 보니 xhttp.onreadystatechange가 여러 번 호출
• 조건문에 의해 readyState가 4, 그리고 잘 리턴되었을때의 번호가 200인 경우에만 텍스트를 출력

Reference

https://www.tcpschool.com/ajax/ajax_server_xmlhttprequest

코딩교육 티씨피스쿨

https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest

XMLHttpRequest - Web API | MDN