In diesem Dokument wird beschrieben, warum und wie Sie ein Bild mit HTTP POST anfordern.
Überblick
Wenn Sie ein Bild im Code anfordern oder eine URL mit mehr als 2.000 Zeichen benötigen, müssen Sie Ihre Bildanfrage mit HTTP POST senden. Der Infografikserver unterstützt HTTP-POST-Anfragen mit einer Länge von bis zu 16 KB.
Hier ein Beispiel für die einfachste Art von POST-Anfrage: mit einem <form>-Element:
Dieses Bild ist eigentlich eine Seite, die in einem <iframe> gehostet wird. Hier ist der Formularcode:
<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>
Die Antwort auf eine gültige POST-Anfrage ist genau wie eine GET-Anfrage ein PNG-Bild.
Tipp:Einige Browser speichern Anfragen an eine bestimmte URL im Cache. Wenn Sie also die POST-Parameter ändern, fragt der Browser den Bildserver nicht noch einmal ab. Dies kann zu Problemen beim Aktualisieren eines Images führen, das sich häufig ändert (was beim Testen ein Problem sein kann). Fügen Sie zur Umgehung dieses Problems ?chid=value am Ende der POST-URL ein, wobei sich value bei jeder Anfrage ändert: Der Bildserver ignoriert diesen Parameter und der Browser sendet die Abfrage noch einmal, anstatt einfach nur die im Cache gespeicherte Version neu zu laden.
Es gibt verschiedene Möglichkeiten, POST zu verwenden, und alle erfordern zusätzliche Codierung entweder im Seitencode oder auf dem Server, auf dem die Seite gehostet wird. Wenn du POST verwenden möchtest, erstellst du in der Regel eine separate Seite für jedes Bild und betten bzw. verlinken diese Seiten auf deiner Hauptseite mithilfe von <iframe> oder als <img>-Tags, wie unten gezeigt.
Im Folgenden finden Sie Beispiele für die Verwendung von POST mit JavaScript und PHP.
Verwenden von JavaScript für eine POST-Anfrage
Die einfachste Methode für eine JavaScript-POST-Anfrage besteht darin, eine Seite zu erstellen, die ein Formular mit Bilddaten in <input>-Elementen hostet und die Seite die Anfrage im onLoad()-Handler POSTet. Die Seite wird dann durch das PNG-Bild ersetzt. Die Seite, auf der dieses Image gehostet wird, sollte diese Seite mithilfe eines <iframe> enthalten.
Hier ist der Code für die Image-Seite:
Hinweis:Das folgende Beispiel enthält einen chid-Parameter, der auf einen sich ändernden Wert in der URL festgelegt ist. Dadurch wird der Browser aus dem oben genannten Grund aktualisiert. Wenn sich das Bild nicht häufig ändert, müssen Sie diesen Parameter auch nicht hinzufügen.
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>
Wenn du ein <form>-Element verwendest, musst du die Strings nicht URL-codieren.
Dieses Bild kann dann mit einem <iframe> auf deiner Hostseite auf eine andere Seite geladen werden. Beispiel:
another_page.html
<iframe src="post_infographic.html" width="300" height="200"></iframe>
PHP für eine POST-Anfrage verwenden
Die meisten serverseitigen Sprachen unterstützen explizite POST-Anfragen. Hier ist ein Beispiel für eine POST-Anfrage mit PHP. Dieses Beispiel zeigt eine Seite, die einen QR-Code mit 150 Zufallswerten generiert. Wenn Sie diese Funktion selbst verwenden möchten, passen Sie das Array $qrcode so an, dass Ihre eigenen Werte enthalten sind.
Hinweis:Das folgende Beispiel enthält einen chid-Parameter, der auf einen sich ändernden Wert in der URL festgelegt ist. Dadurch wird der Browser aus dem oben genannten Grund aktualisiert. Wenn sich das Bild nicht oft ändert, müssen Sie diesen Parameter nicht hinzufügen.
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));
?>
Das Einbetten dieses Bildes ist einfacher als im JavaScript-Beispiel, da du einfach mit einem <img>-Tag auf deine POST-Seite verweisen kannst, wie hier gezeigt:
another_page.html
<img width='300' height='300' src='imageserver-image.php'>