Questo documento descrive perché e come richiedere un'immagine utilizzando HTTP POST.
Panoramica
Se richiedi un'immagine nel codice o un URL con una lunghezza superiore a 2000 caratteri, dovrai inviare la richiesta tramite HTTP POST. Il server di infografica supporta richieste POST HTTP con una lunghezza massima di 16.000.
Ecco un esempio del tipo più semplice di richiesta POST: l'utilizzo di un elemento <form>:
Questa immagine è in realtà una pagina ospitata in un <iframe>. Ecco
il codice del modulo:
<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 risposta a una richiesta POST valida è un'immagine PNG, la stessa di una richiesta GET.
Suggerimento: alcuni browser memorizzano le richieste nella cache a un URL specifico, quindi, anche se modifichi i parametri POST, il browser non eseguirà effettivamente una query sul server delle immagini. Questo può causare un problema durante il ricaricamento di un'immagine che cambia spesso (può essere un problema durante il test). Per risolvere il problema, aggiungi ?chid=value alla fine dell'URL POST, dove value cambia a ogni richiesta: il server immagine ignora questo parametro e il browser invia nuovamente la query, non semplicemente ricarica la versione memorizzata nella cache.
Esistono diversi modi per utilizzare POST e tutti richiedono una codifica aggiuntiva nel codice della pagina o sul server che ospita la pagina. Per utilizzare POST, in genere crei una pagina separata per ogni immagine e incorpora o crei link a queste pagine nella pagina principale utilizzando <iframe> o come tag <img> come mostrato di seguito.
Ecco alcuni esempi di utilizzo di POST sia con JavaScript che con PHP.
Utilizzare JavaScript per una richiesta POST
Il modo più semplice per effettuare una richiesta POST JavaScript è creare una pagina che ospita
un modulo con dati di immagine negli elementi <input> e fare in modo che la pagina
POST la richiesta nel relativo gestore onLoad() e la pagina verrà sostituita dall'immagine
PNG. La pagina che ospita questa immagine deve includere questa pagina mediante <iframe>.
Ecco il codice per la pagina immagine:
Nota: nell'esempio seguente è incluso un parametro chid impostato su un valore variabile nell'URL. Di conseguenza, il browser si aggiorna per il motivo descritto nel suggerimento precedente. Se l'immagine non cambia spesso, non è necessario aggiungere il parametro.
post_infografica.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>
Se utilizzi un elemento <form>, non è necessario codificare le stringhe nell'URL.
L'immagine può quindi essere caricata in un'altra pagina utilizzando un <iframe> nella
pagina host, in questo modo:
altra_pagina.html
<iframe src="post_infographic.html" width="300" height="200"></iframe>
Utilizzo di PHP per una richiesta POST
La maggior parte dei linguaggi lato server supporta richieste POST esplicite. Ecco un esempio di richiesta di pubblicazione tramite POST. Questo esempio illustra una pagina che genera un codice QR con 150 valori casuali. Per utilizzarlo autonomamente, devi personalizzare
l'array $qrcode
in modo da includere i tuoi valori.
Nota: l'esempio di seguito include un parametro chid impostato su un valore variabile nell'URL. Di conseguenza, il browser si aggiorna per il motivo descritto nel suggerimento precedente. Se l'immagine non cambia spesso, non è necessario aggiungere il parametro in questione.
immagine-server-immagine.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'incorporamento di questa immagine è più semplice rispetto all'esempio di JavaScript perché puoi semplicemente puntare alla tua pagina POST con un tag <img>, come mostrato di seguito:
altra_pagina.html
<img width='300' height='300' src='imageserver-image.php'>