Ce document explique pourquoi et comment demander une image à l'aide de HTTP POST.
Présentation
Si vous demandez une image dans le code ou si vous avez besoin d'une URL de plus de 2 000 caractères, vous devez envoyer votre demande d'image à l'aide de la méthode HTTP POST. Le serveur d'infographies accepte les requêtes HTTP POST jusqu'à 16 Ko.
Voici un exemple du type de requête POST le plus basique avec un élément <form> :
Cette image est en fait 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, identique à une requête GET.
Conseil : Certains navigateurs mettent en cache les requêtes vers une URL spécifique. Par conséquent, même si vous modifiez les paramètres POST, le navigateur n'interrogera 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 un 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 et ne se contente pas d'actualiser la version en cache.
Il existe plusieurs façons d'utiliser la méthode POST, et toutes nécessitent du 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 créer une page distincte pour chaque image, puis les intégrer à votre page principale ou créer un lien vers celle-ci à l'aide de <iframe> ou de balises <img>, comme illustré ci-dessous.
Voici des exemples d'utilisation de la méthode POST avec JavaScript et PHP.
Utiliser JavaScript pour une requête POST
Le moyen le plus simple d'envoyer une requête POST JavaScript consiste à créer une page qui héberge un formulaire contenant des données d'image dans des éléments <input>, puis à demander à la page d'envoyer la requête dans le gestionnaire onLoad(), qui sera remplacée par l'image PNG. La page qui héberge cette image doit inclure cette page à l'aide d'un <iframe>.
Voici le code pour la page de l'image:
Remarque : L'exemple ci-dessous inclut un paramètre chid défini sur une valeur variable dans l'URL. Cela entraîne l'actualisation du navigateur 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 vos chaînes en URL.
Cette image peut ensuite être chargée sur une autre page en utilisant un <iframe> dans votre page hôte, comme suit:
autre_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 acceptent les requêtes POST explicites. Voici un exemple de requête POST utilisant PHP. Cet exemple montre 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 variable dans l'URL. Cela entraîne l'actualisation du navigateur 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 simple que dans l'exemple JavaScript, car il vous suffit de pointer vers votre page POST avec une balise <img>, comme illustré ci-dessous:
autre_page.html
<img width='300' height='300' src='imageserver-image.php'>