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