about 3 years ago

WWW(World Wide Web、Web)

是一個由許多通過網際網路存取而互相連結的 hypertext documents (常用HTML) 組成的系統。
而一個獨立的 WWW 頁面,我們稱之為web pages,web pages是由一些「資源」所構成,
這些「資源」包含了 一個基礎的 hypertext documents 以及可能是 文字、圖片、影音多媒體等檔案,
每一個「資源」都是由 URL 所標識。

HTML(Hyper Text Markup Language)

是用來描述網頁的一種標記語言 (markup language),而標記語言就是一堆標記標籤(markup tag)所構成。
!注意:HTML是標記語言,而不是程式語言(programming language)

<html>
<head>
  <title>Title of document</title>
</head>
<body>
  <h1>Subtitle</h1>
  <p>This is a paragraph</p>
</body>
</html>

XML(EXtensible Markup Language)

XML 和 HTML 是為不同的目的而設計:
XML 被設計為傳輸和存儲數據,其焦點是數據的內容。
HTML 被設計用來顯示數據,其焦點是數據的外觀。
HTML 旨在顯示信息,而XML 旨在傳輸信息。
也因此XML沒有像HTML一樣有預定義標籤(ex:<head>,<p>...)

XHTML(EXtensible HyperText Markup Language)

以XML方式定義HTML,比起HTML更嚴謹。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Title of document</title>
</head>

<body>
  <h1>Subtitle</h1>
  <p>This is a paragraph</p>
</body>

</html>

URL(Uniform / Universal Resource Locator)

一個用以表達可以從網路獲得「資源」之位址的嚴謹字串,也就是要如何找到這個「資源」,格式如下:
<service>://<user>:<password>@<host>:<port>/<url-path>
examples:

  • http://www.cis.nctu.edu.tw/chinese/ccg/titleMain.gif
  • ftp://john:secret@ftp.cis.nctu.edu.tw/projects/book.txt
  • telnet://mail.cis.nctu.edu.tw:110/

HTTP(HyperText Transfer Protocol)

HTTP 是一個跑在應用層(Application Layer)上,client與server之間,request和response的標準。

HTTP有兩種訊息:request, response

request


GET /somedir/page.html HTTP/1.1
Host: www.someschool.edu
User-agent: Mozilla/4.0
Accept-language: zh-TW

其中在HTTP1.1版本的協定中,定義了8種request method

  • GET:向指定的資源發出顯示的請求。
  • POST:向指定資源提交資料(資料被包含在Entity Body中),請求伺服器進行處理。
  • OPTIONS:這個方法可使伺服器傳回該資源所支援的所有HTTP請求方法。
  • HEAD:與GET方法一樣,只不過伺服器將不傳回資源的本文部份。
  • PUT:向指定資源位置上傳其最新內容。
  • DELETE:請求伺服器刪除Request-URI所標識的資源。
  • TRACE:回顯伺服器收到的請求,主要用於測試或診斷。
  • CONNECT:預留給能夠將連線改為管道方式的代理伺服器,通常用於SSL加密伺服器的連結。

一個HTTP伺服器至少要實作GET/POST這兩種方法
GET和POST是我們很常在遞交表單資料時會用到的實作方法:
GET像是張明信片,把地址、內容都寫在上面,
好處就是簡單直覺,但缺點就是資料會被郵差看光的風險,
以及受限於明信片的大小關係,內容跟地址字數就會受到限制。
ex: http://blog.marsw.tw/search?q=安藤忠雄

POST則像是用平信寄出,內容是被信封保護起來,
郵差只看得到地址,看不到信件內容,安全性因此提高不少
而信封的容量也比明信片高很多。
ex: Facebook登入前後,網址都一樣是https://www.facebook.com/

request header有非常多種類,可以參照wiki

response


HTTP/1.1 200 OK
Date: Thu, 07 Jul 2007 12:00:15 GMT
Server: Apache/1.3.0 (Unix)
Last-Modified: SUN, 6 May 2007 …...
Content-Length: 6821
Content-Type: text/html

<html>
<body>
   <h1>Hello World</h1>
   .... 
</body>
</html>

而同樣的 respone header也有非常多種類,可以參照wiki

status code & pharse
透過status code可以了解我們與伺服器的溝通狀態。

Status code 描述 常見範例
1xx 資訊
2xx 成功 200 OK
3xx 重新導向
4xx 客戶端錯誤 403 Forbidden
404 Not Found
5xx 伺服器錯誤 502 Bad Gateway
504 Gateway Timeout

更多詳細的 status code及解釋,可以參照wiki

Cookie


Cookie是存取使用者在瀏覽過程中的紀錄,方便server了解client的資訊。
因為HTTP並不能紀錄client和server之間resquest和response資訊(stateless)
一些互動式的網頁要運作就會需要Cookie的幫忙,
紀錄的內容可能是包括使用者名稱、帳號、上次到訪紀錄,
ex:使用者登入才能使用某些功能、購物車在付帳前要紀錄使用者購買哪些商品、推薦你可能喜歡的商品
有些Cookie還包含密碼,而Cookie在被夾在HTTP request/response之中是以明文傳送的,
就會有安全上的問題,因此通常這種帶有重要資訊的傳送,會使用HTTPS(也就是HTTP加上SSL/TLS的加密)

在一段時間後Cookie就會失效,除了Cookie本身的時效性外
瀏覽器將Cookie存放在哪裡也會決定Cookie何時失效:

  • 存放在記憶體:瀏覽器關閉就失效。 ex:一些網站登入後關閉瀏覽器就要重新登入
  • 存放在硬碟:依Cookie的時效性決定。 ex:有些網站可以保持登入狀態,但過一段時間後就需要重新登入。

另外因為Cookie大小最大不可超過4Kb,同一網域內最多可擁有20個Cookie。
超過數量的 cookie 會自動被捨棄,因此有些瀏覽器會用DOM來取代Cookie,使用DOM也會比Cookie安全。


Cookie vs. Cache
Cookies和Cache都是電腦上的暫存檔,
而Cache主要目的是加速瀏覽速度,
其中圖檔為大宗,其它還有 javascript、xml 等。
一些網站伺服器允許世界各地存取該站cache
這樣瀏覽器就不需要一直request,可以加快瀏覽速度,
伺服器也不用忙於response,節省頻寬消耗。
點進去看每個cache可以看到該資料的時效、
最後一次擷取的時間(Last modified)、擷取次數、記憶體資訊等。
如果網站修改了,cache也會跟著修改,Last modified也會更新。

Cookie vs. Session

工作流程


若要進入WWW上一個網頁,通常你會在瀏覽器上鍵入你想存取網頁的URL,URL的伺服器名部分會被 DNS (Domain Name System)分布於全球的網際網路資料庫解析,並根據解析結果決定進入哪一個 IP address。
ex: cs.nctu.edu.tw <=> 140.113.235.47

再來你的瀏覽器會向在那個IP address的伺服器傳送一個 HTTP request,伺服器會傳回 HTTP response,如果連線正常,HTTP response就會包含構成該網頁的「資源」(HTML、圖片...),接下來瀏覽器會把這些「資源」顯示給你,就是你眼前的「網頁」。


參考


爬蟲系列教學文目錄
爬蟲系列教學文程式碼
安裝Python及Python常用語法可參考 Python - 十分鐘入門

← [書摘] 數位麵包屑裡的各種好主意:社會物理學 - 剖析意念傳播方式的新科學 [Android] 好用的看房筆記 HouseNote (免費) →
 
comments powered by Disqus