Z tego dokumentu dowiesz się, dlaczego i jak zażądać obrazu za pomocą metody HTTP POST.
Przegląd
Jeśli chcesz otrzymać obraz w kodzie lub adres URL dłuższy niż 2000 znaków, musisz wysłać żądanie dotyczące obrazu za pomocą metody HTTP POST. Serwer infografiki obsługuje żądania HTTP POST o długości do 16 KB.
Oto przykład najbardziej podstawowego rodzaju żądania POST: z użyciem elementu <form>:
Ten obraz faktycznie jest stroną hostowaną w domenie <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 to obraz PNG, taki sam jak odpowiedź na żądanie GET.
Wskazówka: niektóre przeglądarki buforują żądania pod kątem określonego adresu 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 ładowania obrazu, który często się zmienia (co może stanowić problem podczas testowania). Aby obejść ten problem, dodaj ?chid=value na końcu adresu URL POST, gdzie value zmienia się po każdym żądaniu: serwer obrazów zignoruje ten parametr, a przeglądarka ponownie wyśle zapytanie, a nie tylko ponownie załaduje wersję z pamięci podręcznej.
Metodę POST można wykorzystać na wiele sposobów – wszystkie wymagają dodatkowego kodowania w kodzie strony lub na serwerze hostującym stronę. Aby użyć metody POST, zwykle należy utworzyć osobną stronę dla każdego obrazu i umieścić na niej stronę lub dodać do niej linki za pomocą tagów <iframe> lub <img>, jak pokazano poniżej.
Oto przykłady zastosowania metody POST zarówno w językach JavaScript, jak i w PHP.
Używanie JavaScriptu do żądań POST
Najprostszym sposobem utworzenia żądania POST JavaScript jest utworzenie strony, która hostuje formularz z danymi obrazu w elementach <input> i umieść w niej żądanie POST w elemencie obsługi onLoad(), co spowoduje zastąpienie strony obrazem PNG. Strona, na której jest przechowywany ten obraz, powinna zawierać tę stronę za pomocą tagu <iframe>.
Oto kod strony obrazu:
Uwaga: przykład poniżej zawiera parametr chid ustawiony na zmieniającą się wartość w adresie URL. Spowoduje to odświeżenie przeglądarki z powodu opisanego we wskazówce powyżej. Jeśli obraz rzadko się zmienia, nie musisz dodawać tego parametru.
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ć ciągów URL w adresie URL.
Obraz ten można potem wczytać na inną stronę, korzystając z elementu <iframe> na stronie hostującej, np.:
another_page.html
<iframe src="post_infographic.html" width="300" height="200"></iframe>
Użycie języka PHP w żądaniu POST
Większość języków po stronie serwera obsługuje jednoznaczne żądania POST. Oto przykład tworzenia żądania POST w języku PHP. Ten przykład przedstawia stronę generującą kod QR ze 150 losowymi wartościami. Aby użyć go samodzielnie, musisz dostosować tablicę $qrcode, tak aby zawierała własne wartości.
Uwaga: przykład poniżej zawiera parametr chid ustawiony na zmieniającą się wartość w adresie URL. Spowoduje to odświeżenie przeglądarki z powodu opisanego we wskazówce powyżej. Jeśli obraz rzadko się zmienia, nie musisz dodawać tego parametru.
serwer_obrazów-obraz.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));
?>
Umieszczanie tego obrazu jest łatwiejsze niż przykładowy JavaScript, ponieważ wystarczy wskazać stronę POST za pomocą tagu <img>, jak w tym przykładzie:
another_page.html
<img width='300' height='300' src='imageserver-image.php'>