En este documento, se describe por qué y cómo solicitar una imagen con HTTP POST.
Descripción general
Si solicita una imagen en el código o necesita una URL de más de 2, 000 caracteres, deberá enviar su solicitud de imagen con HTTP POST. El servidor de infografía admite solicitudes HTTP POST de hasta 16 K.
Aquí tienes un ejemplo del tipo más básico de solicitud POST: con un elemento <form>:
En realidad, esta imagen es una página alojada en <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 la imagen PNG, al igual que una respuesta GET de solicitud.
Sugerencia: Algunos navegadores almacenan las solicitudes en caché a una URL específica, por lo que, incluso si cambias los parámetros de POST, el navegador no volverá a consultar el servidor de imagen. Esto puede causar un problema cuando se intenta volver a cargar una imagen que cambia con frecuencia (que puede ser un problema durante las pruebas). Para solucionar este problema, agrega ?chid=value al final de la URL de POST, en la que value cambia con cada solicitud: el servidor de imagen ignorará este parámetro, y el navegador reenviará la consulta, y no solo volverá a cargar la versión almacenada en caché.
Existen varias maneras de usar POST y todas requieren codificación adicional, ya sea en el código de la página o en el servidor que aloja la página. Si quieres usar POST, por lo general, crearás una página separada para cada imagen y, luego, incorporarás estas páginas en tu página principal o vincularás a ellas con las etiquetas <iframe> o <img>, como se muestra a continuación.
Estos son ejemplos de cómo usar POST con JavaScript y PHP.
Usar JavaScript para una solicitud POST
La forma más sencilla de realizar una solicitud POST de JavaScript es crear una página que aloje un formulario con datos de imagen en elementos <input> y que la página publique la solicitud en su controlador onLoad(). La página se reemplazará por el archivo PNG de la imagen. La página que aloja esta imagen debe incluirla mediante un elemento <iframe>.
Este es el código para la página de imágenes:
Nota: En el siguiente ejemplo, se 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 tu 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 necesitas codificar las strings en formato URL.
Luego, esta imagen se puede cargar en otra página con un <iframe> en tu página host, como se muestra a continuación:
another_page.html.
<iframe src="post_infographic.html" width="300" height="200"></iframe>
Usa PHP para una solicitud POST
La mayoría de los idiomas del servidor admiten solicitudes POST explícitas. Aquí tienes 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 deseas usarlo por tu cuenta, debes personalizar el arreglo $qrcode para incluir tus propios valores.
Nota: En el siguiente ejemplo, se 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 tu 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 dirigir a tu página POST con una etiqueta <img>, como se muestra aquí:
another_page.html.
<img width='300' height='300' src='imageserver-image.php'>