天天看點

【POST Requests】POST請求

如果隻是想使用qr生成的而已,直接點選這裡 -->  http://blog.csdn.net/eadio/article/details/25328011

原位址:

https://developers.google.com/chart/infographics/docs/post_requests

先聲明不知怎麼授權,隻是想翻譯轉載過來的,如果不行的話,請告知,會删掉的。。。

本章介紹為什麼以及怎樣請求使用HTTP POST來請求一張圖像

簡介

======================================================================

如果你在代碼裡請求一張圖像【requestingan image in code】,或者你需要一串長度超過2K的字元串,那麼你需要使用HTTP POST來發送你的圖像請求。該資訊圖表伺服器支援HTTP POST請求高達16K長。

下面最基本的POST請求示例:使用<form>元素

<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>       
此圖檔實際上是托管在一個<iframe>的頁面,下面是<form>代碼:      
<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參數,但是實際上浏覽器并沒有重新查詢圖像伺服器。當你試圖重新加載一張經常變化的圖像(也許是你在測試過程中的問題),這樣就可能導緻出現這種情況了。要解決這個問題,在每個請求值變化的POST URL的末尾添加參數?chid=value:【這個可能有點拗口,待會下面有例子可以好好觀察,其實就是在https://chart.googleapis.com/chart後面添加參數而已】圖像伺服器将忽略這個參數,而浏覽器則會重新發送查詢而不在是簡單的加載緩存中的版本。      
有許多的方式使用POST,所有這些都需要額外的編碼無論是頁面上編碼還是在伺服器上托管頁面。要使用POST的話,你通常都會建立一個單獨的頁面來設定圖像,然後在你的首頁使用<iframe>或者是<img>标簽來嵌入或者連結這些單獨的頁面,下面将為你介紹這些。      
下面是使用POST與javascript和PHP的例子      
使用javascript進行POST請求      
使用javascript POST請求的最簡單的方法是建立一個将圖像資料包含在<input>元素的表單頁面,并讓頁面開啟的同時自動發送POST請求,使用onload()事件處理,頁面就會被PNG格式的圖像所取代,承載此圖像的頁面必須使用<iframe>元素包括本頁。下面是圖像頁面代碼:      
注:下面的示例包含在URL中使用chid參數設定來改變值,這會導緻浏覽器重新整理是為了解決上述提示中描述到的問題。但是如果你的圖像并沒有經常更新變化,你并不需要強制加上這個參數。      
post_infographic.html      

<htmlxmlns="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 οnlοad="loadGraph()">

   <form action='https://chart.googleapis.com/chart' method='POST'id='post_form'

         οnsubmit="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>元素,像下面這樣:

another_page.html

<iframesrc="post_infographic.html" width="300"height="200"></iframe>

使用PHP的POST請求

大多數伺服器端語言支援顯式的POST請求。這裡是使用PHP做一個POST請求的例子。這個例子示範了随機生成150個随機值的QR生成碼。要使用這個,你必須使用一個$qrcode的數組來包含圖像資料。

注:下面的示例包含在URL中使用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>标簽就能指向到你的POST頁面,如下所示:

another_page.html

<img width='300' height='300'src='imageserver-image.php'>

繼續閱讀