XMLHttpRequest 객체에 대해 : 서버에 실제 파일이 존재하는지 js로 확인하기

XMLHttpRequest란?

1. XHR 객체는 서버와 상호작용하기 위해 쓰인다 : 브라우저가 서버와 상호작용할 수 있도록 해주는 API
2. 이름에 XML이 들어가긴 하지만, XMLHttpRequest는 XML뿐 아니라 모든 종류의 데이터를 가져올 수 있다.
3. HTTP 요청 지원 : GET, POST와 같은 HTTP 메서드를 지원하며, 데이터 가져오기 및 서버로 데이터 보내기가 가능
4. 비동기 데이터 통신 : XHR은 클라이언트 - 서버 간 데이터 교환을 가능하게 하며, 이 과정에서 사용자는 웹 페이지를 계속 사용 가능

---

주요 상태값

readyState : 요청 상태를 나타내는 값(0 ~ 4)   
   > 0 : 요청 초기화 되지 않음   
   > 1 : 요청이 설정됨(open 호출됨)   
   > 2 : 요청이 서버로 전송됨   
   > 3 : 요청이 처리 중   
   > 4 : 요청 완료 및 응답 준비 완료
 
status : HTTP 상태 코드 반환(200은 성공, 404는 리소스 없음 등)

---

사용 예제

간단한 GET 요청 예제를 알아보자.
클라이언트에서 js를 로드하는 경우, 해당 js 파일이 실제 서버에 존재하는지 확인 후 존재할 경우 로드하도록 수정한 예이다.

var script = "xhrTest/test.js";
if(isFileExist(script)) {
    document.write('<script src="' + script + '"><\/script>');
}

function isFileExist(url) {
    var xhr = new XMLHttpRequest();
    xhr.open('get', url, false); // 동기 방식 : false
    xhr.send();
	
    if(xhr.status == "404") { // 요청이 완료된 후에만 실행됨
        return false;
    } else {
        return true;
    }
}