[AJAX] 헤더

---

1. 헤더 설정

XMLHttpRequest 객체를 사용하여 요청 헤더를 설정하려면 setRequestHeader 메서드를 사용하면 된다.

XMLHttpRequest인스턴스.setRequestHeader(헤더이름, 헤더값);

 

 

 

 

2.요청(Request) 헤더예시

다음 2개의 RequstHeader을 추가하고 개발자 도구 네트워크에서 확인하였다.

function loadData2() {
  // XMLHttpRequest 인스턴스 생성
  var xhr = new XMLHttpRequest();

  // GET 요청을 JSONPlaceholder로 보냄
  xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);

  // 요청 헤더 설정 (여러 개 설정 가능)
  xhr.setRequestHeader('Custom-Header', 'TestHeaderValue');
  xhr.setRequestHeader('Another-Header', 'AnotherValue');

  // 요청 상태 변화에 대한 처리
  xhr.onreadystatechange = function() {
      if (xhr.readyState === XMLHttpRequest.DONE) {
          if (xhr.status >= 200 && xhr.status < 300) {
              console.log('Response:', xhr.responseText);
          } else {
              console.log('Error:', xhr.status);
          }
      }
  };

  // 요청 전송
  xhr.send();
}

 

 

 

2.응답(Response) 헤더

XMLHttpRequest 객체는 서버로부터 받은 HTTP 응답 헤더를 처리하기 위해 getAllResponseHeaders()와 getResponseHeader() 두 가지 메서드를 제공합니다

 

2-1.getAllResponseHeaders()

getAllResponseHeaders() 메서드는 요청에 대한 모든 응답 헤더를 문자열 형식으로 반환합니다.
각 헤더는 개행 문자로 구분됩니다.

 

 

2-2.getResponseHeader()

인수로 전달받은 이름과 일치하는 헤더의 값을 문자열로 반환

 

 

 

 

3.응답(Response) 헤더 예시

function loadData3() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);

  xhr.onreadystatechange = function () {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        // 모든 응답 헤더를 문자열로 가져오기
        var headers = xhr.getAllResponseHeaders();
        document.getElementById('result3').innerHTML = '<p>' + headers + '</p>';
        
      }
    }
  };

  xhr.send();
}