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> 元素中图片数据的表单，然后将该网页的 POST 请求放在其 onLoad() 处理程序中，这样该网页就会被图片 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> 将此图片加载到另一个网页中，如下所示：

other_page.html

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

使用 PHP 发送 POST 请求

大多数服务器端语言都支持显式 POST 请求。以下是使用 PHP 发出 POST 请求的示例。此示例演示了一个网页，该网页生成了具有 150 个随机值的二维码。如需自行使用此功能，您需要自定义 $qrcode 数组，使其包含您自己的值。

注意：下面的示例包含一个在网址中设置为变化值的 chid 参数。这会导致浏览器按照上文提示中的说明进行刷新。如果您的图片不经常更改，则您无需添加该参数。

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 页面即可，如下所示：

other_page.html

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