यह दस्तावेज़ बताता है कि एचटीटीपी POST का इस्तेमाल करके इमेज के लिए अनुरोध क्यों और कैसे किया जाए.
खास जानकारी
अगर कोड में इमेज के लिए अनुरोध किया जा रहा है या आपको 2K वर्णों से ज़्यादा लंबे यूआरएल की ज़रूरत है, तो आपको एचटीटीपी POST का इस्तेमाल करके, इमेज के लिए अपना अनुरोध भेजना होगा. इन्फ़ोग्राफ़िक्स सर्वर 16K तक के HTTP POST अनुरोधों का समर्थन करता है.
यहां सबसे बुनियादी तरह के 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 अनुरोध के जवाब के जैसा ही है.
अहम जानकारी: कुछ ब्राउज़र में अनुरोध को किसी खास यूआरएल पर कैश मेमोरी में सेव किया जाता है. इसलिए, अगर आप पोस्ट पैरामीटर में बदलाव करते हैं, तो भी ब्राउज़र इमेज सर्वर को क्वेरी नहीं करेगा. इसकी वजह से, अक्सर बदलने वाली इमेज को फिर से लोड करने में समस्या आ सकती है (जो टेस्ट के दौरान समस्या हो सकती है). इस समस्या का हल करने के लिए, POST यूआरएल के आखिर में ?chid=value जोड़ें, जहां value हर अनुरोध के साथ बदलता है: इमेज सर्वर, इस पैरामीटर को अनदेखा कर देगा और ब्राउज़र, क्वेरी को फिर से भेजेगा और कैश मेमोरी में सेव किए गए वर्शन को फिर से लोड नहीं करेगा.
POST का इस्तेमाल कई तरह से किया जा सकता है और उन सभी के लिए पेज कोड या सर्वर होस्ट करने वाले पेज पर कोडिंग की ज़रूरत पड़ती है. POST का इस्तेमाल करने के लिए, आपको आम तौर पर हर इमेज के लिए एक अलग पेज बनाना होगा. इसके अलावा, इमेज को अपने मुख्य पेज पर एम्बेड या लिंक करना होगा. इसके लिए, <iframe> का इस्तेमाल किया जा सकता है या <img> टैग का इस्तेमाल किया जा सकता है, जैसा कि नीचे दिखाया गया है.
JavaScript और PHP, दोनों के साथ POST का इस्तेमाल करने के उदाहरण यहां दिए गए हैं.
पोस्ट अनुरोध के लिए JavaScript का इस्तेमाल करना
JavaScript POST का अनुरोध करने का सबसे आसान तरीका यह है कि ऐसा पेज बनाएं जो <input> एलिमेंट में इमेज डेटा वाले फ़ॉर्म को होस्ट करता हो और अनुरोध को onLoad() हैंडलर में पोस्ट करें. इसके बाद, पेज को इमेज PNG फ़ॉर्मैट से बदल दिया जाएगा. इस इमेज को होस्ट करने वाले पेज में, <iframe> का इस्तेमाल करके यह पेज शामिल होना चाहिए.
यहां इमेज पेज के लिए कोड दिया गया है:
ध्यान दें: नीचे दिए गए उदाहरण में, एक chid पैरामीटर शामिल है जिसे यूआरएल में बदलती वैल्यू के लिए सेट किया गया है. इससे ऊपर दी गई सलाह में बताई गई वजह के लिए, ब्राउज़र रीफ़्रेश हो जाता है. अगर आपकी इमेज अक्सर नहीं बदलती है, तो आपको
वह पैरामीटर जोड़ने की ज़रूरत नहीं है.
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> एलिमेंट का इस्तेमाल करते हैं, तो आपको अपनी स्ट्रिंग को यूआरएल-एन्कोड नहीं करना होगा.
इसके बाद, इस इमेज को आपके होस्ट पेज में <iframe> का इस्तेमाल करके, किसी दूसरे पेज पर लोड किया जा सकता है. जैसे:
another_page.html
<iframe src="post_infographic.html" width="300" height="200"></iframe>
पोस्ट अनुरोध के लिए PHP का इस्तेमाल करना
सर्वर-साइड वाली ज़्यादातर भाषाएं, POST अनुरोधों के साथ काम करती हैं. यहां एक उदाहरण है, जिसमें
PHP का इस्तेमाल करके, पोस्ट अनुरोध करने का तरीका बताया गया है. इस उदाहरण में, एक ऐसे पेज को दिखाया गया है जो
150 रैंडम वैल्यू वाला क्यूआर कोड जनरेट करता है. इसका इस्तेमाल करने के लिए, आपको $qrcode कैटगरी को अपने हिसाब से बनाना होगा, ताकि आप उसमें अपनी वैल्यू शामिल कर सकें.
ध्यान दें: नीचे दिए गए उदाहरण में, एक chid पैरामीटर शामिल है जिसे यूआरएल में बदलती वैल्यू के लिए सेट किया गया है. इससे ऊपर दी गई सलाह में बताई गई वजह के लिए, ब्राउज़र रीफ़्रेश हो जाता है. अगर आपकी इमेज अक्सर नहीं बदलती है, तो आपको यह पैरामीटर जोड़ने की ज़रूरत नहीं है.
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 के उदाहरण से आसान है. ऐसा इसलिए, क्योंकि इस टैग की मदद से, अपने पोस्ट पेज पर <img> टैग का इस्तेमाल किया जा सकता है, जैसा कि यहां दिखाया गया है:
another_page.html
<img width='300' height='300' src='imageserver-image.php'>