摘要:說明我寫這篇文章的目的其實是想科普一下基礎的數據傳輸和交互流程,其實也就是寫協議相關的一些東西。同樣,相對于后端程序來說也無外乎就是一大堆有一定意義的字符串,而對于腳本來說,就是表示一個數據對象。
說明
我寫這篇文章的目的其實是想科普一下基礎的數據傳輸和交互流程,其實也就是寫http協議相關的一些東西。而寫這篇文章也主要是源于最近和長久以來很多人問的問題都是有關于這塊的(可能問題并不是這么問,但是主要涉及到的根本原因還是這一塊),所以我想寫這篇文章也算是做一個科普,讓大家在寫前后端程序的時候,不會由于數據傳輸的問題而不知道怎么去解決bug。
這篇我覺得算是一篇基礎文章,本來想取個高大上的名字,但是我想了一下,還是這么叫,方便于初學者或者是寫了一段時間與服務器交互程序的人理解。當然,整篇文章只是基于我這幾年開發經驗的總結,難免會有一些表述或者對于底層的理解偏差,如有誤,歡迎指出。
HTTP協議在開篇之前,我覺得還是對HTTP協議做一下說明,以下的文章主要還是圍繞這一塊來做的。
關于這部分,我貼了百度百科的文章,我覺得講解得算是挺全面了。(此處別糾結為啥補貼wiki的鏈接)
https://baike.baidu.com/item/...
HTTP分為數據請求(發送)階段和數據響應階段。
數據請求階段的數據內容格式主要有:
請求行 - 通用信息頭 - 請求頭 - 實體頭 - 報文主體
數據響應階段的內容格式主要有:
狀態行 - 通用信息頭 - 響應頭 - 實體頭 - 報文主體
我們所看見的報文主體非開發者看到的就是數據響應的報文主體,這么解釋可能有些不正確,應該說是瀏覽器解析后的報文主體,一般來說就是:
....
的內容。
而做為開發者,在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和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進行關聯,表示登錄成功,而我們后端服務每次是去檢查是否存在關聯的這個用戶信息并告知用戶是否在登錄著的。這就是用戶登錄的原理。
以上大致就聊一下這些,主要是我個人的一些經驗和對服務端數據交互的一些理解。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/25852.html
摘要:個人認為單頁面應用的優勢相當明顯前后端職責分離,架構清晰前端進行交互邏輯,后端負責數據處理。上面的這種單頁面應用也有其相應的一種開發工作流,當然這種工作流也適合非單頁面應用進行產品功能原型設計。 未經允許,請勿轉載。本文同時也發布在我的博客。 (如果對SPA概念不清楚的同學可以先自行了解相關概念) 平時喜歡做點小頁面來玩玩,并且一直采用單頁面應用(Single Page Appl...
摘要:但似乎他們的職責在以前甚至于現在都并不明確,雖然前端是跟瀏覽器打交道,但是最終瀏覽器拿到的頁面是服務器通過模板生成的一個臨時靜態頁面而已。當然,一般傳統上的開發協作模式有兩種一種是前端先寫一個靜態頁面,寫好后,讓后端去套模板。隨著不同終端(Pad/Mobile/PC)的興起,對開發人員的要求越來越高,純瀏覽器端的響應式已經不能滿足用戶體驗的高要求,往往需要針對不同的終端開發定制的版本,為了提...
摘要:本項目是一個簡單的全棧項目,前端新手可以拿來練練手。項目實現了一些簡單的功能,后臺可以對圖書進行錄入錄出掃碼或手動,前臺顯示錄入的圖書,并且前臺注冊登錄后可以將書的訂單發給服務器,并存到服務器。 Vue-book 2.0 Github 地址:https://github.com/percy507/v... 【覺得不錯就來個 star 吧 ^_^】 說明(菜鳥請進,大神繞道 ~) 前端...
摘要:本項目是一個簡單的全棧項目,前端新手可以拿來練練手。項目實現了一些簡單的功能,后臺可以對圖書進行錄入錄出掃碼或手動,前臺顯示錄入的圖書,并且前臺注冊登錄后可以將書的訂單發給服務器,并存到服務器。 Vue-book 2.0 Github 地址:https://github.com/percy507/v... 【覺得不錯就來個 star 吧 ^_^】 說明(菜鳥請進,大神繞道 ~) 前端...
閱讀 731·2023-04-25 19:28
閱讀 1391·2021-09-10 10:51
閱讀 2390·2019-08-30 15:55
閱讀 3408·2019-08-26 13:55
閱讀 2996·2019-08-26 13:24
閱讀 3325·2019-08-26 11:46
閱讀 2751·2019-08-23 17:10
閱讀 1415·2019-08-23 16:57