iT邦幫忙

DAY 7
1

網站系統規劃實務系列 第 7

網站系統規劃 - 網站狀態介紹

本篇作為第七篇,也是第一週的結尾,
我們將介紹網頁中常被忽略的細節,header status 。

想知道網頁常見的 404 、500、403 等數字是什麼嗎?
想知道還有什麼更多的秘密藏在 status 裡面? 那看這篇這就對了唷。:)

--------系列簡介--------
網站系統可說是現在最多學子與新人想要入門的一個領域,
這個原本屬於新興的領域,這幾年來也累積許多年的知識與 pattern ,
在有限的環境(stateless)與有限的伺服器端、瀏覽器資源下,
成為許多人進入程式的一塊入門鐵板(?)。

這個系列希望能夠就網站系統設計幾個門檻著手,
這是設定給初心者作為學習,給同好們作為回顧,

重新認識有關網站系統的每個環節。
有時候寫文章或者辦活動,常常有感於時間的快速啊,
本篇作為第一週最後一篇,就份量而言也相對輕,有點算是中場休息(笑)。

不過有別於前幾天的龐雜內容,讀者或許可以鬆口氣,看看一些網頁上的小品資訊。

今天我們主要要介紹的是網頁上的幾種狀態,
這些狀態對一個網站系統而言,是很重要的。

@ 網頁狀態?是讀取中、讀取結束這種狀態嗎?

不,我們說得不是這種網頁讀取過程的狀態,

我們說的是一個網址在一個網站伺服器中,
執行結束後,伺服器回應我們的 html 時一併告訴我們的狀態。

@ 咦?不是給一個網址,存取一個網頁,就這麼簡單而已嗎?

正常的情況的確是如此,但假設今天有這樣一個情境,
如果您今天存取一個網址,這個網址原本存在,

後來因為更改命名或檔案名稱,導致網頁不存在。

這時候我們會希望伺服器負責任地,告訴瀏覽器說這網頁不存在,
讓瀏覽器存取時能明白發生什麼事情,而提示使用者。

像這個例子,當 Chrome 瀏覽器發現網址不存在時,預設的回應畫面:

@ 可是我更常看到的不是這個畫面,而是像這個畫面耶?

對,之前的例子主要是出現在當網站伺服器沒有回應時,

一般而言我們都會像這個例子回傳網頁找不到(404 Not found)與對應的自訂錯誤頁面給瀏覽器,
藉此讓瀏覽器知道 web server 存在,但是這個網址對應到的內容並不存在。

也因為我們要回應不同的內容,所以瞭解不同的狀態碼(status),
以利知道要設計無法存取的畫面給瀏覽器就很重要囉。

當然,相信冰雪聰明的您也知道 404 就是無法存取網頁的狀態碼囉!

上圖是 apache 這個網頁伺服器預設的 404 頁面,相信大家應該不陌生才是。

好的 404 頁面,通常會引導使用者到可能有他們需要的資訊的地方,
像是天瓏書局的 404 頁面就設計的很可愛,並且親切的導引使用者到首頁瀏覽更多資料。

讀者可以自己前往看看
http://www.tenlong.com.tw/the\_url\_not\_found

@ 除了網頁找不到以外,我還需要處理其他狀態嗎?

其實還有蠻多種狀態需要處理的,維基上有詳細的列表
http://en.wikipedia.org/wiki/List\_of\_HTTP\_status\_codes

底下簡單列出筆者工作經驗中比較常接觸到與為他做處理的狀態:

頁面狀態:
200 伺服器正常回應,一般正常狀況下應該是這個。
404 網頁找不到,通常需要設計頁面。
403 您沒有存取頁面所需要的權限(常見於管理後台),設計權限控管時常用。
500 伺服器發生內部錯誤(網址正確但資料庫在未知的情況下掛掉的。),例外處理時常用。
503 服務目前無法使用。(如已知資料庫掛掉正在處理中跟 500 的差別在於一個是未知例外,一個是有在預期中的狀態。)

轉址(redirect)狀態
301 永久性頁面轉址
302 暫時性頁面轉址

快取狀態
304 網頁沒有改變。

@ 呃,可是維基上有一堆狀態耶?

對,不過比較常用的其實是這些,當然如果您想實作更多狀態也無妨。

@ 什麼是轉址呢?

轉址狀態比較特別,是頁面轉址時需要的,

假設我一開始是到 http://tonyq.org/test1.php ,但是我在 test1.php 裡面進行判斷,
發現其實使用者應該去 http://tonyq.org/test2.php ,這時候就需要轉址(redirect)的行為。

test1.php 應該要回傳轉址的狀態碼,並且告知目標為 test2.php 。

此時瀏覽器會先後詢問 test1.php ,之後透過狀態碼瞭解應該要去 test2.php ,
最後正確無誤的存取 http://tonyq.org/test2.php 的資料。

@ 302 與 301 的差別在哪呢?

302 暫時性頁面跳轉

一個是像是登入後的頁面跳轉,這種比較屬於 302 ,
暫時性而非永久性的跳轉,也有可能因為不同條件跳轉不同頁面。

php 實作例子

<?php header('Location: http://tonyq.org/the_new_url', true, 302);  ?>

301 永久性頁面跳轉

舊資料可能更名,像是 test1.php 換名字變成 test5.php ,
所以我們常常會設計成當使用者存取 test1.php 時,自動轉向 test5.php 。

此時就應該使用 301 永久跳轉,
來讓瀏覽器跟搜尋引擎瞭解,test1.php 已經不再被使用了。

php 實作例子

<?php header('Location: http://tonyq.org/the_new_url', true, 301);  ?>

@ 有什麼我應該要注意的呢?

如果你只考慮要給使用者看得頁面,狀態是 500 或者 200 基本上沒差的。

大概只有一些第三方的服務,如 search engine 、ajax 等,
會依賴狀態碼進行判斷作
但是不同的狀態碼對於 Search Engine 就有很大的影響,

像是如果 search engine 看到 503 ,他可能會之後儘快再回來處理一次頁面。

有許多網站常常會明明畫面顯示是 404 或 500 的畫面,
但狀態碼卻是 200,明明是過期資料的轉址,卻呈現 302 。

這些都會造成搜尋引擎的誤會,對所謂的搜尋引擎最佳化(SEO)也會有不好的影響。

像是明明就不存在的網址,卻被當成一般正常網址被索引到搜尋引擎,
這也是件很糟糕的事情。

今天的介紹就先到這裡,有關 header 的秘辛還有很多,
像是快取(cache)、壓縮格式(gzip)、來源網址(refer)等等。

以後談到時,我們會再介紹的。:)

第一週我們介紹的是網頁一些基本的環境基礎知識,在我們正式進入系統設計之前,
總是要明白我們手上能用的組件是什麼,所以我們用了一整週講了很多基礎的基本常識。

有些人跟筆者反應這些有點太基本過頭了,但是就筆者的前端開發經驗裡面,
其實說真的,許多的問題都是從基本功的不紮實所造成的,
所以當自己有機會寫文章時,就不得不從基本開始說起。:)

當然,篇幅有限、時間有限、主題有限,
所以沒辦法講進所有環節,寫起來就有些太過於複雜。(實在是求好心切啊~:P)

下一週開始我們將專注於資料庫(以mysql 為例)的基本操作,
我要出門吃烤肉了(笑),明天見。:)


上一篇
網站系統規劃 - 靜態網頁與動態網頁的故事
下一篇
網站系統規劃 - 換個角度想想,談將想法描述成情境的練習
系列文
網站系統規劃實務27

2 則留言

0
tony1223
iT邦新手 2 級 ‧ 2012-10-07 00:34:06

剛剛發現 Google 網站管理員工具也有相關介紹,摘錄當引用。 :)

http://support.google.com/webmasters/bin/answer.py?hl=zh-Hant&answer=40132

0
Mr_White
iT邦見習生 ‧ 2017-06-29 12:07:07

你寫得很好。好難得才有機會看到這樣的教學文章。

我要留言

立即登入留言