POST 要求

本文件說明使用 HTTP POST 要求圖片的原因和方式。

總覽

如果您要在程式碼中要求圖片，或您需要的網址超過 2,000 個字元，就必須使用 HTTP POST 傳送圖片要求。資訊圖表伺服器支援的 HTTP POST 要求上限為 16,000 個。

以下是最基本的 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> 標記在主頁面中嵌入或連結到這些網頁，如下所示。

以下舉例說明同時使用 POST 和 JavaScript 及 PHP 的例子。

針對 POST 要求使用 JavaScript

如要提出 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> 即可將這張圖片載入其他頁面，如下所示：

another_page.html

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

針對 POST 要求使用 PHP

大多數的伺服器端語言都支援明確的 POST 要求。以下示範如何使用 PHP 提出 POST 要求。這個範例說明網頁會使用 150 個隨機值產生 QR code。如要自行使用，您可以自訂 $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 網頁即可，如下所示：

another_page.html

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