WEB程式的前後端資料互動流程

kumfo發表於2017-09-19

說明

我寫這篇文章的目的其實是想科普一下基礎的資料傳輸和互動流程,其實也就是寫http協議相關的一些東西。而寫這篇文章也主要是源於最近和長久以來很多人問的問題都是有關於這塊的(可能問題並不是這麼問,但是主要涉及到的根本原因還是這一塊),所以我想寫這篇文章也算是做一個科普,讓大家在寫前後端程式的時候,不會由於資料傳輸的問題而不知道怎麼去解決bug。

這篇我覺得算是一篇基礎文章,本來想取個高大上的名字,但是我想了一下,還是這麼叫,方便於初學者或者是寫了一段時間與伺服器互動程式的人理解。當然,整篇文章只是基於我這幾年開發經驗的總結,難免會有一些表述或者對於底層的理解偏差,如有誤,歡迎指出。

HTTP協議

在開篇之前,我覺得還是對HTTP協議做一下說明,以下的文章主要還是圍繞這一塊來做的。
關於這部分,我貼了百度百科的文章,我覺得講解得算是挺全面了。(此處別糾結為啥補貼wiki的連結)

baike.baidu.com/item/http/2…

HTTP分為資料請求(傳送)階段和資料響應階段。
資料請求階段的資料內容格式主要有:

請求行 - 通用資訊頭 - 請求頭 - 實體頭 - 報文主體

資料響應階段的內容格式主要有:

狀態行 - 通用資訊頭 - 響應頭 - 實體頭 - 報文主體

我們所看見的報文主體

非開發者看到的就是資料響應的報文主體,這麼解釋可能有些不正確,應該說是瀏覽器解析後的報文主體,一般來說就是:

<html>
....
</html>複製程式碼

的內容。

而做為開發者,在Chrome瀏覽器下開啟除錯工具,我們是能看到請求頭以及響應頭的,並且資料返回會根據錯誤或相應成功返回對應的響應狀態(如常見的200,404,500,502等)。

資料型別

資料型別千千萬萬,基礎資料型別我想只要是編寫程式的人都應該清楚,通常有整型、浮點型、字元型、字串型、陣列等(這裡先不說底層的根本資料是二進位制表現,關於這塊就可以花很多時間進行深入研究和了解了)。

而基於這些基礎的資料型別就會衍生出各種資料型別,然後就會有圖片資料型別、文字資料型別、流媒體資料型別等等。

在我們編寫web程式的時候,通常遇到的就是html、json、圖片、音訊、視訊等型別的資料,而其實html和json等資料其實可以歸類為字串資料。說到這個,我覺得應該引入一個“參照物”的東西,也就是說,什麼樣的資料型別主要是針對於不同的參照物來描述。

html對於瀏覽器來說,就是html型別,解析出來可以渲染出好看的介面,當然也可能渲染出抽到掉渣的介面。而對於後端程式來說,如PHP或者java程式來說,html不外乎就是一大堆字串,而這些字串可以表示一定的意義(瀏覽器用於渲染的文件)。同樣,json相對於後端程式來說也無外乎就是一大堆有一定意義的字串,而對於JavaScript指令碼來說,json就是表示一個資料物件。

這個資料格式以及資料格式的參照物的目的主要是我們在編寫程式的時候,要思考不同的資料對於不同的程式來說意義是不一樣的,那麼我們的資料處理思維也是不一樣的,不然會以同樣的思維去思考,那麼想不出問題都難。

當然也有一些公用的資料型別,如圖片和流媒體資料等,對於這種資料的處理方式基本上都是一致的。

非同步資料互動

我們通常所知道的非同步一般來說說的都是AJAX,但此處的AJAX或許可以說是非同步的一部分,那麼首先來說一下AJAX。

AJAX是一種資料互動模式,其本身依舊遵循HTTP協議,但只不過通常是由我們自己利用程式介面,觸發瀏覽器在後臺隱式的進行資料請求和處理。

通常來說,我們輸入一個URL,瀏覽器就會向這個URL發起一次請求,然後我們就看到一個網頁。但其實,如果僅僅做這一步事情,沒有非同步的話,那麼我們就不可能看到完整的網頁了,也就是說可能也就不存在互動動畫和好看的樣式。這是為什麼呢?

我們在一個頁面裡通常會定義一些外部的css樣式和外部js程式。而這其實是依賴於瀏覽器在做html解析的時候,遇到外部的css樣式引入或者js引入,會主動在後臺發起一次資源請求,但這個請求對我們是不可見的。當然,並不是說這個請求是不可見的就是非同步了,而是因為與本身的html資源載入並不是同步進行,而是等到html資料載入完了再非同步的進行資料載入的。

而這種非同步互動本身都是基於HTTP協議的,而我們在自己寫AJAX的時候,其實從另外一個角度來看,是我們接手了瀏覽器對於互動資料的處理,也就是說不按照瀏覽器本身的行為規則對資料進行處理,比如我們以json資料傳輸的時候,需要我們自己處理服務端返回的json,並解析成節點資料交給瀏覽器顯示。同樣的,我們自己接手AJAX資料的管理,也給資料處理增加了很大的靈活性。

而非同步只是描述AJAX只是片面的,這是為什麼呢?因為非同步還有非同步程式,現在的很多高階語言都具有非同步的特性,當然也可以手動實現,關於程式非同步這一塊我這裡就不多做介紹了,關於程式的非同步又是一個話題了。

我這裡也單獨說一下cookie和session機制,當然不做過多細說,就像整片文章一樣,主要是圍繞基礎的理解進行展開。

我們編寫前端程式的就知道,cookie具有作用域和儲存時間,cookie的作用域是為了安全,防止跨域用,而儲存的過期時間同樣也有這個作用。而我們使用cookie本身的目的其實就是為了快取一些短小的資料,而瀏覽器本身對cookie有很好的支援,每次進行資料請求的時候,會把使用者設定的cookie帶到Cookie頭中,服務端程式通過對請求頭的解析得到cookie頭,從而也能得到客戶端的cookie值。

同樣的,服務端設定的cookie會加入響應頭,瀏覽器發現響應頭有cookie,那麼也就會把這個cookie在瀏覽器本地進行儲存,並且在後續的每一次請求把這個cookie帶上。這是服務端設定cookie的原理。

以上的基礎知識理論為session提供了支撐。首先我說一下什麼是session,session的中文翻譯的意思是會話的意思,通常我們最基礎的理解就是“session是用來做使用者登入的”。不過說的基本上是對的,session通常就是用來儲存使用者登入狀態的,但也不完全對。接下來我來說說session的實現機制,然後的話,我想就清楚了session可以引申的一些作用了。

session和cookie是相互依賴的一種關係,首先,當使用者開啟一個網站的時候,服務端會生成一個session_id,然後把這個session_id放在響應頭,告知瀏覽器進行儲存。然後瀏覽器每次請求的時候都會帶上session_id這個cookie值,服務端獲取到session_id就再進行檢查,就能保持回話了。當然,這裡僅僅是說保持回話,也就是使用者線上狀態,但是與使用者登入此時還是沒有關係的。那麼,當使用者登入的時候,會把使用者資訊與session_id進行關聯,表示登入成功,而我們後端服務每次是去檢查是否存在關聯的這個使用者資訊並告知使用者是否在登入著的。這就是使用者登入的原理。

以上大致就聊一下這些,主要是我個人的一些經驗和對服務端資料互動的一些理解。

相關文章