[김민태] 03. 클라이언트 앱 - XMLHttpRequest(+ajax) 란?

먼저 XMLHttpRequest()를 설명하기 위해서 ajax를 설명하지 않을 수 없다.

 

ajax란?

Asynchronous Javascript And XML의 약자로 그 뜻을 해석하자면 비동기 자바스크립트 그리고 XML을 의미한다. 풀어서 이해해보자면 JS를 통하여 XML형식의 데이터를 비동기적으로 주고 받는 것이라고 할 수 있다. 여담으로 학부시절 XML 수업을 듣고, AJAX로 졸업작품을 하였는데, 현 기술을 보니 새삼 옛날 기술이라는 생각이 든다...

 

왜 XMLHttpRequest()의 설명에 앞서 ajax를 설명했냐면 XMLHttpRequest()는 Ajax 프로그래밍에 주로 사용되는 기술이었기 때문이다.

 

XMLHttpRequest()란?

브라우저와 서버가 통신하기 위하여 사용되는 API로 객체 내 함수들을 통하여 전체 페이지의 새로고침 없이도 URL을 통하여 데이터를 받아올 수 있다. 이는 서비스 사용자의 흐름을 방해하지 않으면서 페이지 일부를 업데이트 할 수 있다는 장점을 가지고 있다. 상단에서 언급한 것 처럼 주로 ajax 프로그래밍에 사용되었지만 그렇다고 하여 XML만 읽을 수 있는 것은 아니고, 모든 종류의 데이터를 읽어올 수 있다.

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

XMLHttpRequest - Web API | MDN

 

사용 방법은 주로 XMLHttpRequest()을 통해 객체를 생성하여준다. 이는 다른 메소드 호출 이전에 먼저 선행되어야한다.

var XHR = XMLHttpRequest();

이후, 객체 내의 open() 함수를 통해 메소드 방식과 URL, 비동기 여부 등의 필요한 정보를 넣어 초기화 시켜준다.

// xhr.open('메소드 방식', 'URL', 비동기여부);
xhr.open('GET', 'https://hyermione.tistory.com/', false);

send()함수를 이용하여 요청을 보낼 수 있고, 만약 HTTP 요청의 header값 설정이 필요하면 open() 함수 호출 이후 ~ send() 함수 호출 이전 사이에 setRequestHeader() 함수를 호출해주어야 한다.

 

더 상세한 메소드들은 상단 MDN 링크에서 확인할 수 있다.