伺服器端簡介
歡迎來到 MDN 初學者伺服器端程式設計課程！在本文中，我們將從高層視角審視伺服器端程式設計，回答諸如“它是什麼？”、“它與客戶端程式設計有何不同？”以及“為什麼它如此有用？”等問題。閱讀本文後，您將瞭解透過伺服器端編碼為網站帶來的額外功能。
| 預備知識 | 對什麼是 Web 伺服器有基本的瞭解。 |
|---|---|
| 目標 | 熟悉什麼是伺服器端程式設計，它能做什麼，以及它與客戶端程式設計有何不同。 |
大多數大型網站都使用伺服器端程式碼在需要時動態顯示不同的資料，這些資料通常從儲存在伺服器上的資料庫中提取，並透過一些程式碼（例如 HTML 和 JavaScript）傳送到客戶端進行顯示。
伺服器端程式碼最顯著的好處也許是它允許您為單個使用者量身定製網站內容。動態網站可以根據使用者的偏好和習慣突出顯示更相關的內容。它還可以透過儲存個人偏好和資訊使網站更易於使用——例如，重複使用儲存的信用卡詳細資訊以簡化後續付款。
它甚至可以允許與網站使用者互動，透過電子郵件或其他渠道傳送通知和更新。所有這些功能都能實現與使用者的更深入互動。
在現代 Web 開發世界中，強烈建議學習伺服器端開發。
什麼是伺服器端網站程式設計？
Web 瀏覽器使用 HyperText Transfer Protocol (HTTP) 與Web 伺服器通訊。當您點選網頁上的連結、提交表單或執行搜尋時，一個 HTTP 請求會從您的瀏覽器傳送到目標伺服器。
該請求包含一個用於標識受影響資源的 URL，一個定義所需操作的方法（例如獲取、刪除或釋出資源），並且可能包含編碼在 URL 引數中（透過查詢字串傳送的欄位-值對）、作為 POST 資料（透過HTTP POST 方法傳送的資料）或在相關cookie中的附加資訊。
Web 伺服器等待客戶端請求訊息，在收到後對其進行處理，並使用 HTTP 響應訊息回覆 Web 瀏覽器。響應包含一個狀態行，指示請求是否成功（例如，成功時為“HTTP/1.1 200 OK”）。
成功請求的響應主體將包含請求的資源（例如，一個新的 HTML 頁面或一張圖片），然後 Web 瀏覽器可以顯示該資源。
靜態網站
下圖顯示了*靜態網站*的基本 Web 伺服器架構（靜態網站是指在請求特定資源時，伺服器返回相同的硬編碼內容的網站）。當用戶想要導航到某個頁面時，瀏覽器會發送一個 HTTP "GET" 請求，並指定其 URL。
伺服器從其檔案系統中檢索請求的文件，並返回包含該文件和成功狀態（通常為 200 OK）的 HTTP 響應。如果由於某種原因無法檢索檔案，則返回錯誤狀態（請參閱客戶端錯誤響應和伺服器錯誤響應）。
動態網站
動態網站是指部分響應內容是*動態*生成，僅在需要時生成。在動態網站上，HTML 頁面通常是透過將資料庫中的資料插入到 HTML 模板中的佔位符來建立的（這是一種比使用靜態網站儲存大量內容更有效的方式）。
動態網站可以根據使用者提供的資訊或儲存的偏好，為同一個 URL 返回不同的資料，並可以在返回響應時執行其他操作（例如，傳送通知）。
支援動態網站的大部分程式碼必須在伺服器上執行。建立此程式碼稱為“伺服器端程式設計”（或有時稱為“後端指令碼”）。
下圖顯示了*動態網站*的架構。與上圖一樣，瀏覽器向伺服器傳送 HTTP 請求，然後伺服器處理請求並返回適當的 HTTP 響應。
對*靜態*資源的請求以與靜態站點相同的方式處理（靜態資源是指任何不改變的檔案——通常是：CSS、JavaScript、圖片、預建立的 PDF 檔案等）。
對動態資源的請求則轉發 (2) 到伺服器端程式碼（在圖中顯示為*Web 應用程式*）。對於“動態請求”，伺服器解釋請求，從資料庫中讀取所需資訊 (3)，將檢索到的資料與 HTML 模板組合 (4)，併發送回包含生成的 HTML 的響應 (5,6)。
伺服器端和客戶端程式設計是一樣的嗎？
現在讓我們關注伺服器端和客戶端程式設計中涉及的程式碼。在每種情況下，程式碼都大相徑庭。
- 它們有不同的目的和關注點。
- 它們通常不使用相同的程式語言（JavaScript 是例外，它可以在伺服器端和客戶端使用）。
- 它們在不同的作業系統環境中執行。
在瀏覽器中執行的程式碼被稱為**客戶端程式碼**，主要關注改進渲染網頁的外觀和行為。這包括選擇和樣式化 UI 元件、建立佈局、導航、表單驗證等。相比之下，伺服器端網站程式設計主要涉及選擇*哪些內容*作為請求的響應返回給瀏覽器。伺服器端程式碼處理的任務包括驗證提交的資料和請求、使用資料庫儲存和檢索資料以及根據需要向客戶端傳送正確的資料。
客戶端程式碼使用HTML、CSS 和JavaScript 編寫——它在 Web 瀏覽器中執行，並且幾乎或完全無法訪問底層作業系統（包括對檔案系統的有限訪問）。
Web 開發者無法控制每個使用者可能使用什麼瀏覽器來檢視網站——瀏覽器對客戶端程式碼功能的相容性水平不一致，客戶端程式設計的挑戰之一就是優雅地處理瀏覽器支援方面的差異。
伺服器端程式碼可以用多種程式語言編寫——流行的伺服器端 Web 語言包括 PHP、Python、Ruby、C# 和 JavaScript (NodeJS)。伺服器端程式碼可以完全訪問伺服器作業系統，開發者可以選擇他們希望使用的程式語言（和特定版本）。
開發者通常使用**Web 框架**編寫程式碼。Web 框架是函式、物件、規則和其他程式碼結構的集合，旨在解決常見問題、加快開發速度並簡化特定領域中面臨的不同型別的任務。
同樣，儘管客戶端和伺服器端程式碼都使用框架，但它們的領域截然不同，因此框架也不同。客戶端 Web 框架簡化了佈局和展示任務，而伺服器端 Web 框架提供了許多您可能需要自己實現的“通用”Web 伺服器功能（例如，對會話的支援、對使用者和身份驗證的支援、簡易的資料庫訪問、模板庫等）。
注意：客戶端框架通常用於幫助加快客戶端程式碼的開發，但您也可以選擇手動編寫所有程式碼；事實上，如果您只需要一個小型、簡單的網站 UI，手動編寫程式碼可能會更快、更高效。
相比之下，你幾乎不會考慮在沒有框架的情況下編寫 Web 應用程式的伺服器端元件——從頭開始用 Python 等語言實現 HTTP 伺服器這樣重要的功能真的很難，但像 Django 這樣的 Python Web 框架開箱即用，並提供其他非常有用的工具。
您可以在伺服器端做什麼？
伺服器端程式設計非常有用，因為它允許我們*高效地*為單個使用者提供定製的資訊，從而創造更好的使用者體驗。
像亞馬遜這樣的公司使用伺服器端程式設計來構建產品搜尋結果，根據客戶偏好和以前的購買習慣提出有針對性的產品建議，簡化購買流程等。
銀行使用伺服器端程式設計儲存賬戶資訊，並且只允許授權使用者檢視和進行交易。其他服務，如 Facebook、Twitter、Instagram 和維基百科，使用伺服器端程式設計來突出顯示、共享和控制對有趣內容的訪問。
以下列出了一些伺服器端程式設計的常見用途和好處。您會注意到其中有一些重疊！
資訊的有效儲存和傳輸
想象一下亞馬遜上有多少產品，以及 Facebook 上釋出了多少帖子？為每個產品或帖子建立單獨的靜態頁面是完全不切實際的。
伺服器端程式設計允許我們將資訊儲存在資料庫中，並動態構建和返回 HTML 和其他型別的檔案（例如 PDF、影像等）。也可以返回資料（JSON、XML 等），供適當的客戶端 Web 框架渲染（這減少了伺服器的處理負擔和需要傳送的資料量）。
伺服器不僅限於傳送資料庫中的資訊，還可以返回軟體工具的結果或來自通訊服務的資料。內容甚至可以針對接收它的客戶端裝置型別進行定製。
因為資訊儲存在資料庫中，所以它也可以更容易地與其他業務系統共享和更新（例如，當產品線上銷售或在商店銷售時，商店可能會更新其庫存資料庫）。
注意：您無需費力想象即可看到伺服器端程式碼在高效儲存和傳輸資訊方面的優勢
- 訪問亞馬遜或其他電子商務網站。
- 搜尋多個關鍵字，並注意即使結果發生變化，頁面結構也不會改變。
- 開啟兩到三個不同的產品。再次注意它們具有共同的結構和佈局，但不同產品的內容已從資料庫中提取。
對於一個常見的搜尋詞（例如“魚”），您可以看到數百萬個返回結果。使用資料庫可以高效地儲存和共享這些結果，並且可以在一個地方控制資訊的呈現。
定製使用者體驗
伺服器可以儲存和使用有關客戶的資訊，以提供方便和定製的使用者體驗。例如，許多網站儲存信用卡，這樣就不必再次輸入詳細資訊。像 Google Maps 這樣的網站可以使用儲存的或當前的位置來提供路線資訊，以及搜尋或旅行歷史記錄來突出顯示搜尋結果中的本地商家。
對使用者習慣的更深入分析可以用來預測他們的興趣並進一步定製響應和通知，例如提供一個您可能想在地圖上檢視的以前訪問過的或熱門地點的列表。
受控的內容訪問
伺服器端程式設計允許網站限制對授權使用者的訪問，並只提供使用者被允許檢視的資訊。
實際示例包括社交網路網站，它們允許使用者決定誰可以看到他們釋出到網站上的內容，以及誰的內容出現在他們的動態中。
注意：考慮其他實際示例，其中對內容的訪問受到控制。例如，如果您訪問銀行的線上網站，您能看到什麼？登入您的賬戶——您能看到和修改哪些額外資訊？您能看到哪些只有銀行才能更改的資訊？
儲存會話/狀態資訊
伺服器端程式設計允許開發人員利用**會話**——基本上，它是一種機制，允許伺服器儲存與網站當前使用者相關的資訊，並根據該資訊傳送不同的響應。
這允許，例如，網站知道使用者以前登入過，並顯示其電子郵件或訂單歷史記錄的連結，或者可能儲存一個簡單遊戲的狀態，以便使用者可以再次訪問網站並從上次離開的地方繼續。
注意：訪問一個有訂閱模式的報紙網站並開啟一堆標籤（例如The Age）。在幾個小時/幾天內繼續訪問該網站。最終，您將開始被重定向到解釋如何訂閱的頁面，並且您將無法訪問文章。此資訊是儲存在 cookie 中的會話資訊的示例。
通知和通訊
伺服器可以透過網站本身或透過電子郵件、簡訊、即時訊息、視訊通話或其他通訊服務傳送通用或特定於使用者的通知。
幾個例子包括
- Facebook 和 Twitter 傳送電子郵件和簡訊通知您新的通訊。
- 亞馬遜定期傳送產品電子郵件，推薦與您已購買或檢視的產品相似且您可能感興趣的產品。
- Web 伺服器可能會向網站管理員傳送警告訊息，提醒他們伺服器記憶體不足或存在可疑使用者活動。
注意：最常見的通知型別是“註冊確認”。選擇您感興趣的幾乎任何大型網站（Google、Amazon、Instagram 等），並使用您的電子郵件地址建立一個新帳戶。您很快就會收到一封電子郵件，確認您的註冊，或要求確認以啟用您的帳戶。
資料分析
網站可能會收集大量關於使用者的資料：他們搜尋什麼，他們購買什麼，他們推薦什麼，他們在每個頁面上停留多長時間。伺服器端程式設計可以用於根據對這些資料的分析來最佳化響應。
例如，亞馬遜和谷歌都根據之前的搜尋（和購買）來推廣產品。
注意：如果您是 Facebook 使用者，請進入您的主動態並檢視帖子流。請注意有些帖子的順序不是按時間順序的——特別是，獲得更多“贊”的帖子通常比最近的帖子排在列表的前面。
也看看您看到了什麼樣的廣告——您可能會看到在其他網站上瀏覽過的商品的廣告。Facebook 突出內容和廣告的演算法可能有點神秘，但很明顯它確實取決於您的喜好和瀏覽習慣！
總結
恭喜，您已完成關於伺服器端程式設計的第一篇文章。
您現在已經瞭解到伺服器端程式碼在 Web 伺服器上執行，其主要作用是控制*哪些*資訊傳送給使用者（而客戶端程式碼主要處理資料的結構和向用戶的呈現）。
您還應該理解它之所以有用，是因為它允許我們建立能夠*高效地*為單個使用者提供定製資訊的網站，並且您對成為伺服器端程式設計師後能夠做的一些事情有很好的瞭解。
最後，您應該明白伺服器端程式碼可以用多種程式語言編寫，並且您應該使用 Web 框架來使整個過程更容易。
在未來的文章中，我們將幫助您為您的第一個網站選擇最佳的 Web 框架。在這裡，我們將更詳細地向您介紹主要的客戶端-伺服器互動。