Solicitações POST

Neste documento, descrevemos por que e como solicitar uma imagem usando HTTP POST.

Visão geral

Se você está solicitando uma imagem no código ou se precisa de um URL com mais de 2.000 caracteres, é necessário enviar sua solicitação de imagem usando HTTP POST. O servidor de infográficos é compatível com solicitações HTTP POST de até 16K.

Veja 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>. Veja 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, igual à resposta de solicitação GET.

Dica: alguns navegadores armazenam as solicitações em cache para um URL específico. Portanto, mesmo que você mude os parâmetros POST, o navegador não vai solicitar novamente o servidor de imagem. 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 esse problema, adicione ?chid=value no final do URL POST, em que value muda a cada solicitação: o servidor de imagem ignorará esse parâmetro, e o navegador reenviará a consulta, e não apenas recarregará a versão em cache.

Há várias maneiras de usar o POST e todas exigem a codificação adicional no código da página ou no servidor que hospeda a página. Para usar o POST, você normalmente criará uma página separada para cada imagem e as incorporará ou vinculará à sua página principal usando <iframe> ou como uma tag <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 nos elementos <input> e fazer com que a página POST a solicitação no gerenciador onLoad(), e a página será substituída pelo PNG de imagem. A página que hospeda essa imagem precisa incluí-la usando uma <iframe>. Veja o código da página de imagem:

Observação: o exemplo abaixo inclui um parâmetro chid definido como um valor variável no URL. Isso faz com que o navegador seja atualizado pelo motivo descrito na dica acima. Caso sua imagem não mude com frequência, não é preciso adicionar esse parâmetro.

post_infographic.html (link em inglês)

<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ê usa um elemento <form>, não precisa codificar as strings para URL.

Essa imagem pode ser carregada em outra página usando um <iframe> na página do 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 código QR 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 como um valor variável no URL. Isso faz com que o navegador seja atualizado pelo motivo descrito na dica acima. Caso sua imagem não mude 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 em JavaScript, porque você pode apenas apontar para sua página POST com uma tag <img>, conforme mostrado aqui:

another_page.html

<img width='300' height='300' src='imageserver-image.php'>