POST 请求

本文档介绍了使用 HTTP POST 请求图片的原因和方法。

概览

如果您要在代码中请求图片，或者需要的网址超过 2K 字符，则需要使用 HTTP POST 发送图片请求。信息图服务器支持长度不超过 16K 的 HTTP POST 请求。

下面是一个最基本的 POST 请求类型示例：使用 <form> 元素：

此图片实际上是 <iframe> 中托管的网页。表单代码如下：

<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>

有效 POST 请求的响应是 PNG 图片，与 GET 请求响应相同。

提示：有些浏览器会将请求缓存到特定网址，因此即使您更改了 POST 参数，浏览器实际上并不会重新查询图片服务器。这可能会导致在尝试重新加载经常变化的映像时出现问题（在测试期间可能会造成问题）。如需解决此问题，请在 POST 网址的末尾添加 ?chid=value，其中 value 会随每个请求而变化：图片服务器将忽略此参数，浏览器将重新发送查询，而不是直接重新加载缓存版本。

使用 POST 的方法有很多，但所有方法都需要在网页代码中或在托管网页的服务器上进行额外的编码。要使用 POST，您通常需要为每张图片创建一个单独的页面，并使用 <iframe> 或作为 <img> 标记在主页面中嵌入或链接到这些页面，如下所示。

下面提供了通过 JavaScript 和 PHP 使用 POST 的示例。

使用 JavaScript 发送 POST 请求

发出 JavaScript POST 请求的最简单方法是创建一个页面，在 <input> 元素中托管包含图片数据的表单，并将该页面在其 onLoad() 处理程序中 POST 请求，该页面将被替换为图片 PNG。托管此映像的页面应使用 <iframe> 包含此页面。以下是图片页面的代码：

注意：以下示例包含一个 chid 参数，该参数在网址中设置为一个不断变化的值。这会导致浏览器出于上述提示中所述的原因而进行刷新。如果您的图片不经常更改，则无需添加该参数。

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>

如果您使用 <form> 元素，则无需对字符串进行网址编码。

然后，您可以在托管页面中使用 <iframe> 将此图片加载到另一个页面中，如下所示：

another_page.html

<iframe src="post_infographic.html" width="300" height="200"></iframe>

使用 PHP 发送 POST 请求

大多数服务器端语言都支持明确的 POST 请求。以下是使用 PHP 发出 POST 请求的示例。此示例展示了一个网页，该网页可生成包含 150 个随机值的二维码。若要自行使用它，您需要自定义 $qrcode 数组以包含您自己的值。

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));
?>

嵌入该图片比使用 JavaScript 示例更简单，因为您只需使用 <img> 标记指向 POST 网页，如下所示：

another_page.html

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