Ten dokument opisuje, dlaczego i jak zażądać obrazu, używając POST HTTP.
Omówienie
Jeśli chcesz przesłać obraz za pomocą kodu lub jeśli URL ma więcej niż 2000 znaków, musisz go wysłać żądaniem HTTP POST. Serwer infograficzny obsługuje żądania HTTP POST o długości do 16 tys.
Oto przykład najbardziej podstawowego typu żądania POST:
Ten obraz jest w rzeczywistości stroną hostowaną w <iframe>. Oto kod formularza:
<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>
Odpowiedź na prawidłowe żądanie POST jest obrazem PNG, takim samym jak odpowiedź na żądanie GET.
Wskazówka: niektóre przeglądarki buforują żądania pod konkretnym adresem URL, więc nawet jeśli zmienisz parametry POST, przeglądarka nie będzie ponownie wysyłać zapytań do serwera obrazów. Może to powodować problem podczas próby ponownego wczytania obrazu, który często się zmienia (co może mieć problem podczas testowania). Aby obejść ten problem, dodaj ?chid=value na końcu adresu URL POST, w którym value zmienia się przy każdym żądaniu: serwer obrazów zignoruje ten parametr, a przeglądarka ponownie wyśle zapytanie, a nie samo załadowanie wersji z pamięci podręcznej.
Stosowanie POST jest na wiele sposobów, a wszystkie wymagają dodatkowego kodowania w kodzie strony lub na serwerze hostującym stronę. Aby użyć metody POST, zazwyczaj musisz utworzyć osobną stronę dla każdego obrazu, a także umieścić te strony lub umieścić do nich linki na swojej stronie głównej za pomocą tagów <iframe> lub <img>, jak pokazano poniżej.
Oto przykłady zastosowania metody POST z JavaScriptem i językiem PHP.
Używanie JavaScriptu na potrzeby żądań POST
Najłatwiejszym sposobem przesłania żądania POST w języku JavaScript jest utworzenie strony zawierającej formularz z danymi obrazu w elementach <input> i umieszczenie w nim żądania onLoad() POST, a ta strona zostanie zastąpiona obrazem PNG. Strona z tym obrazem powinna zawierać tę stronę za pomocą <iframe>.
Oto kod strony obrazu:
Uwaga: poniższy przykład zawiera parametr chid ustawiony na zmienną wartość w adresie URL. Powoduje to odświeżenie przeglądarki z podanej wyżej przyczyny. Jeśli obraz nie zmienia się zbyt często, nie musisz go dodawać.
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>
Jeśli używasz elementu <form>, nie musisz kodować adresów URL.
Obraz może zostać wczytany na innej stronie za pomocą tagu <iframe> na stronie hosta:
inna_strona.html
<iframe src="post_infographic.html" width="300" height="200"></iframe>
Używanie języka PHP w żądaniu POST
Większość języków po stronie serwera obsługuje bezpośrednie żądania POST. Oto przykład żądania POST uzyskanego w języku PHP. Ten przykład pokazuje stronę, która generuje kod QR ze 150 losowymi wartościami. Aby użyć tej funkcji, dostosuj tablicę $qrcode tak, aby zawierała własne wartości.
Uwaga: przykład poniżej zawiera parametr chid ustawiony na zmienną wartość w adresie URL. Powoduje to odświeżenie przeglądarki z podanej wyżej przyczyny. Jeśli obraz nie zmienia się zbyt często, nie musisz dodawać go.
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));
?>
Umieszczenie tego obrazu jest łatwiejsze niż w przykładzie z JavaScriptem, bo możesz po prostu wskazać stronę POST tagiem <img>, jak pokazano tutaj:
inna_strona.html
<img width='300' height='300' src='imageserver-image.php'>