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

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요청 헤더를 직접 작성하여 사용할 수 있다.

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

ajax_response_header.php

<?php

    header("testheader: 123");

?>

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

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

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

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>