این سند توضیح می دهد که چرا و چگونه می توان یک تصویر را با استفاده از HTTP POST درخواست کرد.
بررسی اجمالی
اگر تصویری را به صورت کد درخواست میکنید، یا اگر به URL بیشتر از 2K کاراکتر نیاز دارید، باید درخواست تصویر خود را با استفاده از 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 با جاوا اسکریپت و PHP وجود دارد.
استفاده از جاوا اسکریپت برای درخواست POST
ساده ترین راه برای ایجاد درخواست POST جاوا اسکریپت این است که صفحه ای ایجاد کنید که فرمی را با داده های تصویر در عناصر <input>
میزبانی کند و صفحه درخواست را در handler onLoad()
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>
در صفحه میزبان خود در صفحه دیگری بارگذاری کرد، مانند این:
other_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)); ?>
جاسازی این تصویر ساده تر از مثال جاوا اسکریپت است، زیرا می توانید به سادگی با یک تگ <img>
به صفحه POST خود اشاره کنید، همانطور که در اینجا نشان داده شده است:
other_page.html
<img width='300' height='300' src='imageserver-image.php'>