Este documento descreve por que e como solicitar uma imagem usando HTTP POST.
Visão geral
Se estiver solicitando uma imagem no código ou se precisar de um URL com mais de 2.000 caracteres, você precisará enviar sua solicitação de imagem usando o HTTP POST. O servidor de infográficos suporta solicitações POST HTTP de até 16 Kb.
Este é um exemplo do tipo mais básico de solicitação POST: usando um elemento <form>:
Esta imagem é, na verdade, uma página hospedada em um <iframe>. Este é o código do formulário:
<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>
A resposta para uma solicitação POST válida é uma imagem PNG, assim como uma resposta de solicitação GET.
Dica:alguns navegadores armazenam em cache as solicitações para um URL específico. Portanto, mesmo que você altere os parâmetros POST, o navegador não vai consultar o servidor de imagem novamente. Isso pode causar um problema ao tentar recarregar uma imagem que
muda com frequência, o que pode ser um problema durante o teste. Para contornar isso, adicione ?chid=value no final do URL POST, em que value muda a cada solicitação: o servidor de imagem ignora esse parâmetro e o navegador reenvia a consulta, e não apenas atualiza a versão em cache.
Existem várias maneiras de usar POST, e todas elas exigem codificação adicional, seja no código da página ou no servidor que hospeda a página. Para usar POST, crie uma página separada para
cada imagem e incorpore ou vincule essas páginas na sua
página principal usando <iframe> ou tags <img>, conforme mostrado abaixo.
Veja alguns exemplos de como usar o POST tanto com JavaScript quanto com PHP.
Como usar JavaScript para uma solicitação POST
A maneira mais fácil de fazer uma solicitação POST JavaScript é criar uma página que hospede um formulário com dados de imagem em elementos <input> e faça com que a página POSTe a solicitação no gerenciador onLoad(). Assim, a página será substituída pelo PNG da imagem. A página que hospeda essa imagem precisa incluí-la usando um <iframe>.
Este é o código da página de imagem:
Observação:o exemplo abaixo inclui um parâmetro chid definido com um valor variável no URL. Isso faz com que o navegador seja atualizado pelo
motivo descrito na dica acima. Se a imagem não mudar com frequência, não é necessário adicionar esse 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>
Se você usar um elemento <form>, não será necessário codificar as strings para URL.
Essa imagem pode ser carregada em outra página usando um <iframe> na
página host, como este:
another_page.html
<iframe src="post_infographic.html" width="300" height="200"></iframe>
Como usar PHP para uma solicitação POST
A maioria das linguagens dos servidores suporta solicitações POST. Veja um exemplo de como fazer uma solicitação POST usando PHP. Este exemplo demonstra uma página que gera um QR code com 150 valores aleatórios. Para usar isso por conta própria, personalize a matriz $qrcode para incluir seus próprios valores.
Observação:o exemplo abaixo inclui um parâmetro chid definido para um valor variável no URL. Isso faz com que o navegador seja atualizado pelo
motivo descrito na dica acima. Se a imagem não mudar com frequência, não é necessário adicionar esse parâmetro.
imageserver-image.php (link em inglês)
<?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 essa imagem é mais fácil do que o exemplo de JavaScript, porque você pode simplesmente
apontar para a página POST com uma tag <img>, como mostrado aqui:
another_page.html
<img width='300' height='300' src='imageserver-image.php'>