WEB程序的前后端数据交互流程

kumfo

说明

我写这篇文章的目的其实是想科普一下基础的数据传输和交互流程,其实也就是写http协议相关的一些东西。而写这篇文章也主要是源于最近和长久以来很多人问的问题都是有关于这块的(可能问题并不是这么问,但是主要涉及到的根本原因还是这一块),所以我想写这篇文章也算是做一个科普,让大家在写前后端程序的时候,不会由于数据传输的问题而不知道怎么去解决bug。

这篇我觉得算是一篇基础文章,本来想取个高大上的名字,但是我想了一下,还是这么叫,方便于初学者或者是写了一段时间与服务器交互程序的人理解。当然,整篇文章只是基于我这几年开发经验的总结,难免会有一些表述或者对于底层的理解偏差,如有误,欢迎指出。

HTTP协议

在开篇之前,我觉得还是对HTTP协议做一下说明,以下的文章主要还是围绕这一块来做的。
关于这部分,我贴了百度百科的文章,我觉得讲解得算是挺全面了。(此处别纠结为啥补贴wiki的链接)

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

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和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进行关联,表示登录成功,而我们后端服务每次是去检查是否存在关联的这个用户信息并告知用户是否在登录着的。这就是用户登录的原理。

以上大致就聊一下这些,主要是我个人的一些经验和对服务端数据交互的一些理解。

阅读 6.4k

Kumfo的杂货铺
做一些经验总结和一些学习心得分享,主要围绕PHP。 现在正在学习机器学习,会增加一些机器学习的思考分享。
avatar
kumfo
SegmentFault 后端工程师

程序生存法则:ฏ๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎...

6.2k 声望
4k 粉丝
0 条评论
avatar
kumfo
SegmentFault 后端工程师

程序生存法则:ฏ๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎...

6.2k 声望
4k 粉丝
文章目录
宣传栏