Ajax 4 - HTTP 헤더

HTTP 요청 헤더

---

 

---

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 요청 헤더를 작성할 수 있습니다.

setRequestHeader() 메소드는 다음과 같은 문법으로 설정합니다.

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

헤더 이름은 HTTP 요청 헤더에 포함하고자 하는 헤더의 이름이며, 그 값도 같이 전달합니다.

 

 

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();

setRequestHeader() 메소드로 추가한 testheader헤더는 123의 값을 가지고 HTTP 요청 헤더에 포함됩니다.

이렇게 Ajax에서는 HTTP 요청 헤더를 직접 작성하여 사용할 수 있습니다.

HTTP 규약에서 사용하는 헤더 이름은 모두 첫 글자가 영문 대문자입니다.

 

---

 

HTTP 응답 헤더

---

---

HTTP 응답 헤더

Ajax에서는 서버로부터 전달받은 HTTP 응답 헤더 내용을 다음 메소드를 이용하여 확인할 수 있습니다.

1. getAllResponseHeaders() 메소드: HTTP 응답 헤더의 모든 헤더를 문자열로 반환합니다.

2. 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();

 

아래의 예제처럼 PHP 파일에서 header() 함수를 사용하여 HTTP 응답 헤더를 직접 작성하여 전달할 수 있습니다.

<?php
    header("testheader: 123");
?>
<p id="ajax_text">Ajax에서는 서버로부터 전달받은 HTTP 응답 헤더의 내용을 확인할 수 있습니다.</p>

PHP에서 header() 함수를 사용할 때는 헤더의 이름과 콜론(:) 사이에 공백을 사용하면 안 됩니다.
또한, 콜론(:) 다음에 사용된 첫 번째 공백은 무시되므로, 공백 문자 사용에 주의를 기울여야 합니다.

 

---

Content-Type 헤더

위의 예제에서 Content-Type 헤더의 값은 "text/html"로 설정되어 있습니다.

Content-Type 헤더의 값을 직접 설정하지 않으면, HTML 문서의 MIME 타입인 "text/html"로 자동 설정됩니다.

 

대부분의 Ajax 응용 프로그램에서 다루게 되는 XML은 일반적인 파일 형태의 XML 문서가 아닙니다.

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();

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

 

---