מסמך זה מתאר מדוע וכיצד לבקש תמונה באמצעות HTTP POST.
סקירה כללית
אם אתם מבקשים תמונה בקוד, או אם אתם צריכים כתובת URL באורך של יותר מ-2,000 תווים, עליכם לשלוח את בקשת התמונה באמצעות HTTP POST. שרת האינפוגרפיקה תומך בבקשות HTTP POST באורך של עד 16K.
הנה דוגמה לסוג הבסיסי ביותר של בקשת 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.
טיפ: חלק מהדפדפנים שומרים במטמון בקשות לכתובת URL
ספציפית, כך שאפילו אם משנים את הפרמטרים של POST, הדפדפן לא שולח שאילתה בפועל
לשרת התמונות. זה יכול לגרום לבעיה כשמנסים לטעון מחדש תמונה שמשתנה בתדירות גבוהה (שיכולה להיות בעיה בזמן הבדיקה). כדי לעקוף את הבעיה הזו, צריך להוסיף את הפרמטר ?chid=value בסוף כתובת ה-URL ב-POST, שבה value משתנה עם כל בקשה: שרת התמונות יתעלם מהפרמטר הזה והדפדפן ישלח מחדש את השאילתה, ולא פשוט יטען מחדש את הגרסה שנשמרה במטמון.
יש כמה דרכים להשתמש ב-POST, ובכולן נדרש קידוד נוסף בקוד הדף או בשרת שמארח את הדף. כדי להשתמש ב-POST, בדרך כלל צריך ליצור דף נפרד לכל תמונה, ולהטמיע את הדפים האלה או לקשר אותם לדף הראשי באמצעות <iframe> או כתגי <img>, כפי שמוצג בהמשך.
הנה כמה דוגמאות לשימוש ב-POST עם JavaScript ועם PHP.
שימוש ב-JavaScript לבקשת POST
הדרך הקלה ביותר לשלוח בקשת HTTP POST היא ליצור דף שמארח טופס עם נתוני תמונה ברכיבי <input>, ולבקש שהדף יפרסם את הבקשה ב-handler של onLoad(), והדף יוחלף ב-PNG של התמונה. הדף שמארח את התמונה צריך לכלול את הדף הזה באמצעות <iframe>.
הנה הקוד של דף התמונה:
הערה: הדוגמה הבאה כוללת פרמטר של chid
שמוגדר לערך משתנה בכתובת ה-URL. כתוצאה מכך, הדפדפן יתרענן
מהסיבה שתוארה בטיפ שלמעלה. אם התמונה לא משתנה לעיתים קרובות, לא צריך
להוסיף את הפרמטר.
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>, אין צורך לקודד כתובות URL
במחרוזות.
לאחר מכן, ניתן יהיה לטעון את התמונה הזו לדף אחר, באמצעות <iframe> בדף המארח, למשל:
another_page.html
<iframe src="post_infographic.html" width="300" height="200"></iframe>
שימוש ב-PHP לבקשת POST
רוב השפות בצד השרת תומכות בבקשות POST מפורשות. הנה דוגמה ליצירת בקשת POST באמצעות PHP. בדוגמה הזו מוצג דף שמייצר
קוד QR עם 150 ערכים אקראיים. כדי להשתמש בה באופן אישי, צריך להתאים אישית את המערך $qrcode כך שיכלול ערכים משלך.
הערה: הדוגמה הבאה כוללת פרמטר של chid
שמוגדר לערך משתנה בכתובת ה-URL. כתוצאה מכך, הדפדפן יתרענן
מהסיבה שתוארה בטיפ שלמעלה. אם התמונה לא משתנה לעיתים קרובות, לא תצטרכו להוסיף את הפרמטר הזה.
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, כי אפשר פשוט להפנות לדף POST באמצעות תג <img>, כפי שמוצג כאן:
another_page.html
<img width='300' height='300' src='imageserver-image.php'>