资讯专栏INFORMATION COLUMN

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

oysun / 1800人阅读

摘要:说明我写这篇文章的目的其实是想科普一下基础的数据传输和交互流程,其实也就是写协议相关的一些东西。同样,相对于后端程序来说也无外乎就是一大堆有一定意义的字符串,而对于脚本来说,就是表示一个数据对象。

说明

我写这篇文章的目的其实是想科普一下基础的数据传输和交互流程,其实也就是写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进行关联,表示登录成功,而我们后端服务每次是去检查是否存在关联的这个用户信息并告知用户是否在登录着的。这就是用户登录的原理。

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/25852.html

相关文章

  • 一种SPA(单页面应用)架构

    摘要:个人认为单页面应用的优势相当明显前后端职责分离,架构清晰前端进行交互逻辑,后端负责数据处理。上面的这种单页面应用也有其相应的一种开发工作流,当然这种工作流也适合非单页面应用进行产品功能原型设计。 未经允许,请勿转载。本文同时也发布在我的博客。 (如果对SPA概念不清楚的同学可以先自行了解相关概念) 平时喜欢做点小页面来玩玩,并且一直采用单页面应用(Single Page Appl...

    Codeing_ls 评论0 收藏0
  • 关于前后分离与模板引擎

    摘要:但似乎他们的职责在以前甚至于现在都并不明确,虽然前端是跟浏览器打交道,但是最终浏览器拿到的页面是服务器通过模板生成的一个临时静态页面而已。当然,一般传统上的开发协作模式有两种一种是前端先写一个静态页面,写好后,让后端去套模板。随着不同终端(Pad/Mobile/PC)的兴起,对开发人员的要求越来越高,纯浏览器端的响应式已经不能满足用户体验的高要求,往往需要针对不同的终端开发定制的版本,为了提...

    cnTomato 评论0 收藏0
  • Vue-book 2.0 一个移动简单全栈 web APP

    摘要:本项目是一个简单的全栈项目,前端新手可以拿来练练手。项目实现了一些简单的功能,后台可以对图书进行录入录出扫码或手动,前台显示录入的图书,并且前台注册登录后可以将书的订单发给服务器,并存到服务器。 Vue-book 2.0 Github 地址:https://github.com/percy507/v... 【觉得不错就来个 star 吧 ^_^】 说明(菜鸟请进,大神绕道 ~) 前端...

    wh469012917 评论0 收藏0
  • Vue-book 2.0 一个移动简单全栈 web APP

    摘要:本项目是一个简单的全栈项目,前端新手可以拿来练练手。项目实现了一些简单的功能,后台可以对图书进行录入录出扫码或手动,前台显示录入的图书,并且前台注册登录后可以将书的订单发给服务器,并存到服务器。 Vue-book 2.0 Github 地址:https://github.com/percy507/v... 【觉得不错就来个 star 吧 ^_^】 说明(菜鸟请进,大神绕道 ~) 前端...

    NotFound 评论0 收藏0
  • 设计架构

    摘要:先来看一张系统前后端架构模型图。一种接口的约定本文用于定义一种统一的接口设计方案,希望具有参考价值。,和都是常见的软件架构设计模式,它通过分离关注点来改进代码的组织方式。 如何无痛降低 if else 面条代码复杂度 相信不少同学在维护老项目时,都遇到过在深深的 if else 之间纠缠的业务逻辑。面对这样的一团乱麻,简单粗暴地继续增量修改常常只会让复杂度越来越高,可读性越来越差,有没...

    graf 评论0 收藏0

发表评论

0条评论

oysun

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<