이 문서에서는 HTTP POST를 사용하여 이미지를 요청하는 이유와 방법을 설명합니다.
개요
코드로 이미지를 요청하거나 2,000자가 넘는 URL이 필요한 경우 HTTP POST를 사용하여 이미지 요청을 보내야 합니다. 인포그래픽 서버는 최대 16K의 HTTP POST 요청을 지원합니다.
다음은 가장 기본적인 POST 요청의 예입니다. <form> 요소를 사용합니다.
이 이미지는 실제로 <iframe>에서 호스팅되는 페이지입니다. 양식 코드는 다음과 같습니다.
<form action='https://chart.googleapis.com/chart' method='POST'> <input type='hidden' name='cht' value='qr' /> <input type='hidden' name='chs' value='300x300' /> <input type='hidden' name='chl' value='This is my QR code'/> <input type='submit' /> </form>
유효한 POST 요청에 대한 응답은 PNG 이미지로, GET 요청 응답과 동일합니다.
팁: 일부 브라우저는 특정 URL에 대한 요청을 캐시하므로 POST 매개변수를 변경하더라도 브라우저는 실제로 이미지 서버를 다시 쿼리하지 않습니다. 이로 인해 자주 변경되는 이미지를 새로고침하려고 할 때 문제가 발생할 수 있습니다 (테스트 중에 문제가 될 수 있음). 이 문제를 해결하려면 POST URL 끝에 ?chid=value를 추가합니다. 그러면 value는 모든 요청에 따라 변경됩니다. 이미지 서버는 이 매개변수를 무시하고 브라우저는 캐시된 버전을 다시 로드하는 것이 아니라 쿼리를 다시 전송합니다.
POST를 사용할 수 있는 방법에는 여러 가지가 있으며 모두 페이지 코드나 페이지를 호스팅하는 서버에서 추가 코딩이 필요합니다. POST를 사용하려면 일반적으로 각 이미지에 별도의 페이지를 만든 다음, 아래와 같이 <iframe> 또는 <img> 태그로 기본 페이지에 이러한 페이지를 삽입하거나 연결합니다.
다음은 자바스크립트와 PHP에서 POST를 사용하는 예입니다.
POST 요청에 자바스크립트 사용
자바스크립트 POST 요청을 하는 가장 쉬운 방법은 <input> 요소에 이미지 데이터가 있는 양식을 호스팅하는 페이지를 만들고 이 페이지가 onLoad() 핸들러에 요청을 POST하도록 하고 페이지를 이미지 PNG로 대체하는 것입니다. 이 이미지를 호스팅하는 페이지에는 <iframe>을 사용하여 이 페이지를 포함해야 합니다.
다음은 이미지 페이지의 코드입니다.
참고: 아래 샘플에는 URL에 변경된 값으로 설정된 chid 매개변수가 포함되어 있습니다. 이렇게 하면 위의 도움말에서 설명한 이유로 브라우저가 새로고침됩니다. 이미지가 자주 변경되지 않으면 이 매개변수를 추가할 필요가 없습니다.
post_infographic.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='application/javascript'>
// Send the POST when the page is loaded,
// which will replace this whole page with the retrieved image.
function loadGraph() {
var frm = document.getElementById('post_form');
if (frm) {
frm.submit();
}
}
</script>
</head>
<body onload="loadGraph()">
<form action='https://chart.googleapis.com/chart' method='POST' id='post_form'
onsubmit="this.action = 'https://chart.googleapis.com/chart?chid=' + (new Date()).getMilliseconds(); return true;"> <input type='hidden' name='cht' value='qr' />
<input type='hidden' name='cht' value='qr' />
<input type='hidden' name='chs' value='300x300' />
<input type='hidden' name='chl' value='This is my QR code' />
<input type='submit' />
</form>
</body>
</html>
<form> 요소를 사용하면 문자열을 URL로 인코딩할 필요가 없습니다.
그런 다음 이 이미지는 다음과 같이 호스트 페이지에서 <iframe>를 사용하여 다른 페이지에 로드할 수 있습니다.
다른 페이지.html
<iframe src="post_infographic.html" width="300" height="200"></iframe>
POST 요청에 PHP 사용
대부분의 서버 측 언어는 명시적인 POST 요청을 지원합니다. 다음은 PHP를 사용하여 POST 요청을 하는 예시입니다. 이 예에서는 150개의 임의의 값이 있는 QR 코드를 생성하는 페이지를 보여줍니다. 이를 직접 사용하려면 $qrcode 값을 맞춤설정하여 자체 값을 포함하세요.
참고: 아래 샘플에는 URL에 변경된 값으로 설정된 chid 매개변수가 포함되어 있습니다. 이렇게 하면 위의 도움말에서 설명한 이유로 브라우저가 새로고침됩니다. 이미지가 자주 변경되지 않으면 이 매개변수를 추가할 필요가 없습니다.
imageserver-image.php
<?php
// Create some random text-encoded data for a QR code.
header('content-type: image/png');
$url = 'https://chart.googleapis.com/chart?chid=' . md5(uniqid(rand(), true));
$chd = 't:';
for ($i = 0; $i < 150; ++$i) {
$data = rand(0, 100000);
$chd .= $data . ',';
}
$chd = substr($chd, 0, -1);
// Add image type, image size, and data to params.
$qrcode = array(
'cht' => 'qr',
'chs' => '300x300',
'chl' => $chd);
// Send the request, and print out the returned bytes.
$context = stream_context_create(
array('http' => array(
'method' => 'POST',
'content' => http_build_query($qrcode))));
fpassthru(fopen($url, 'r', false, $context));
?>
다음과 같이 <img> 태그를 사용하여 POST 페이지를 가리키면 자바스크립트 이미지보다 더 쉽게 이미지를 삽입할 수 있습니다.
다른 페이지.html
<img width='300' height='300' src='imageserver-image.php'>