從你的WEB世界路過之--0.初識

0. 前言

人可一日無飯, 不可一日無網.

互聯網發展至今天, 基於網絡的應用數不勝數... 衣食住行均可以經過互聯網來實現. WEB開發指的就是開發這些基於互聯網的系統. 任何一個行業都會源源不斷的有新人進入. 特別是互聯網行業. WEB開發算是一個技術工種, 對於新人來講, 各類名詞, 思想, 框架會把人折磨的死去活來. 本系列文章旨在用最通俗的語言幫助新入行的同窗從最0開始, 學會J2EE下的WEB開發. 爲了讓新同窗可以用最快的時間學會WEB開發. 文章中只會說起必要的概念. 下面, 開始你的學習之旅吧~~

1. WEB基本概念

很早以前, 你用一些軟件的時候須要下載並安裝後才能使用, 如QQ, 迅雷等等. 有一天你換了一臺電腦, 發現電腦上沒有軟件, 你不得再也不次下載安裝. 忽然有一天你的操做系統很不幸掛了, 下載.....安裝....., 漫長的等待. 後來你發現電腦上有個叫瀏覽器的東東, 打開它輸入網址就能夠訪問一個網站, 操做系統都有默認的瀏覽器, 因此你只須要記住網址, 在任一一個電腦上均可以訪問網站了, 比之前方便多了. 在後來, 愈來愈多的系統都是基於瀏覽器開發的. 因而軟件衍生出兩種模式: 安裝在客戶端和經過瀏覽器訪問.

1.1 C/S&B/S

咱們把須要下載安裝在客戶端的軟件叫作C/S架構(Client/Server), 即客戶端/服務器, 使用瀏覽器就能夠訪問的軟件叫B/S(Browser/Server), 即瀏覽器/服務器. B/S架構的優點很明顯:

• 電腦上只須要有瀏覽器便可訪問軟件(操做系統默認都有瀏覽器), 不須要下載安裝.
• 軟件開發時不須要區分客戶端操做系統, C/S軟件須要區分windows, linux, mac..
• 系統升級時不須要在客戶端更新後安裝, 只須要在服務器升級便可

B/S架構的在開發時間和維護成本上有着很明顯的優點, 但人無完人, 缺點一樣很明顯: 若是沒有網絡或網速極慢時B/S就無用武之地了. 因爲B/S較C/S的優點較多而且網絡環境也愈來愈好, 所以愈來愈多的系統都採用B/S結構. 咱們說開發一個B/S結構的系統就叫作WEB開發. 學習WEB開發前必定要明白他的原理.

當咱們使用一個B/S軟件時, 首先打開瀏覽器, 輸入網址. 幾秒鐘以後一個漂亮的頁面就出如今咱們的瀏覽器中了. 在這過程當中發生了什麼呢? 簡單說就是瀏覽器根據網址找到服務器, 服務器把你想要的返回給瀏覽器. 但實際上比這個複雜的多.

先來介紹幾個經常使用的概念:

1.2 IP

現實生活中的每一個建築物都有本身的地址, 好比XX市XX路XX號, 經過地址就能夠找到這個建築. 在網絡中的每臺電腦也都有一個相似的地址, 經過該地址就能在網絡中找到這臺電腦, 這個地址叫作IP地址. IP格式: 112.34.56.33, 任何一臺電腦鏈接網絡後都有IP, 這個IP只有在局域網中才能被識別. 公司內部能夠經過IP鏈接到你的電腦, 可是在美國就沒法鏈接到了. 若是想在任何一個地方均可以經過IP鏈接你的電腦須要設置獨立IP(須要額外的費用). 局域網IP至關於辦公室的工位號, 只有公司內部才識別. 購物時只填寫工位號快遞是找不到你的, 你須要花錢爲你的工位購買一個全球識別的地址(獨立IP).

1.3 服務器

一臺放B/S程序的電腦, 若是你的服務器想被全部人訪問, 須要設置獨立IP.

1.4 域名

咱們須要經過IP訪問服務器, 但IP是一堆沒有規律的數字, 不便於記憶. 因而有人想到了使用有含義的英文單詞或字母對應服務器的IP, 你只須要記住英文便可訪問相應的服務器. 至關於給服務器起個一個英文名字. 這個名字就叫作域名. 當你用瀏覽器訪問服務器的時候就能夠忘記IP, 只須要記住域名就能夠了. 好比a.com就是一個域名

1.5 DNS

你給本身的服務器設置了IP並起了一個好聽的域名. 可是其餘人並不知道域名對應的是哪一個IP, 這時就須要有一個地方專門配置域名和IP的對應關係. 當在瀏覽器中輸入域名後, 會從這個地方找到域名對應的IP, 經過IP訪問服務器. 這個配置域名和IP對應關係的地方就叫作DNS(Domain Name System): 域名系統.

1.6 端口

經過域名或者IP能夠找到對應的服務器, 但若是一個服務器上有好多B/S程序, 那這些程序怎麼才能知道此次訪問是由誰處理呢. 就像你去銀行辦理業務, 銀行有好多窗口能夠辦理, 可是你進去以後站在大廳確定沒有人給你辦理, 你須要走到某個窗口才能夠. 服務器上也是這樣的, 每一個B/S程序都在某個窗口等待着, 你須要訪問服務器的某個窗口才能有對應的程序處理. 每一個窗口都有編號, 咱們成這個窗口編號叫作端口. 只有經過域名和端口一塊兒才能訪問到服務器上應用程序. 格式爲: "域名:端口", 例: a.com:8080表明訪域名對應IP的服務器的8080端口, 若是8080端口有程序, 則會處理你的此次訪問.

1.7 網址

當你訪問某電商網站的時候, 先進入主頁, 點擊分類進入分類列表頁面, 點擊某個商品進入商品明細頁面. 其中主頁, 分類, 明細頁面都是服務器上的程序返回給你的, 那麼服務器怎麼知道你想訪問哪一個頁面呢. 這個時候就須要你在訪問服務器時明確告知服務器你想要哪一個頁面. 你須要在域名的後面添加你想訪問的頁面名稱. 例如服務器規定index表明主頁, category表明分類, goods表明商品明細, 當你想訪問服務器的分類頁面時就須要使用域名:端口/category來訪問, 經過域名可以找到對應的服務器, 經過端口找到對應處理的程序, 程序經過category就能知道你想要訪問分類頁並將分類頁面返回給你, a.com:8080/category就叫作網址, 也叫作URL.

1.8 HTTP協議

當你去參加了一個國際會議, 來自全世界的人共同討論一件事情, 每一個國家的表明都用本身的語言討論, 會場必定會亂套, 這時候就須要有一個統一的協議來規範參會的人員. 好比: 參加會議必須遵循這個協議說英文, 英文有本身的單詞和語法, 你們都用英文交流就能夠互相理解了. 在瀏覽器訪問服務器的時候也必須遵循一個協議, 這個協議叫作HTTP(HyperText Transfer Protocol): 超文本傳輸協議. 上面講到的網址規則就是HTTP協議的一部分, 在a.com:8080/category前面加上http://便可, http://a.com:8080/category就是一個HTTP協議的網址了, 服務器端也會按照HTTP協議接收並返回給你想要的結果. HTTP協議中80端口默認不顯示, 即http://a.com/category表明訪問服務器的80端口.

1.9 Request&Response

理解了上面幾個概念, 咱們來看一下當你在瀏覽器中訪問一個域名的時候究竟發生了什麼:

其中, 你訪問服務器的過程就作請求(Request), 服務器給你返回結果的過程叫作響應(Response). 整個交互過程以下:

1. 瀏覽器中輸入網址: a.com:8080/category, 點擊訪問按鈕
2. 瀏覽器會經過DNS解析域名a.com對應的IP, 經過IP鏈接對應的服務器
3. 根據訪問中的8080端口找到在端口監聽的程序A進行處理
4. 程序根據/category找到對應的處理程序, 處理完成後返回給瀏覽器
5. 瀏覽器根據服務器返回的結果將返回內容進行展現
6. 本次請求完成

1.10 異常返回

上面介紹的是正常狀況, 若是網絡或者服務器出現問題時返回的並非你想要的結果, 看下面的例子:

你給你女友所在公司總機打電話, 撥通電話號碼而且還須要輸入分機號才行. 正常的狀況下你就能夠和女友通話了, 那若是你輸錯電話號碼了呢(有可能打進別的公司了, 也有多是空號), 或者你輸錯分機號了, 又或者是你女友剛接到一半有事掛斷了. 這些狀況都不是你想要的的, 屬於異常狀況, 對於一個請求來講, 也是會有各類異常狀況的.

女友所在公司總機至關於服務器, 總機號碼至關於域名, 運營商根據號碼找到對應電話的過程至關於域名解析. 總機和分機號至關於網址. 電話號碼規則(總機分機規則)至關與HTTP協議. , 撥出電話的過程至關於一次請求, 公司總機收到你打入的電話至關於服務器接收到了你的請求, 分機收到你打了電話至關於對應的程序正在處理你的請求. 女友接了你的電話至關於給你的響應.

下面咱們分析一下幾種可能出現的異常狀況:

• 總機號碼是空號: 運營商會提示你空號, 至關於你輸錯域名, 該域名在DNS中沒有對應的IP, 瀏覽器會提示你沒法訪問.
• 總機號碼錯誤: 有可能電話掛到別的公司了, 至關於你輸錯域名, 但域名在DNS有對應的IP, 瀏覽器會訪問該IP所在服務器. 因而你就進入到錯誤的網站中了
• 分機號碼錯誤: 公司總計會提示你找的人不存在, 至關於你訪問了服務器中沒有的程序, 服務器會返回一個狀態碼爲404的錯誤. 提示你訪問的程序不存在.
• 電話剛接通就掛斷: 你的女友接通了電話而且大家吵架了, 因而她掛斷了電話. 至關於服務器的程序處理你的請求時出現錯誤, 服務器會返回一個狀態碼爲500的錯誤, 提示是服務器內部錯誤.
• 你的電話線被拔出: 至關於客戶端沒有網絡, 瀏覽器會提示無網絡
• 總機電話線被拔出: 你的電話號碼是正確的, 至關於DNS可以正確解析你的網址並訪問服務器, 但服務器的程序沒有啓動所以沒法處理你的程序, 瀏覽器在鏈接一段時間後發現一直沒有響應報出鏈接超時.

2. 響應數據

正常訪問服務器時, 服務器端程序處理完成後會給瀏覽器一個響應, 瀏覽器將響應的內容顯示給用戶. 那麼, 服務器程序會返回什麼內容呢, 瀏覽器又是怎麼展現的呢?

2.1 HTML

能夠開發B/S程序的語言不少, 各類瀏覽器也層出不窮, 勢必要有一個統一的標準來規範各類B/S程序開發語言和瀏覽器, 使得服務器端返回的內容都是一致的, 各類瀏覽器都按照這種標準去解析. 這種統一的標準也是一種語言, 叫作HTML(Hyper Text Mark-up Language): 超文本標記語言. 服務器返回至瀏覽器的內容就是HTML, 瀏覽器對HTML進行解析展現給用戶.

常常訪問網頁時你會發現, 當你在電商網站查詢訂單或購物車時展示形式爲數據列表. 查看商品時展現圖片和文字, 註冊時展示輸入框和按鈕. 這些不一樣形式的展現內容都是服務器返回的, 換句話說展現的內容都是HTML, 瀏覽器根據HTML進行相應的展現:

HTML中定義了許多組件, 瀏覽器解析到相應標籤時會按約定的格式進行展現, 例如: HTML中定義了<table>, 瀏覽器就會把裏面的內容按照表格的形式進行展現, 不管多麼複雜的網頁, 都是由這些基本的HTML組件組合而成的, 簡單介紹幾個組件:

標籤	說明	備註
<table></table>	表格	瀏覽器會將裏面的內容解析成表格進行展現.
<a></a>	超連接	瀏覽器會解析成連接, 點擊時跳轉至對應網址.
<img />	圖片	瀏覽器會將內容顯示爲圖片.
<input />	輸入框	瀏覽器會顯示輸入框, 用戶能夠在食客中輸入內容.

HTML在編程語言裏相對較簡單, 沒有過多的邏輯性, 去菜鳥教程中把每一個組件練習一遍就能夠.

2.2 CSS

當你學會HTML後你就會發現, HTML只定義了組件的展現形式, 在瀏覽器中展現時並不那麼的美麗大方, 而咱們訪問的網頁都是很漂亮的, 這時咱們須要一個裝修隊來幫咱們把HTML處理的漂亮一些, 他就是CSS(Cascading Style Sheets): 層疊樣式表

CSS裏面能夠定義HTML每一個組件的大小, 顏色, 位置, 邊框, 背景, 內外間距等等, 你所看到的各類漂亮網頁都是經過CSS來美化的, 下面以一個連接爲例, 看一下默認的連接樣式和通過CSS美化過的差異

<style>
a {
	background-color: #0088cc; /* 背景顏色 */
	color: #fff; /* 文字顏色 */
	padding: 10px 20px; /* 文字內邊距 */
	text-decoration: none; /* 下劃線樣式: 無 */
	font-family: "microsoft yahei"; /* 字體:微軟雅黑 */
}
</style>
複製代碼

左側爲通過CSS美化的樣式, 右側爲連接的默認樣式. 誰更好看呢? 一個漂亮的網頁須要視覺設計師, 前端工程師共同合做才能完成, 做爲WEB開發人員的你只須要對CSS簡單瞭解便可.

2.3 Javascript

不少網頁中都有一些很炫酷的特效, 好比在電商的商品頁面, 點擊加入購物車按鈕物品會飛入購物車中.

咱們分析一下如何實現的, HTML定義了網頁中的各類元素, 包括加入購物車按鈕, CSS爲按鈕設置了樣式. 彷佛都沒法作出飛入效果. 是時候請他出場了, 他就是Javascript(簡稱JS): 一個和Java毫無關係的腳本語言. 你能夠理解爲他是在瀏覽器中執行的腳本. Javascript可以作不少事:

• 監聽HTML節點的各類事件, 好比: 某個按鈕被點擊, 鼠標移入到某個圖片上, 瀏覽器窗口大小發生變化等等
• 對HTML節點進行增長,刪除操做, 好比: 刪除一個按鈕, 添加一張圖片, 改變按鈕中的文字等等
• 給HTML節點添加樣式, 好比: 給某個按鈕添加一個背景色, 隱藏或顯示某個按鈕等等
• 使用動畫效果改變HTML的位置, 大小等. 如今CSS3中能夠不依賴於Javascript就能夠實現動畫.

按照下面的思路就能夠實現上述的飛入效果:

1. 監聽加入購物車按鈕的點擊事件
2. 在購物車按鈕附近增長一個縮小的物品圖片
3. 經過動畫將圖片位置從加入購物車按鈕附近挪入右側購物車
4. 隱藏圖片

早期, Javascript是WEB開發人員必備的技能之一, 但隨着先後端分離開發模式的推廣, 做爲WEB開發人員更多的關注後臺的業務實現及接口的定義, 後續文章中會對先後端分離模式進行介紹. 敬請關注.

2.4 總結

若是要在網頁中實現良好的交互體驗, HTML, CSS, Javascript缺一不可.

HTML至關於定義了一輛汽車的各個零部件, CSS控制每一個零部件的形狀及位置, Javascript負責處理汽車的整個運行狀況. 好比HTML定了汽車有6個輪胎, CSS設置汽車的顏色爲綠色, Javascript監聽當踩油門時控制發動機. 若是沒有CSS, 全部汽車都將如出一轍, 沒有Javascript, 這輛汽車將只能看不能被駕駛. 但若是沒有HTML, 整個汽車都將不存在.

3. 結語

本篇文章是系列教程的開篇, 介紹了WEB開發中的一些基本原理及概念, 僅僅是引導新同窗入門, 後續文章會逐步的講解, 讓新同窗可以在最快的時間學會基於SSM框架的WEB開發. 有興趣的同窗能夠關注.

WEB開發不只須要掌握多種技術, 還須要瞭解各類業務場景的處理辦法. 這對新同窗來講是一個挑戰, 但願各位新同窗可以堅持學習, 遇到問題能夠留言.