Q. XMLHttpRequest 객체로 통신할 때 사용할 수 있는 모든 옵션을 담은 예시 코드를 보여주세요

chat GPT의 답변

 

var xhr = new XMLHttpRequest();

// 요청 초기화
xhr.open("POST", "https://api.example.com/data", true);

// 요청 헤더 설정
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Authorization", "Bearer yourAccessToken");

// 요청 완료 시 처리할 함수
xhr.onreadystatechange = function () {
  // 요청 완료 및 응답이 정상인 경우
  if (xhr.readyState == 4) {
    // HTTP 상태 코드가 200~299 사이인 경우 (정상 응답)
    if (xhr.status >= 200 && xhr.status < 300) {
      console.log("요청이 성공했습니다.");
      console.log("응답 데이터:", xhr.responseText);
    } else {
      // HTTP 상태 코드가 200~299 사이가 아닌 경우 (에러 상황)
      console.error("요청이 실패했습니다. 상태 코드:", xhr.status);
      // 추가적인 에러 처리 로직을 작성할 수 있습니다.
    }
  }
};

// 에러 처리
xhr.onerror = function () {
  console.error("네트워크 에러가 발생했습니다.");
};

// 타임아웃 설정 (예: 10초)
xhr.timeout = 10000;
xhr.ontimeout = function () {
  console.error("요청이 시간 초과되었습니다.");
};

// 응답 타입 설정 (기본값은 "text")
xhr.responseType = "json"; // "text", "arraybuffer", 등도 가능

// withCredentials 설정 (크로스 도메인 요청 시 쿠키를 전송하려면 true로 설정)
xhr.withCredentials = true;

// 요청 본문 데이터 설정
var requestData = { key: "value" };
var jsonData = JSON.stringify(requestData);
xhr.send(jsonData);

 

• setRequestHeader: 요청 헤더 설정
• responseType: 응답 데이터 타입 설정
• withCredentials: 크로스 도메인 요청 시 쿠키를 전송할 지 여부 설정
• timeout 및 ontimeout: 요청 타임아웃 설정 및 처리
• send: 요청 본문 데이터 설정 및 요청 보내기