يصف هذا المستند سبب طلب الصورة وكيفية استخدامها باستخدام طريقة POST لبروتوكول HTTP.
نظرة عامة
إذا كنت تطلب صورة في رمز، أو إذا كنت بحاجة إلى عنوان URL أطول من 2 كيلوبايت، فستحتاج إلى إرسال طلب الصورة باستخدام طريقة HTTP POST. يدعم خادم الرسومات المعلوماتية طلبات HTTP POST التي يصل حجمها إلى 16 كيلو بايت.
في ما يلي مثال على النوع الأساسي لطلب 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.
استخدام جافا سكريبت لطلب POST
إنّ أسهل طريقة لتقديم طلب JavaScript POST هي إنشاء صفحة تستضيف
نموذجًا يتضمّن بيانات صور في عناصر <input>، وجعل
الصفحة تنشر الطلب في معالج 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. يعرض هذا المثال صفحة تنشئ رمز استجابة سريعة يحتوي على 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'>