เอกสารนี้จะอธิบายสาเหตุและวิธีขอรูปภาพโดยใช้ 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
วิธีที่ง่ายที่สุดในการส่งคําขอ JavaScript POST คือการสร้างหน้าที่โฮสต์แบบฟอร์มที่มีข้อมูลรูปภาพในองค์ประกอบ <input>
และกําหนดให้หน้า POST ยอมรับคําขอในเครื่องจัดการ 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 ตัวอย่างนี้แสดงหน้าที่สร้างคิวอาร์โค้ดที่มีค่าแบบสุ่ม 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>
ได้ ดังที่แสดงด้านล่างนี้
other_page.html
<img width='300' height='300' src='imageserver-image.php'>