成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

WEB程序的前后端數(shù)據(jù)交互流程

oysun / 1806人閱讀

摘要：說明我寫這篇文章的目的其實(shí)是想科普一下基礎(chǔ)的數(shù)據(jù)傳輸和交互流程，其實(shí)也就是寫協(xié)議相關(guān)的一些東西。同樣，相對于后端程序來說也無外乎就是一大堆有一定意義的字符串，而對于腳本來說，就是表示一個(gè)數(shù)據(jù)對象。

說明

我寫這篇文章的目的其實(shí)是想科普一下基礎(chǔ)的數(shù)據(jù)傳輸和交互流程，其實(shí)也就是寫http協(xié)議相關(guān)的一些東西。而寫這篇文章也主要是源于最近和長久以來很多人問的問題都是有關(guān)于這塊的（可能問題并不是這么問，但是主要涉及到的根本原因還是這一塊），所以我想寫這篇文章也算是做一個(gè)科普，讓大家在寫前后端程序的時(shí)候，不會(huì)由于數(shù)據(jù)傳輸?shù)膯栴}而不知道怎么去解決bug。

這篇我覺得算是一篇基礎(chǔ)文章，本來想取個(gè)高大上的名字，但是我想了一下，還是這么叫，方便于初學(xué)者或者是寫了一段時(shí)間與服務(wù)器交互程序的人理解。當(dāng)然，整篇文章只是基于我這幾年開發(fā)經(jīng)驗(yàn)的總結(jié)，難免會(huì)有一些表述或者對于底層的理解偏差，如有誤，歡迎指出。

HTTP協(xié)議

在開篇之前，我覺得還是對HTTP協(xié)議做一下說明，以下的文章主要還是圍繞這一塊來做的。
關(guān)于這部分，我貼了百度百科的文章，我覺得講解得算是挺全面了。（此處別糾結(jié)為啥補(bǔ)貼wiki的鏈接）

https://baike.baidu.com/item/...

HTTP分為數(shù)據(jù)請求（發(fā)送）階段和數(shù)據(jù)響應(yīng)階段。
數(shù)據(jù)請求階段的數(shù)據(jù)內(nèi)容格式主要有：

請求行 － 通用信息頭 － 請求頭 － 實(shí)體頭 － 報(bào)文主體

數(shù)據(jù)響應(yīng)階段的內(nèi)容格式主要有：

狀態(tài)行 － 通用信息頭 － 響應(yīng)頭 － 實(shí)體頭 － 報(bào)文主體

我們所看見的報(bào)文主體

非開發(fā)者看到的就是數(shù)據(jù)響應(yīng)的報(bào)文主體，這么解釋可能有些不正確，應(yīng)該說是瀏覽器解析后的報(bào)文主體，一般來說就是：


....

的內(nèi)容。

而做為開發(fā)者，在Chrome瀏覽器下打開調(diào)試工具，我們是能看到請求頭以及響應(yīng)頭的，并且數(shù)據(jù)返回會(huì)根據(jù)錯(cuò)誤或相應(yīng)成功返回對應(yīng)的響應(yīng)狀態(tài)（如常見的200，404，500，502等）。

數(shù)據(jù)類型

數(shù)據(jù)類型千千萬萬，基礎(chǔ)數(shù)據(jù)類型我想只要是編寫程序的人都應(yīng)該清楚，通常有整型、浮點(diǎn)型、字符型、字符串型、數(shù)組等（這里先不說底層的根本數(shù)據(jù)是二進(jìn)制表現(xiàn)，關(guān)于這塊就可以花很多時(shí)間進(jìn)行深入研究和了解了）。

而基于這些基礎(chǔ)的數(shù)據(jù)類型就會(huì)衍生出各種數(shù)據(jù)類型，然后就會(huì)有圖片數(shù)據(jù)類型、文本數(shù)據(jù)類型、流媒體數(shù)據(jù)類型等等。

在我們編寫web程序的時(shí)候，通常遇到的就是html、json、圖片、音頻、視頻等類型的數(shù)據(jù)，而其實(shí)html和json等數(shù)據(jù)其實(shí)可以歸類為字符串?dāng)?shù)據(jù)。說到這個(gè)，我覺得應(yīng)該引入一個(gè)“參照物”的東西，也就是說，什么樣的數(shù)據(jù)類型主要是針對于不同的參照物來描述。

html對于瀏覽器來說，就是html類型，解析出來可以渲染出好看的界面，當(dāng)然也可能渲染出抽到掉渣的界面。而對于后端程序來說，如PHP或者java程序來說，html不外乎就是一大堆字符串，而這些字符串可以表示一定的意義（瀏覽器用于渲染的文檔）。同樣，json相對于后端程序來說也無外乎就是一大堆有一定意義的字符串，而對于JavaScript腳本來說，json就是表示一個(gè)數(shù)據(jù)對象。

這個(gè)數(shù)據(jù)格式以及數(shù)據(jù)格式的參照物的目的主要是我們在編寫程序的時(shí)候，要思考不同的數(shù)據(jù)對于不同的程序來說意義是不一樣的，那么我們的數(shù)據(jù)處理思維也是不一樣的，不然會(huì)以同樣的思維去思考，那么想不出問題都難。

當(dāng)然也有一些公用的數(shù)據(jù)類型，如圖片和流媒體數(shù)據(jù)等，對于這種數(shù)據(jù)的處理方式基本上都是一致的。

異步數(shù)據(jù)交互

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

AJAX是一種數(shù)據(jù)交互模式，其本身依舊遵循HTTP協(xié)議，但只不過通常是由我們自己利用程序接口，觸發(fā)瀏覽器在后臺(tái)隱式的進(jìn)行數(shù)據(jù)請求和處理。

通常來說，我們輸入一個(gè)URL，瀏覽器就會(huì)向這個(gè)URL發(fā)起一次請求，然后我們就看到一個(gè)網(wǎng)頁。但其實(shí)，如果僅僅做這一步事情，沒有異步的話，那么我們就不可能看到完整的網(wǎng)頁了，也就是說可能也就不存在交互動(dòng)畫和好看的樣式。這是為什么呢？

我們在一個(gè)頁面里通常會(huì)定義一些外部的css樣式和外部js程序。而這其實(shí)是依賴于瀏覽器在做html解析的時(shí)候，遇到外部的css樣式引入或者js引入，會(huì)主動(dòng)在后臺(tái)發(fā)起一次資源請求，但這個(gè)請求對我們是不可見的。當(dāng)然，并不是說這個(gè)請求是不可見的就是異步了，而是因?yàn)榕c本身的html資源加載并不是同步進(jìn)行，而是等到html數(shù)據(jù)加載完了再異步的進(jìn)行數(shù)據(jù)加載的。

而這種異步交互本身都是基于HTTP協(xié)議的，而我們在自己寫AJAX的時(shí)候，其實(shí)從另外一個(gè)角度來看，是我們接手了瀏覽器對于交互數(shù)據(jù)的處理，也就是說不按照瀏覽器本身的行為規(guī)則對數(shù)據(jù)進(jìn)行處理，比如我們以json數(shù)據(jù)傳輸?shù)臅r(shí)候，需要我們自己處理服務(wù)端返回的json，并解析成節(jié)點(diǎn)數(shù)據(jù)交給瀏覽器顯示。同樣的，我們自己接手AJAX數(shù)據(jù)的管理，也給數(shù)據(jù)處理增加了很大的靈活性。

而異步只是描述AJAX只是片面的，這是為什么呢？因?yàn)楫惒竭€有異步程序，現(xiàn)在的很多高級語言都具有異步的特性，當(dāng)然也可以手動(dòng)實(shí)現(xiàn)，關(guān)于程序異步這一塊我這里就不多做介紹了，關(guān)于程序的異步又是一個(gè)話題了。

關(guān)于cookie和session

我這里也多帶帶說一下cookie和session機(jī)制，當(dāng)然不做過多細(xì)說，就像整片文章一樣，主要是圍繞基礎(chǔ)的理解進(jìn)行展開。

我們編寫前端程序的就知道，cookie具有作用域和存儲(chǔ)時(shí)間，cookie的作用域是為了安全，防止跨域用，而存儲(chǔ)的過期時(shí)間同樣也有這個(gè)作用。而我們使用cookie本身的目的其實(shí)就是為了緩存一些短小的數(shù)據(jù)，而瀏覽器本身對cookie有很好的支持，每次進(jìn)行數(shù)據(jù)請求的時(shí)候，會(huì)把用戶設(shè)置的cookie帶到Cookie頭中，服務(wù)端程序通過對請求頭的解析得到cookie頭，從而也能得到客戶端的cookie值。

同樣的，服務(wù)端設(shè)置的cookie會(huì)加入響應(yīng)頭，瀏覽器發(fā)現(xiàn)響應(yīng)頭有cookie，那么也就會(huì)把這個(gè)cookie在瀏覽器本地進(jìn)行存儲(chǔ)，并且在后續(xù)的每一次請求把這個(gè)cookie帶上。這是服務(wù)端設(shè)置cookie的原理。

以上的基礎(chǔ)知識(shí)理論為session提供了支撐。首先我說一下什么是session，session的中文翻譯的意思是會(huì)話的意思，通常我們最基礎(chǔ)的理解就是“session是用來做用戶登錄的”。不過說的基本上是對的，session通常就是用來保存用戶登錄狀態(tài)的，但也不完全對。接下來我來說說session的實(shí)現(xiàn)機(jī)制，然后的話，我想就清楚了session可以引申的一些作用了。

session和cookie是相互依賴的一種關(guān)系，首先，當(dāng)用戶打開一個(gè)網(wǎng)站的時(shí)候，服務(wù)端會(huì)生成一個(gè)session_id，然后把這個(gè)session_id放在響應(yīng)頭，告知瀏覽器進(jìn)行存儲(chǔ)。然后瀏覽器每次請求的時(shí)候都會(huì)帶上session_id這個(gè)cookie值，服務(wù)端獲取到session_id就再進(jìn)行檢查，就能保持回話了。當(dāng)然，這里僅僅是說保持回話，也就是用戶在線狀態(tài)，但是與用戶登錄此時(shí)還是沒有關(guān)系的。那么，當(dāng)用戶登錄的時(shí)候，會(huì)把用戶信息與session_id進(jìn)行關(guān)聯(lián)，表示登錄成功，而我們后端服務(wù)每次是去檢查是否存在關(guān)聯(lián)的這個(gè)用戶信息并告知用戶是否在登錄著的。這就是用戶登錄的原理。

以上大致就聊一下這些，主要是我個(gè)人的一些經(jīng)驗(yàn)和對服務(wù)端數(shù)據(jù)交互的一些理解。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/25852.html

相關(guān)文章

  • 一種SPA（單頁面應(yīng)用）架構(gòu)

    摘要：個(gè)人認(rèn)為單頁面應(yīng)用的優(yōu)勢相當(dāng)明顯前后端職責(zé)分離，架構(gòu)清晰前端進(jìn)行交互邏輯，后端負(fù)責(zé)數(shù)據(jù)處理。上面的這種單頁面應(yīng)用也有其相應(yīng)的一種開發(fā)工作流，當(dāng)然這種工作流也適合非單頁面應(yīng)用進(jìn)行產(chǎn)品功能原型設(shè)計(jì)。 未經(jīng)允許，請勿轉(zhuǎn)載。本文同時(shí)也發(fā)布在我的博客。 （如果對SPA概念不清楚的同學(xué)可以先自行了解相關(guān)概念） 平時(shí)喜歡做點(diǎn)小頁面來玩玩，并且一直采用單頁面應(yīng)用（Single Page Appl...

    Codeing_ls 評論0 收藏0

  • 關(guān)于前后端分離與模板引擎

    摘要：但似乎他們的職責(zé)在以前甚至于現(xiàn)在都并不明確，雖然前端是跟瀏覽器打交道，但是最終瀏覽器拿到的頁面是服務(wù)器通過模板生成的一個(gè)臨時(shí)靜態(tài)頁面而已。當(dāng)然，一般傳統(tǒng)上的開發(fā)協(xié)作模式有兩種一種是前端先寫一個(gè)靜態(tài)頁面，寫好后，讓后端去套模板。隨著不同終端（Pad/Mobile/PC)的興起，對開發(fā)人員的要求越來越高，純?yōu)g覽器端的響應(yīng)式已經(jīng)不能滿足用戶體驗(yàn)的高要求，往往需要針對不同的終端開發(fā)定制的版本，為了提...

    cnTomato 評論0 收藏0

  • Vue-book 2.0 一個(gè)移動(dòng)端簡單的全棧 web APP

    摘要：本項(xiàng)目是一個(gè)簡單的全棧項(xiàng)目，前端新手可以拿來練練手。項(xiàng)目實(shí)現(xiàn)了一些簡單的功能，后臺(tái)可以對圖書進(jìn)行錄入錄出掃碼或手動(dòng)，前臺(tái)顯示錄入的圖書，并且前臺(tái)注冊登錄后可以將書的訂單發(fā)給服務(wù)器，并存到服務(wù)器。 Vue-book 2.0 Github 地址：https://github.com/percy507/v... 【覺得不錯(cuò)就來個(gè) star 吧 ^_^】 說明（菜鳥請進(jìn)，大神繞道 ~） 前端...

    wh469012917 評論0 收藏0

  • Vue-book 2.0 一個(gè)移動(dòng)端簡單的全棧 web APP

    摘要：本項(xiàng)目是一個(gè)簡單的全棧項(xiàng)目，前端新手可以拿來練練手。項(xiàng)目實(shí)現(xiàn)了一些簡單的功能，后臺(tái)可以對圖書進(jìn)行錄入錄出掃碼或手動(dòng)，前臺(tái)顯示錄入的圖書，并且前臺(tái)注冊登錄后可以將書的訂單發(fā)給服務(wù)器，并存到服務(wù)器。 Vue-book 2.0 Github 地址：https://github.com/percy507/v... 【覺得不錯(cuò)就來個(gè) star 吧 ^_^】 說明（菜鳥請進(jìn)，大神繞道 ~） 前端...

    NotFound 評論0 收藏0

  • 設(shè)計(jì)架構(gòu)

    摘要：先來看一張系統(tǒng)前后端架構(gòu)模型圖。一種接口的約定本文用于定義一種統(tǒng)一的接口設(shè)計(jì)方案，希望具有參考價(jià)值。，和都是常見的軟件架構(gòu)設(shè)計(jì)模式，它通過分離關(guān)注點(diǎn)來改進(jìn)代碼的組織方式。 如何無痛降低 if else 面條代碼復(fù)雜度 相信不少同學(xué)在維護(hù)老項(xiàng)目時(shí)，都遇到過在深深的 if else 之間糾纏的業(yè)務(wù)邏輯。面對這樣的一團(tuán)亂麻，簡單粗暴地繼續(xù)增量修改常常只會(huì)讓復(fù)雜度越來越高，可讀性越來越差，有沒...

    graf 評論0 收藏0

發(fā)表評論

0條評論

oysun

男|高級講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<