學習筆記：MDN的服務器端網站編程

互聯網是如何工做的

互聯網（Internet）和網絡（web）

互聯網是基礎設施，網絡是創建在這種基礎設施之上的服務。

 

網頁，網站，網絡服務器和搜索引擎的區別是什麼？

網頁（webpage）

一份可以顯示在網絡瀏覽器（如Firefox,，Google Chrome，Microsoft Internet Explorer 或Edge，Apple的Safari）上的文檔。網頁也常被稱做"web pages"（網頁）或者就叫"pages"（頁面）。

網站（website）

一個由許多組合在一塊兒，並經常以各類方式相互鏈接的網頁組成的集合。網站常被稱做"web site"（網站）或簡稱"site"（站點）。

網絡服務器（web server）

一個在互聯網上託管網站的計算機。

搜索引擎（search engine）

幫助你尋找其餘網頁的網站，好比Google，Bing，或Yahoo。注：搜索引擎也是網站。

網頁和網站

提示: 瀏覽器也能顯示其餘文檔，例如PDF文件或圖像，但網頁（webpage）這一律念專指HTML文檔。其餘狀況咱們則只會使用文檔（document）這一律念。

網絡上全部可用的網頁均可以經過一個獨一無二的地址訪問到。

網站是共享惟一域名的相互連接的網頁的集合。給定網站的每一個網頁都提供了明確的連接—通常都是可點擊文本的形式—容許用戶從一個網頁跳轉到另外一個網頁。

當網站只包含一個網頁時，網站和網頁兩者尤爲容易弄混。這樣的網站有時稱之爲單頁網站（single-page website）。

網絡服務器

一個網絡服務器是一臺託管一個或多個網站的計算機。 "託管"意思是全部的網頁和它們的支持文件在那臺計算機上均可用。

別把網站和網絡服務器弄混了。例如，當你聽到某人說："個人網站沒有響應"，這實際上指的是網絡服務器沒響應，並所以致使網站不可用。

搜索引擎

瀏覽器是一個接收並顯示網頁的軟件，搜索引擎則是一個幫助用戶從其餘網站中尋找網頁的網站。不要把基礎設施（瀏覽器）和服務（搜索引擎）混淆。

 

什麼是網絡服務器？

概述

「網絡服務器（Web server）」能夠代指硬件或軟件，然而它們都是協同工做的。

1. 在硬件部分，一個網絡服務器是一個用來存儲網站的組成文件（好比說 HTML 文檔，圖片，CSS 樣式表，和 JavaScript 文件）以及交付它們到終端用戶的設備的計算機。它跟互聯網鏈接並能夠經過域名，像mozilla.org，來被訪問。
2. 在軟件部分，一個網絡服務器包括幾個控制網絡用戶如何訪問託管文件的部分，至少是一個 HTTP 服務器 [HTTP server]。一個 HTTP 服務器是一個能理解URLs (網絡地址) 和 HTTP (你的瀏覽器查看網頁時所用的協議) 的軟件。

在最基礎的層次，每當一個瀏覽器須要一個網絡服務器上的託管文件時，瀏覽器會經過 HTTP 請求這個文件。當這個請求到達了正確的網絡服務器（硬件），這個 HTTP 服務器（軟件）返回所請求的文檔，一樣經過 HTTP。

 

 

要發佈一個網站，你須要一個靜態或動態的服務器。

靜態網絡服務器（static web server），或者堆棧，由一個計算機（硬件）和一個 HTTP 服務器（軟件）組成。咱們稱它爲 「靜態」 由於這個服務器把它的託管文件 「保持原樣」 地傳送到你的瀏覽器。

動態網絡服務器（dynamic web server） 由一個靜態的網絡服務器加上額外的軟件組成，最廣泛的是一個應用服務器 [application server] 和一個數據庫 [database]。咱們稱它爲 「動態」 由於這個應用服務器會在經過 HTTP 服務器傳送託管文件到你的瀏覽器前，對這些託管文件進行更新。

舉個例子，要生成你在瀏覽器中看到的最終網頁，應用服務器或許會用一個數據庫中的內容填充一個 HTML 模板。網站像 MDN 或者維基百科 [Wikipedia] 有成千上萬的網頁，可是它們不是真正的 HTML 文檔，它們只是少數的 HTML 模板以及一個巨大的數據庫。這樣的設置讓它更快更簡單地維護以及交付內容。

託管文件

一個網絡服務器首先須要存儲這個網站的文件，也就是說全部的 HTML 文檔和它們的相關資源 [related assets]，包括圖片，CSS 樣式表，JavaScript 文件，字形 [fonts] 以及影像。

嚴格來講，你能夠在你本身的計算機上託管全部的這些文件，可是在一個專用的網絡服務器上存儲它們會方便得多，由於它

• 會一直啓動和運行
• 會一直與互聯網鏈接
• 會一直擁有同樣的 IP 地址（不是全部的 ISPs 都會爲家庭線提供一個固定的 IP 地址）
• 由一個第三方提供者維護

一旦你設置好一個網絡託管解決方案，你只須要去上傳你的文件到你的網絡服務器。

經過HTTP交流

一個網絡服務器提供了 HTTP（超文本傳輸協議）支持。正如它的名字暗示，HTTP 明確提出瞭如何在兩臺計算機間傳輸超文本（好比說連接的網絡文檔 [linked web documents]）。

在一個網絡服務器上，HTTP 服務器要爲處理和應答到來的請求負責任。

1. 當收到一個請求時，一個 HTTP 服務器首先要檢查所請求的 URL 是否與一個存在的文件相匹配。
2. 若是是，網絡服務器會傳送文件內容回到瀏覽器。若是不是，一個應用服務器會創建必要的文件。
3. 若是兩種處理都不可能，網絡服務器會返回一個錯誤信息到瀏覽器，最多見的是 「404 未找到」 ["404 Not Found"]。（這錯誤太常見以致於不少網頁設計者花費多數時間去設計 404 錯誤頁面）

靜態和動態內容

粗略地說，一個服務器能夠提供靜態或者動態的內容。「靜態」 意味着 「保持原樣地提供」。靜態的網站是最容易設立的，因此咱們建議你製做一個靜態的網站做爲你的第一個網站。

「動態」 意味着服務器會處理內容甚至實時地從一個數據庫中產生它。這個解決方案提供了更多的靈活性，可是技術堆棧變得更難去處理，讓創建網站更顯著地複雜。

這裏有太多的應用服務器，因此提供一個具體的服務器是挺難的。有些應用服務器迎合具體的網站類別，像是博客，百科或者電子商店；其餘的應用服務器，叫作 CMSs（內容管理系統 [content management systems]），則更加通用。若是你正在開發一個動態網站，花一些時間去選擇適合你需求的工具。除非你想要學習一些網絡服務器編程 [web server programming]（而這自己就是一個使人興奮的領域！），你不須要去建立你本身的應用服務器。這只是在從新創造輪子。

 

我須要什麼軟件來構建一個網站

須要文本編輯器（建立和編輯網頁）、網絡服務器（上傳文件到網絡）和瀏覽器（瀏覽頁面）。

當你的網站已經爲公衆瀏覽作好準備，你會須要上傳你的網頁到你的網絡服務器。你能夠從不一樣的供應者處購買服務器的空間。一旦你選擇好供應者，供應者會經過電子郵件給你發送 FTP（文件傳輸協議 [file transfer protocol]）訪問信息。

 

服務器端網站編程

服務器端編程的第一步

服務器端介紹

大多數的大型網站採用服務器端編程來在須要的時候動態展現不一樣的信息，這些信息一般會從服務器上的數據庫中取出，而後發送給客戶端，並經過一些代碼（好比HTML和Javascript）展現在客戶端。

或許服務器端編程的最大益處在於它容許你對不一樣的用戶個體展現不一樣的網站信息。動態網站能夠高亮基於用戶喜愛和習慣的與用戶相關度更高的內容。服務器端編程能夠經過存儲偏好設置和其餘我的信息來讓網站更加簡潔——好比經過重複使用信用卡的詳細信息來簡化後續付款流程。

它甚至能夠容許和用戶的線下互動，好比經過郵件或者其餘渠道發送通知和更新信息。服務器端的全部的這些能力使得網站能夠與用戶有更深的聯繫。

網絡瀏覽器經過超文本傳輸協議 (HTTP)來和網絡服務器 進行通訊。當你在網頁上點擊一個連接，或提交一個表單，再或進行一次搜索時，一個HTTP請求就從你的瀏覽器發送到了目標服務器。

網絡服務器等待客戶端的請求信息，在它們到達的時候處理它們，而且回覆網絡瀏覽器一個HTTP迴應信息。

靜態網站是指不管什麼時候當一個特定資源被請求的時候都返回相同的被硬編碼的內容。靜態網站的基本架構以下圖：

 

 

動態網站是指，一些響應內容只有在被須要的時候纔會生髮的網站。在一個動態網站上，頁面一般是經過將數據庫的數據植入到HTML模板中的佔位符中而產生的（這是一種比使用靜態網站有效得多的存儲大量內容的方式）。

支持一個動態網站的代碼中的大多數代碼直接在服務器上運行。編寫這些代碼就是所謂的「服務器端編程」（有些時候也稱「後端腳本編寫」）。

下面的圖表展現了一個動態網站的簡潔的架構:

 

動態網站對於靜態資源的請求的處理方式和靜態網站是同樣的（靜態資源是指那些不會改變的文件——最典型的就是：CSS，Javascript，圖片，預先生成的PDF文件等）。

對於動態資源的請求則會指向（2）服務器端代碼(在圖中顯示爲Web Application（網絡應用））。在處理「動態請求」時，服務器會首先解釋請求，從數據庫中讀取被請求的信息，而後將這些被檢索的信息組合到HTML模板中（4）,最後返回一個包含所生成的HTML頁面的迴應（5,6）。

在瀏覽器端運行的代碼被稱爲客戶端代碼，而且主要涉及所呈現的網頁的外觀和行爲的改進。這就包括選擇和設計UI元素、佈局、導航、表單驗證等。相反的，服務器端網站編程主要涉及，對於相應的請求，選擇所要返回給瀏覽器的內容。服務器端代碼解決這樣一些問題，好比驗證提交的數據和請求、使用數據庫來存儲和檢索信息及發送給用戶正如他們所請求的的正確內容。

開發者們一般會使用web框架來編寫他們的代碼。web框架是一個各類函數、對象、規則和其餘代碼結構的集合體，被設計用來解決一些廣泛問題，從而加速開發，而且簡化在一個特定領域中面臨的不一樣類型的任務。一樣的，當客戶端和服務器端代碼使用框架時，它們的領域是不一樣的，所以框架也會不一樣。客戶端web框架簡化佈局和演示任務，然而服務器端web框架提供大量的普通網絡服務功能，否則的話你可能須要本身來實現這些功能（好比支持會話、支持用戶和身份驗證、簡單的數據訪問、模板庫等）。

注意事項：客戶端框架一般被用來幫助加速客戶端代碼的開發，可是你也能夠選擇手寫全部的代碼；事實上，若是你只須要一個小型的、簡單的網站UI，手寫本身的代碼可能更快而且更高效。相反的，你應該歷來沒有考慮過不使用框架而直接編寫web應用程序的服務器端組件。

你能夠在服務器端作什麼？信息的高效存儲和傳輸、定製用戶體驗、控制對內容的訪問、存儲會話和狀態信息、通知和通信、數據分析。

Client-Server overview

HTTP請求包含定義了請求行爲的方法，好比：

• GET：獲取一份特定資源（好比一個包含了一個產品或者一系列產品相關信息的HTML文檔）。你能夠經過點擊一個連接或者在網站進行一次搜索（好比搜索引擎的首頁）作出一次簡單的GET請求。
• POST：建立一份新的資源（好比給wiki增長一片新的文章、給數據庫增長一個新的節點）。當你提交一個表單，而且但願表單所包含的信息存儲到服務器的時候，你就生成了一次HTTP POST請求。

當你有少許頁面時，向每一個用戶發送相同的內容時，靜態網站是最佳選擇， 然而隨着頁面數量的增長，它們的維護成本也會很高。靜態站點的服務器只須要處理 GET 請求，由於服務器不存儲任何可修改的數據。它也不會根據HTTP的請求數據（例如 URL 參數或 cookie）更改響應。

動態請求：Web 瀏覽器收到返回的 HTML 後才發送單獨的請求以獲取其引用的任何其餘 CSS 或 JavaScript 文件（這時就和靜態網站的工做方式同樣了）。

Web 應用程序（Web Application）的工做是接收 HTTP 請求並返回 HTTP 響應。雖然與數據庫交互以獲取或更新信息是很是常見的功能，可是代碼也可能同時作其餘事情，甚至不與數據庫交互。

服務器端網站代碼並不是只能在響應中返回 HTML 代碼片斷/文件。它能夠動態地建立和返回其餘類型的文件（text，PDF，CSV 等）甚至是數據（JSON，XML等）。

將數據返回到 Web 瀏覽器以便它能夠動態更新本身的內容（AJAX）的想法實現已經有至關長的一段時間了。最近，「單頁面應用程序」已經變得流行起來，整個網站用一個 HTML 文件編寫，在須要時動態更新。使用這種風格的應用程序建立的網站將大量的計算成本從服務器推向網絡瀏覽器，並可能致使網站表現出更像本地應用程序（高度響應等）。

服務器端web框架

Server-side web frameworks (a.k.a. "web application frameworks"（web應用框架）) are software frameworks that make it easier to write, maintain and scale web applications. They provide tools and libraries that simplify common web development tasks, including routing URLs to appropriate handlers, interacting with databases, supporting sessions and user authorization, formatting output (e.g. HTML, JSON, XML), and improving security against web attacks.

Express (Node.js/JavaScript) is a fast, flexible and minimalist web framework for Node.js (node is a browserless environment for running JavaScript). It provides a robust set of features for web and mobile applications.

網站安全性

站點安全就是爲保護站點不受未受權的訪問、使用、修改和破壞而採起的行爲或實踐。

You should understand that a web application cannot trust any data from the web browser! All user data should be sanitized before it is displayed, or used in SQL queries or file system calls.

若是你使用的是服務器端的Web服務框架，那麼多數狀況下它默認已經啓用了健壯而深思熟慮的措施來防範一些較常見的攻擊。其它的攻擊手段能夠經過站點的Web服務器配置來減輕威脅，例如啓用HTTPS。

跨站腳本攻擊XSS（Cross Site Scripting）：防範 XSS 攻擊的最好方式就是刪除或禁用任何可能包含能運行代碼的指令的標記。對 HTML 來講，這些包括相似 <script>, <object>, <embed>,和 <link> 的標籤。修改用戶數據使其沒法用於運行腳本或其它影響服務器代碼執行的過程被稱做輸入過濾。許多Web框架默認狀況下都會對來自HTML表單的用戶數據進行過濾。

跨站請求僞造CSRF（Cross-site request forgery）：杜絕此類攻擊的一種方式是在服務器端要求每一個 POST 請求都包含一個用戶特定的由站點生成的密鑰( 這個密鑰值能夠由服務器在發送用來傳輸數據的網頁表單時提供）。這種方式可使John沒法建立本身的表單，由於他必須知道服務器提供給那個用戶的密鑰值。即便他找出了那個密鑰值，併爲那個用戶建立了表單，他也沒法用一樣的表單來攻擊其餘的全部用戶。

Express 網頁框架 [Express Web Framework (Node.js/JavaScript)]