ajax HTTP request response header, 요청 응답 헤더

---

HTTP 헤더

• 클라이언트와 서버 사이에 이루어지는 HTTP 요청과 응답은 HTTP 헤더를 사용하여 수행
• HTTP 헤더는 클라이언트와 서버가 서로에게 전달해야 할 다양한 종류의 데이터를 포함

// HTTP 요청 헤더의 예제
Accept: */*
Referer: http://codingsam.com/examples/tryit/tryhtml.php?filename=ajax_header_request_01 
Accept-Language: ko-KR
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko
Host: codingsam.com
DNT: 1
Connection: Keep-Alive

• HTTP 헤더는 위의 예제와 같이 헤더 이름, 콜론(:), 공백, 헤더 값의 순서로 구성
• 일부 헤더는 요청 헤더와 응답 헤더에 모두 사용되지만, 일부 헤더는 요청 헤더나 응답 헤더 중 하나에서만 사용
• HTTP 요청 헤더는 원래 웹 브라우저가 자동으로 설정해서 보내므로, 사용자가 직접 설정할 수 없었지만, Ajax를 사용하여 HTTP 요청 헤더를 직접 설정할 수도 있고, HTTP 응답 헤더의 내용을 직접 확인 가능

HTTP 요청 헤더

• Ajax에서는 요청을 보내기 전에 setRequestHeader() 메소드를 사용하여 HTTP 요청 헤더를 작성 가능
• 헤더 이름은 HTTP 요청 헤더에 포함하는 헤더의 이름이며, 그 값도 같이 전달

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

var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
    if (httpRequest.readyState == XMLHttpRequest.DONE && httpRequest.status == 200 ) {
        document.getElementById("text").innerHTML = httpRequest.responseText;
    }
};
httpRequest.open("GET", "/examples/media/ajax_request_header.php", true);
httpRequest.setRequestHeader("testheader", "123");
httpRequest.send();

//ajax_request_header.php

<?php // HTTP 요청 헤더의 이름과 값을 모두 출력함.
    header("Content-Type: text/plain");
    
    $requestHeaders = apache_request_headers();
    
    foreach ($requestHeaders as $requestHeaders => $value) {
        echo nl2br("$requestHeaders: $value\n");
    }
?>

• 위의 예제에서 setRequestHeader() 메소드로 추가한 testheader 헤더는 123의 값을 가지고 HTTP 요청 헤더에 포함
• 이렇게 Ajax에서는 HTTP 요청 헤더를 직접 작성하여 사용
• HTTP 규약에서 사용하는 헤더 이름은 모두 첫 글자가 영문 대문자

HTTP 응답 헤더

• Ajax에서는 서버로부터 전달받은 HTTP 응답 헤더 내용을 다음 메소드를 이용하여 확인 가능
• getAllResponseHeaders() :  HTTP 응답 헤더의 모든 헤더를 문자열로 반환
• getResponseHeader() :  HTTP 응답 헤더 중 인수로 전달받은 이름과 일치하는 헤더의 값을 문자열로 반환

var httpRequest = new XMLHttpRequest();

httpRequest.onreadystatechange = function() {
    if (httpRequest.readyState == XMLHttpRequest.DONE && httpRequest.status == 200 ) {
        document.getElementById("text").innerHTML = httpRequest.responseText;
        document.getElementById("header").innerHTML = httpRequest.getAllResponseHeaders();
        document.getElementById("user").innerHTML = "testheader: " + httpRequest.getResponseHeader("testheader");
    }
};

httpRequest.open("GET", "/examples/media/ajax_response_header.php", true);

httpRequest.send();

// ajax_response_header.php
<?php
    header("testheader: 123");
?>

<p id="ajax_text">Ajax에서는 서버로부터 전달받은 HTTP 응답 헤더의 내용을 확인 가능</p>
// PHP에서 header() 함수를 사용할 때는 헤더의 이름과 콜론(:) 사이에 공백 사용 X
// 또한, 콜론(:) 다음에 사용된 첫 번째 공백은 제외되므로, 공백 문자 사용에 주의

Content-Type 헤더

• Content-Type 헤더의 값을 직접 설정하지 않으면, HTML 문서의 MIME 타입인 "text/html"로 자동 설정
• 대부분의 Ajax 응용 프로그램에서 다루게 되는 XML은 일반적인 파일 형태의 XML 문서 X
• Ajax 요청을 받은 후에 PHP와 같은 서버 프로그램이 실행되어 동적으로 생성되는 XML 형태의 데이터
• 따라서 데이터의 확장자가 .xml이 아니므로 header() 함수를 사용하여 응답 데이터의 MIME 타입이 "text/xml"이라고 명시

var httpRequest = new XMLHttpRequest();

httpRequest.onreadystatechange = function() {

    if (httpRequest.readyState == XMLHttpRequest.DONE && httpRequest.status == 200 ) {
        document.getElementById("text").value = httpRequest.responseText;
        document.getElementById("header").innerHTML = httpRequest.getAllResponseHeaders();
        document.getElementById("user").innerHTML = "testheader: " + httpRequest.getResponseHeader("testheader");
    }
};

httpRequest.open("GET", "/examples/media/ajax_response_header_xml.php", true);

httpRequest.send();

// ajax_response_header_xml.php
<?php
    header("testheader: 123");
    header("Content-Type: text/xml");
    echo ("<?xml version=\"1.0\" encodeing=\"UTF-8\"?>\n");
?>
<message>
    Ajax에서는 서버로부터 전달받은 HTTP 응답 헤더의 내용을 확인 가능
</message>

Reference

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

코딩교육 티씨피스쿨

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

코딩교육 티씨피스쿨