Tài liệu này mô tả lý do và cách yêu cầu một hình ảnh bằng HTTP POST.
Tổng quan
Nếu bạn đang yêu cầu một hình ảnh trong mã hoặc nếu bạn cần một URL dài hơn 2K ký tự, bạn sẽ cần gửi yêu cầu hình ảnh của mình bằng cách sử dụng HTTP POST. Máy chủ đồ họa thông tin hỗ trợ các yêu cầu POST qua HTTP dài tối đa 16 nghìn.
Dưới đây là ví dụ về loại yêu cầu POST cơ bản nhất: sử dụng phần tử <form>:
Hình ảnh này thực sự là một trang được lưu trữ trong <iframe>. Sau đây là mã biểu mẫu:
<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>
Phản hồi cho một yêu cầu POST hợp lệ là một hình ảnh PNG, giống như phản hồi GET yêu cầu.
Mẹo: Một số trình duyệt yêu cầu lưu vào bộ nhớ đệm một URL cụ thể, vì vậy, ngay cả khi bạn thay đổi các thông số POST, trình duyệt sẽ không thực sự truy vấn lại máy chủ hình ảnh. Điều này có thể gây ra vấn đề khi cố gắng tải lại một hình ảnh
thường xuyên thay đổi (có thể là vấn đề trong quá trình thử nghiệm). Để giải quyết vấn đề này, hãy thêm ?chid=value vào cuối URL của yêu cầu POST, trong đó value sẽ thay đổi theo
mọi yêu cầu: máy chủ hình ảnh sẽ bỏ qua
thông số này và trình duyệt sẽ gửi lại truy vấn chứ không chỉ tải lại phiên bản
đã lưu vào bộ nhớ đệm.
Có một số cách để sử dụng POST và tất cả các cách này đều yêu cầu lập trình thêm trong mã trang hoặc trên máy chủ lưu trữ trang. Để sử dụng POST, thông thường bạn sẽ tạo một trang riêng cho từng hình ảnh và nhúng hoặc liên kết đến các trang này trong trang chính bằng cách sử dụng <iframe> hoặc thẻ <img> như minh hoạ bên dưới.
Dưới đây là ví dụ về cách sử dụng POST với cả JavaScript và PHP.
Sử dụng JavaScript cho yêu cầu POST
Cách dễ nhất để tạo yêu cầu POST cho JavaScript là tạo một trang lưu trữ biểu mẫu có dữ liệu hình ảnh trong các phần tử <input>, đồng thời yêu cầu trang POST yêu cầu trong trình xử lý onLoad() và trang này sẽ được thay thế bằng hình ảnh PNG. Trang lưu trữ hình ảnh này phải bao gồm trang này bằng cách sử dụng <iframe>.
Sau đây là mã cho trang hình ảnh:
Lưu ý: Mẫu bên dưới bao gồm một tham số chid
được đặt thành một giá trị thay đổi trong URL. Điều này khiến trình duyệt làm mới vì lý do được mô tả trong mẹo ở trên. Nếu hình ảnh của bạn không thay đổi thường xuyên, thì bạn không cần thêm thông số đó.
post_graphic.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>
Nếu sử dụng phần tử <form>, thì bạn không cần mã hoá URL của chuỗi.
Sau đó, hình ảnh này có thể được tải vào một trang khác bằng cách sử dụng <iframe>
trong trang lưu trữ của bạn, chẳng hạn như sau:
other_page.html
<iframe src="post_infographic.html" width="300" height="200"></iframe>
Sử dụng PHP cho yêu cầu POST
Hầu hết các ngôn ngữ phía máy chủ đều hỗ trợ các yêu cầu POST rõ ràng. Dưới đây là ví dụ về
cách tạo yêu cầu POST bằng PHP. Ví dụ này minh họa một trang tạo mã QR có 150 giá trị ngẫu nhiên. Để tự sử dụng, bạn sẽ tuỳ chỉnh
mảng $qrcode
để thêm các giá trị của riêng mình.
Lưu ý: Mẫu bên dưới bao gồm một tham số chid
được đặt thành một giá trị thay đổi trong URL. Điều này khiến trình duyệt làm mới vì lý do được mô tả trong mẹo ở trên. Nếu hình ảnh không thay đổi thường xuyên, thì bạn không cần thêm thông số đó.
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));
?>
Cách nhúng hình ảnh này dễ hơn ví dụ về JavaScript, vì bạn có thể chỉ cần trỏ đến trang POST của mình bằng thẻ <img>, như minh hoạ bên dưới:
other_page.html
<img width='300' height='300' src='imageserver-image.php'>