Dokumen ini menjelaskan alasan dan cara meminta gambar menggunakan HTTP POST.
Ringkasan
Jika Anda meminta gambar dalam kode, atau jika Anda memerlukan URL yang panjangnya lebih dari 2 ribu karakter, Anda harus mengirimkan permintaan gambar menggunakan HTTP POST. Server infografis mendukung permintaan POST HTTP dengan panjang hingga 16K.
Berikut adalah contoh jenis permintaan POST yang paling dasar: menggunakan elemen <form>:
Gambar ini sebenarnya adalah halaman yang dihosting di <iframe>. Berikut adalah kode formulirnya:
<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 ke 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, dengan value berubah setiap kali mengirim permintaan: server gambar akan mengabaikan parameter ini, dan browser akan mengirim ulang kueri, bukan memuat ulang versi yang di-cache.
Ada sejumlah cara untuk menggunakan POST, dan semuanya memerlukan
coding tambahan baik dalam kode halaman maupun pada server
yang menghosting halaman tersebut. Untuk menggunakan POST, biasanya Anda akan membuat halaman terpisah untuk
setiap gambar, dan menyematkan atau menautkan ke halaman-halaman tersebut di
halaman utama menggunakan <iframe> atau sebagai tag <img>
seperti yang ditunjukkan di bawah ini.
Berikut adalah contoh penggunaan POST dengan JavaScript dan PHP.
Menggunakan JavaScript untuk Permintaan POST
Cara termudah untuk membuat permintaan POST JavaScript adalah membuat halaman yang menghosting
formulir dengan data gambar dalam elemen <input>, dan membuat halaman
MEMPOSTING permintaan di pengendali onLoad(), dan halaman akan diganti dengan gambar
PNG. 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 disetel ke nilai yang berubah di URL. Hal ini menyebabkan browser melakukan refresh karena alasan yang dijelaskan dalam tips di atas. Jika gambar Anda tidak sering berubah, Anda tidak perlu menambahkan parameter tersebut.
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>
Jika menggunakan elemen <form>, Anda tidak perlu mengenkode string ke URL.
Gambar ini kemudian dapat dimuat ke halaman lain menggunakan <iframe> di
halaman host Anda, seperti ini:
another_page.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
pembuatan permintaan POST menggunakan PHP. Contoh ini menunjukkan halaman yang menghasilkan
kode QR dengan 150 nilai acak. Untuk menggunakannya sendiri, Anda perlu menyesuaikan array $qrcode untuk menyertakan nilai Anda sendiri.
Catatan: Contoh di bawah menyertakan parameter chid
yang disetel ke nilai yang berubah di URL. Hal ini menyebabkan browser melakukan refresh 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:
another_page.html
<img width='300' height='300' src='imageserver-image.php'>