In diesem Dokument wird erläutert, warum und wie Sie ein Bild mit HTTP POST anfordern.
Übersicht
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 Infografik-Server unterstützt HTTP-POST-Anfragen mit einer Länge von bis zu 16 KB.
Hier ein Beispiel für die grundlegendste POST-Anfrage: <form>-Element:
Dieses Bild ist eine Seite, die von 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 wie eine GET-Anfrageantwort ein PNG-Bild.
Tipp:Einige Browser speichern Anfragen an eine bestimmte URL im Cache. Selbst wenn Sie die POST-Parameter ändern, wird der Bildserver vom Browser also nicht noch einmal abgefragt. Dies kann zu Problemen führen, wenn Sie versuchen, ein Image zu aktualisieren, das sich häufig ändert (was beim Testen problematisch sein kann). Fügen Sie ?chid=value am Ende der POST-URL hinzu, um dieses Problem zu umgehen. Dabei ändert sich value bei jeder Anfrage: Der Bildserver ignoriert diesen Parameter und der Browser sendet die Abfrage noch einmal und aktualisiert nicht einfach die im Cache gespeicherte Version.
Es gibt eine Reihe von Möglichkeiten, POST zu verwenden. Alle erfordern zusätzliches Programmieren entweder im Seitencode oder auf dem Server, auf dem die Seite gehostet wird. Wenn du POST verwenden möchtest, musst du für jedes Bild in der Regel eine separate Seite erstellen und diese Seiten mithilfe von <iframe> oder als <img>-Tags auf deiner Hauptseite einbetten oder verlinken.
Hier sehen Sie Beispiele für die Verwendung von POST mit JavaScript und PHP.
JavaScript für POST-Anfragen verwenden
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 POST-Anfragen in den onLoad()-Handler sendet. Die Seite wird dann durch das Bild-PNG ersetzt. Die Seite, auf der dieses Bild gehostet wird, sollte diese Seite mit einem <iframe> enthalten.
Hier ist der Code für die Bildseite:
Hinweis: Das folgende Beispiel enthält einen chid-Parameter, dessen Wert in der URL geändert wird. Dadurch wird der Browser aus dem oben beschriebenen Grund aktualisiert. Wenn sich das Image nicht oft ändert, müssen Sie diesen Parameter nicht hinzufügen.
post_infografik.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 Sie ein <form>-Element verwenden, müssen Sie Ihre Strings nicht URL-codieren.
Dieses Bild kann dann mithilfe eines <iframe>-Elements auf der Hostseite in eine andere Seite geladen werden:
andere_seite.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 siehst du 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, fügen Sie das $qrcode-Array so ein, dass Ihre eigenen Werte enthalten sind.
Hinweis: Das folgende Beispiel enthält einen chid-Parameter, der auf einen sich ändernden Wert in der URL gesetzt ist. Dadurch wird der Browser aus dem oben beschriebenen Grund aktualisiert. Wenn sich das Image 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 wie hier gezeigt einfach mit einem <img>-Tag auf deine POST-Seite zeigen kannst:
andere_seite.html
<img width='300' height='300' src='imageserver-image.php'>