SHTML && Javascript (AJAX) && PHP


SHTML——這看起來很古老的 (Apache 1.3 的官方Tutorial 已經收錄了,應該很有歷史吧),個人認為就是AJAX 的前身。根據維基百科的定義

Server Side Includes (SSI) is a simple interpreted server-side scripting language used almost exclusively for the Web.

The most frequent use of SSI is to include the contents of one or more files into a web page on a web server.

SSI 就是為網頁提供非常基本的 Server 跟 Client 的 Interaction。

(Oreilly)
(Oreilly)

一句話定義

就是 Server 在傳送 網頁 到 Client Side 前,先把 shtml 的相關Script 編譯、把結果加到網頁,然後整張網頁內容輸出。

把時間印到網頁上

  1. 如果看的網頁是 html——用AJAX的方式,從 Client 的瀏覽器召喚一段 CGI 的程序,然後從 Server 傳送回 Client。比如說要 Server 的現在時間,就可用以下 PHP Code:
    <?php
        ...
        $now = new DateTime();
        echo $now->format('Y-m-d H:i:s');
    ?>

    然後在Client 的瀏覽器,用Javascipt 收取現在的時間資料,再編譯到網頁上。

  2. 如果直接用 php 網頁——直接就 echo 出去了。
  3. 如果用SHTML——
    (HTML Comment Begin)#config timefmt="%A %B %d, %Y" (HTML Comment End)
    
    Today is(HTML Comment Begin)#echo var="DATE_LOCAL" (HTML Comment End)
    

這樣的代碼,在 Server 的運作過程是這樣的: Server 先讀取 .shtml 這檔案 –> 解讀 “ 融合到 .shtml –> 傳給 Client 的瀏覽器

把通用的網頁合併到不同的網頁 (e.g. header, footer, navbar)

個人認為這個作用比較大,但對於 Server-side 和 Client-side 的負載 vs. 把 header 的 code 放到所有網頁,所以實際應用還是不大。

用一下 shtml 代碼解釋一下:

<!--#include virtual="/footer.html" -->
<!--#include file="/header.html" -->

(用 “virtual" 或者 “file" 效果都是一樣的,但 “virtual"  的可以用 absolute path,而 “file" 不可以)

  1. 跟Javascript 比較——
    • (v) 沒有開啟 Javascript 的瀏覽器都可以編譯內容,雖然現在所有瀏覽器都有開啟 javascript
    • (x) 一旦載入了網頁,如果要變更內容,還是需要 javascript
    • (~) 倒不如直接把 header, footer 的代碼寫入網頁
  2. 跟php 比較——
    • (x) 雖然 Server 要編譯的代碼很少,不需要 “echo",但相對 php,Server workload 應該沒分別的

初步探究,還是用回 javascript/ cgi 算了~

跟 Javascript || PHP 相比,shtml 實在是太陽春了,畢竟當年還未有成熟的 AJAX 技術,所以在當時可能就會用到,但現在已經銷聲匿跡了(很多網頁還有 .shtml 的網頁,但相關的教學極其稀有)。

閱讀更多

  1. Apache Tutorial: Introduction to Server Side Includes
  2. Washington University – An SHTML sample
  3. SSI-Developer.net – SSI Tutorials, Server Side Includes

塗牆

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s