En este documento, se describe por qué y cómo solicitar una imagen usando HTTP POST.
Descripción general
Si solicitas una imagen en el código o si necesitas una URL de más de 2, 000 caracteres, deberás enviar la solicitud de imagen usando HTTP POST. El servidor de infografías admite solicitudes HTTP POST de hasta 16 K de longitud.
Este es un ejemplo del tipo más básico de solicitud POST: con un elemento <form>:
Esta imagen es en realidad una página alojada en un <iframe>. Este es el código del formulario:
<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 respuesta a una solicitud POST válida es una imagen PNG, al igual que una respuesta a una solicitud GET.
Sugerencia: Algunos navegadores almacenan las solicitudes en caché a una URL específica, por lo que incluso si cambias los parámetros POST, el navegador no volverá a consultar el servidor de imágenes. Esto puede causar un problema cuando se intenta volver a cargar una imagen que cambia con frecuencia (lo que puede ser un inconveniente durante la prueba). Para solucionar este problema, agrega ?chid=value al final de la URL de POST, en el que value cambia con cada solicitud: el servidor de imágenes ignorará este parámetro y el navegador reenviará la consulta y no solo volverá a cargar la versión almacenada en caché.
Existen varias formas de usar POST, y todas requieren codificación adicional en el código de la página o en el servidor que la aloja. Para usar POST, por lo general, debes crear una página independiente para cada imagen y, luego, incorporar estas páginas o incluir un vínculo a ellas en tu página principal con <iframe> o como etiquetas <img>, como se muestra a continuación.
Aquí tienes ejemplos de cómo usar POST con JavaScript y PHP.
Cómo usar JavaScript para una solicitud POST
La forma más fácil de realizar una solicitud POST de JavaScript es crear una página que aloje un formulario con datos de imagen en elementos <input> y hacer que la página POST la solicitud en su controlador onLoad(). La página se reemplazará por la imagen PNG. La página que aloja esta imagen debe incluir esta página mediante un <iframe>.
Este es el código de la página de la imagen:
Nota: El siguiente ejemplo incluye un parámetro chid configurado con un valor cambiante en la URL. Esto hace que el navegador se actualice por el motivo descrito en la sugerencia anterior. Si la imagen no cambia con frecuencia, no es necesario que agregues ese parámetro.
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 usas un elemento <form>, no es necesario que codifiques las cadenas en formato URL.
Esta imagen se puede cargar en otra página a través de un <iframe> en tu página de host, de la siguiente manera:
another_page.html
<iframe src="post_infographic.html" width="300" height="200"></iframe>
Cómo usar PHP para una solicitud POST
La mayoría de los lenguajes del servidor admiten solicitudes POST explícitas. Este es un ejemplo de cómo realizar una solicitud POST con PHP. En este ejemplo, se muestra una página que genera un código QR con 150 valores aleatorios. Si quieres usarlo por tu cuenta, debes personalizar el array $qrcode para que incluya tus propios valores.
Nota: El siguiente ejemplo incluye un parámetro chid configurado con un valor cambiante en la URL. Esto hace que el navegador se actualice por el motivo descrito en la sugerencia anterior. Si la imagen no cambia con frecuencia, no es necesario que agregues ese parámetro.
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));
?>
Incorporar esta imagen es más fácil que el ejemplo de JavaScript, ya que puedes apuntar a tu página POST con una etiqueta <img>, como se muestra a continuación:
another_page.html
<img width='300' height='300' src='imageserver-image.php'>