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> 標記在主網頁中嵌入或連結至這些網頁。如下所示。

以下舉例說明將 POST 與 JavaScript 和 PHP 搭配使用。

使用 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 個隨機值的 QR 圖碼的網頁。若要自行使用，可自訂 $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 網頁即可，如下所示：

other_page.html

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