前端三劍客：第一（Web的基本概念）

時間：2023-09-10 17:30:02 | 來源：網(wǎng)站運營

時間：2023-09-10 17:30:02 來源：網(wǎng)站運營

前端三劍客：第一（Web的基本概念）：第1章 、Web的基本概念

1.1、CS架構(gòu)和BS架構(gòu)

web網(wǎng)頁，我們都不陌生，相信大家都有使用web瀏覽上網(wǎng)的。那么，學習制作網(wǎng)頁前，我們需要清晰哪些概念，準備哪些工具呢？接下來，我們要先了解下。在日常生活中，我們都會上網(wǎng)，或聊天、或閱讀、或購物等，瀏覽很多的網(wǎng)站，而網(wǎng)站就是由網(wǎng)頁組成。在互聯(lián)網(wǎng)中，軟件系統(tǒng)體系分兩大結(jié)構(gòu)：

• CS模式

C/S 就是Client/Server 的縮寫，是客戶端和服務(wù)器架構(gòu)。早期的軟件系統(tǒng)多數(shù)是C/S結(jié)構(gòu)的設(shè)計標準。 例如，用戶要聽歌，會去下載一個酷狗的軟件，打開酷狗去聽歌；用戶要看視頻，會去下載一個優(yōu)酷視頻播放器，去播放視屏。用戶要聊天，會去下載一個微信或者QQ；用戶要玩游戲，會去下載一個游戲客戶端回來玩….

• BS模式

B/S 就是Browser/Server的縮寫，是瀏覽器和服務(wù)器架構(gòu)。B/C是隨著Internet技術(shù)的興起，對C/S結(jié)構(gòu)的變化或者改進的結(jié)構(gòu)。本質(zhì)上B/S還是屬于C/S結(jié)構(gòu)范圍，也就是B/S包含在C/S中，是特殊的C/S架構(gòu)。瀏覽器就是B/S結(jié)構(gòu)最主要的客戶端，網(wǎng)站也是B/S結(jié)構(gòu)的軟件。

例如：用戶想要聽歌，會去打開一個百度音樂的網(wǎng)址；用戶要去看視頻會去打開優(yōu)酷的網(wǎng)址；用戶要聊天，會去打開一個微信網(wǎng)頁版的地址；用戶要去玩游戲，會去打開一個游戲頁面的網(wǎng)址。

C/S結(jié)構(gòu)下，客戶機子必須要下載專門的軟件 才可以享受到服務(wù)端的服務(wù)。而B/S結(jié)構(gòu)下，客戶機上只要安裝一個瀏覽器（Browser）就可以在任何地方進行操作而不用安裝任何專門的軟件，只要能上網(wǎng)的電腦就能享受到服務(wù)器提供的服務(wù)，客戶端能實現(xiàn)零安裝、零維護。

1.2、W3C標準

World Wide Web Consortium，簡稱“W3C”，中文翻譯為萬維網(wǎng)聯(lián)盟，又稱W3C理事會。1994年10月在麻省理工學院計算機科學實驗室成立，建立者是萬維網(wǎng)的發(fā)明者蒂姆·伯納斯·李。萬維網(wǎng)聯(lián)盟是Web技術(shù)領(lǐng)域最具權(quán)威和影響力的國際中立性技術(shù)標準機構(gòu)，創(chuàng)建和發(fā)展了W3C標準，致力于維護和發(fā)展 web 規(guī)范。W3C 標準是網(wǎng)頁開發(fā)的核心標準。那么什么是W3C標準呢？

W3C標準不是某一個標準，而是一系列標準的集合。網(wǎng)頁主要由三部分組成：

• 結(jié)構(gòu)（Structure）
• 表現(xiàn)（Presentation）
• 行為（Behavior）

對應(yīng)的W3C標準也分成了三個方面：結(jié)構(gòu)化標準語言主要包括XHTML和XML，表現(xiàn)標準語言主要包括CSS，行為標準主要包括對象模型（如W3C DOM）、ECMA[Script等。這些標準大部分由W3C起草和發(fā)布，也有一些是其他標準組織制訂的標準，比如ECMA（European Computer Manufacturers Association）的ECMAScript標準。

前端基礎(chǔ)總共分為三部分：html、css和js。

1.3、HTTP協(xié)議

1.3.1 、http協(xié)議簡介

HTTP協(xié)議是Hyper Text Transfer Protocol（超文本傳輸協(xié)議）的縮寫,是用于萬維網(wǎng)（WWW:World Wide Web ）服務(wù)器與本地瀏覽器之間傳輸超文本的傳送協(xié)議。HTTP是一個屬于應(yīng)用層的面向?qū)ο蟮膮f(xié)議，由于其簡捷、快速的方式，適用于分布式超媒體信息系統(tǒng)。它于1990年提出，經(jīng)過幾年的使用與發(fā)展，得到不斷地完善和擴展。HTTP協(xié)議工作于客戶端-服務(wù)端架構(gòu)為上。瀏覽器作為HTTP客戶端通過URL向HTTP服務(wù)端即WEB服務(wù)器發(fā)送所有請求。Web服務(wù)器根據(jù)接收到的請求后，向客戶端發(fā)送響應(yīng)信息。

# 最簡單的web應(yīng)用程序import socketsock=socket.socket()sock.bind(("127.0.0.1",8800))sock.listen(5)while 1: print("server is working...") conn,addr=sock.accept() recv_data=conn.recv(1024) conn.send(b"HTTP/1.1 200 OK/r/n/r/nwelcome to web world!") conn.close()sock.close()

1.3.2、 http協(xié)議特性

(1) 基于TCP/IP協(xié)議

http協(xié)議是基于TCP/IP協(xié)議之上的應(yīng)用層協(xié)議。

(2) 基于請求－響應(yīng)模式

HTTP協(xié)議規(guī)定,請求從客戶端發(fā)出,最后服務(wù)器端響應(yīng)該請求并 返回。換句話說,肯定是先從客戶端開始建立通信的,服務(wù)器端在沒有 接收到請求之前不會發(fā)送響應(yīng)

(3) 無狀態(tài)保存

HTTP是一種不保存狀態(tài),即無狀態(tài)(stateless)協(xié)議。HTTP協(xié)議 自身不對請求和響應(yīng)之間的通信狀態(tài)進行保存。也就是說在HTTP這個 級別,協(xié)議對于發(fā)送過的請求或響應(yīng)都不做持久化處理。

使用HTTP協(xié)議,每當有新的請求發(fā)送時,就會有對應(yīng)的新響應(yīng)產(chǎn) 生。協(xié)議本身并不保留之前一切的請求或響應(yīng)報文的信息。這是為了更快地處理大量事務(wù),確保協(xié)議的可伸縮性,而特意把HTTP協(xié)議設(shè)計成 如此簡單的。

可是,隨著Web的不斷發(fā)展,因無狀態(tài)而導致業(yè)務(wù)處理變得棘手 的情況增多了。比如,用戶登錄到一家購物網(wǎng)站,即使他跳轉(zhuǎn)到該站的 其他頁面后,也需要能繼續(xù)保持登錄狀態(tài)。針對這個實例,網(wǎng)站為了能 夠掌握是誰送出的請求,需要保存用戶的狀態(tài)。HTTP/1.1雖然是無狀態(tài)協(xié)議,但為了實現(xiàn)期望的保持狀態(tài)功能, 于是引入了Cookie技術(shù)。有了Cookie再用HTTP協(xié)議通信,就可以管 理狀態(tài)了。有關(guān)Cookie的詳細內(nèi)容稍后講解。

(4) 無連接

無連接的含義是限制每次連接只處理一個請求。服務(wù)器處理完客戶的請求，并收到客戶的應(yīng)答后，即斷開連接。采用這種方式可以節(jié)省傳輸時間。

1.3.3、http請求協(xié)議與響應(yīng)協(xié)議

http協(xié)議包含由瀏覽器發(fā)送數(shù)據(jù)到服務(wù)器需要遵循的請求協(xié)議與服務(wù)器發(fā)送數(shù)據(jù)到瀏覽器需要遵循的請求協(xié)議。用于HTTP協(xié)議交互的信被為HTTP報文。請求端(客戶端)的HTTP報文 做請求報文,響應(yīng)端(服務(wù)器端)的 做響應(yīng)報文。HTTP報文本身是由多行數(shù)據(jù)構(gòu)成的字文本。

(1) 請求協(xié)議

請求方式: get與post請求

• GET提交的數(shù)據(jù)會放在URL之后，以?分割URL和傳輸數(shù)據(jù)，參數(shù)之間以&相連，如EditBook?name=test1&id=123456. POST方法是把提交的數(shù)據(jù)放在HTTP包的請求體中.
• GET提交的數(shù)據(jù)大小有限制（因為瀏覽器對URL的長度有限制），而POST方法提交的數(shù)據(jù)沒有限制

(2) 響應(yīng)協(xié)議

響應(yīng)狀態(tài)碼：狀態(tài)碼的職 是當客戶端向服務(wù)器端發(fā)送請求時, 返回的請求 結(jié)果。借助狀態(tài)碼,用戶可以知道服務(wù)器端是正常 理了請求,還是出 現(xiàn)了 。狀態(tài)碼如200 OK,以3位數(shù)字和原因 成。數(shù)字中的 一位指定了響應(yīng) 別,后兩位無分 。響應(yīng) 別有以5種。




下一篇賦能圈：前端三劍客：第一（Web的基本概念）

• 原文作者：Yuan
• 原文鏈接：http://www.yuan316.com/post/Go%E8%AF%AD%E8%A8%80/