Permintaan POST

Dokumen ini menjelaskan alasan dan cara meminta gambar menggunakan HTTP POST.

Ringkasan

Jika Anda meminta gambar dalam kode, atau jika memerlukan URL yang berisi lebih dari 2 ribu karakter, Anda harus mengirimkan permintaan gambar menggunakan HTTP POST. Server infografis mendukung permintaan HTTP POST dengan panjang hingga 16 ribu.

Berikut adalah contoh jenis permintaan POST yang paling dasar: menggunakan elemen <form>:

Gambar ini sebenarnya adalah halaman yang dihosting di <iframe>. Berikut adalah kode formulir:

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

Respons terhadap permintaan POST yang valid adalah gambar PNG, sama dengan respons permintaan GET.

Tips: Beberapa browser meng-cache permintaan ke URL tertentu, sehingga meskipun Anda mengubah parameter POST, browser tidak akan benar-benar mengkueri ulang server gambar. Hal ini dapat menyebabkan masalah saat mencoba memuat ulang gambar yang sering berubah (yang dapat menjadi masalah selama pengujian). Untuk mengatasi hal ini, tambahkan ?chid=value di akhir URL POST, tempat value berubah dengan setiap permintaan: server gambar akan mengabaikan parameter ini, dan browser akan mengirim ulang kueri, serta tidak hanya memuat ulang versi yang di-cache.

Ada sejumlah cara untuk menggunakan POST, dan semuanya memerlukan coding tambahan baik dalam kode halaman maupun di server yang menghosting halaman. Untuk menggunakan POST, Anda biasanya akan membuat halaman terpisah untuk setiap gambar, dan menyematkan atau menautkan ke halaman tersebut di halaman utama menggunakan <iframe> atau sebagai tag <img> seperti yang ditunjukkan di bawah.

Berikut adalah contoh penggunaan POST dengan JavaScript dan PHP.

Menggunakan JavaScript untuk Permintaan POST

Cara termudah untuk membuat permintaan POST JavaScript adalah dengan membuat halaman yang menghosting formulir dengan data gambar di elemen <input>, dan membuat halaman tersebut POST permintaan di pengendali onLoad(), dan halaman akan diganti dengan PNG gambar. Halaman yang menghosting gambar ini harus menyertakan halaman ini menggunakan <iframe>. Berikut adalah kode untuk halaman gambar:

Catatan: Contoh di bawah menyertakan parameter chid yang ditetapkan ke nilai yang berubah di URL. Hal ini akan membuat browser dimuat ulang karena alasan yang dijelaskan dalam tips di atas. Jika gambar tidak sering berubah, Anda tidak perlu menambahkan parameter tersebut.

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

Jika menggunakan elemen <form>, Anda tidak perlu mengenkode URL string Anda.

Gambar ini kemudian dapat dimuat ke halaman lain menggunakan <iframe> di halaman host Anda, seperti ini:

halaman_lain.html

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

Menggunakan PHP untuk Permintaan POST

Sebagian besar bahasa sisi server mendukung permintaan POST eksplisit. Berikut adalah contoh membuat permintaan POST menggunakan PHP. Contoh ini menunjukkan halaman yang membuat kode QR dengan 150 nilai acak. Untuk menggunakannya sendiri, Anda harus menyesuaikan array $qrcode untuk menyertakan nilai Anda sendiri.

Catatan: Contoh di bawah menyertakan parameter chid yang ditetapkan ke nilai yang berubah di URL. Hal ini akan membuat browser dimuat ulang karena alasan yang dijelaskan dalam tips di atas. Jika gambar tidak sering berubah, Anda tidak perlu menambahkan parameter tersebut.

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

Menyematkan gambar ini lebih mudah daripada contoh JavaScript, karena Anda cukup mengarahkan ke halaman POST dengan tag <img>, seperti yang ditunjukkan di sini:

halaman_lain.html

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