Ce document explique pourquoi et comment demander une image via HTTP POST.
Présentation
Si vous demandez une image dans du code ou si vous avez besoin d'une URL comportant plus de 2 000 caractères, vous devez envoyer votre requête d'image à l'aide de la méthode HTTP POST. Le serveur d'infographies accepte les requêtes HTTP POST d'une longueur maximale de 16 Ko.
Voici un exemple du type de requête POST le plus basique, avec un élément <form> :
Cette image est en réalité une page hébergée dans un <iframe>. Voici le code du formulaire:
<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>
La réponse à une requête POST valide est une image PNG, tout comme une réponse à une requête GET.
Conseil:Certains navigateurs mettent en cache les requêtes envoyées à une URL spécifique. Par conséquent, même si vous modifiez les paramètres POST, le navigateur n'interroge pas réellement le serveur d'images. Cela peut poser un problème lors de la tentative d'actualisation d'une image qui change souvent (ce qui peut poser problème lors des tests). Pour contourner ce problème, ajoutez ?chid=value à la fin de l'URL POST, où value change à chaque requête: le serveur d'images ignore ce paramètre et le navigateur renvoie la requête au lieu d'actualiser simplement la version mise en cache.
Il existe plusieurs façons d'utiliser la méthode POST, et toutes nécessitent un codage supplémentaire dans le code de la page ou sur le serveur qui l'héberge. Pour utiliser la méthode POST, vous devez généralement créer une page distincte pour chaque image, puis intégrer ces pages à votre page principale ou créer un lien vers celles-ci à l'aide de balises <iframe> ou <img>, comme indiqué ci-dessous.
Voici des exemples d'utilisation de la méthode POST avec JavaScript et PHP.
Utilisation de JavaScript pour une requête POST
Le moyen le plus simple d'effectuer une requête POST JavaScript consiste à créer une page qui héberge un formulaire avec des données d'image dans des éléments <input>. Ensuite, demandez à la page de publier la requête dans son gestionnaire onLoad(). La page sera remplacée par l'image PNG. La page qui héberge cette image doit l'inclure à l'aide d'un <iframe>.
Voici le code de la page d'image:
Remarque:L'exemple ci-dessous inclut un paramètre chid défini sur une valeur changeante dans l'URL. Le navigateur s'actualise pour la raison décrite dans le conseil ci-dessus. Si votre image ne change pas souvent, vous n'avez pas besoin d'ajouter ce paramètre.
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>
Si vous utilisez un élément <form>, vous n'avez pas besoin d'encoder en URL vos chaînes.
Cette image peut ensuite être chargée sur une autre page à l'aide d'un <iframe> dans votre page hôte, comme suit:
another_page.html
<iframe src="post_infographic.html" width="300" height="200"></iframe>
Utiliser PHP pour une requête POST
La plupart des langages côté serveur prennent en charge les requêtes POST explicites. Voici un exemple d'exécution d'une requête POST à l'aide de PHP. Cet exemple présente une page qui génère un code QR avec 150 valeurs aléatoires. Pour l'utiliser vous-même, vous devez personnaliser le tableau $qrcode afin d'inclure vos propres valeurs.
Remarque:L'exemple ci-dessous inclut un paramètre chid défini sur une valeur changeante dans l'URL. Le navigateur s'actualise pour la raison décrite dans le conseil ci-dessus. Si votre image ne change pas souvent, vous n'avez pas besoin d'ajouter ce paramètre.
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));
?>
L'intégration de cette image est plus facile que dans l'exemple JavaScript, car il vous suffit de pointer vers votre page POST avec une balise <img>, comme indiqué ci-dessous:
another_page.html
<img width='300' height='300' src='imageserver-image.php'>