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