超详细总结：前后端数据交互原理

最近开始接触前后端的一些知识，查了很多资料，今天把互联网产品的前后端数据交互做个总结留做笔记。

互联网产品的前后端数据交互是通过一个通讯协议完成。前后台交互的协议主要包括HTTP,FTP,SMTP,TELNET,POP3…本文仅总结HTTP协议。

HTTP协议
HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议，是一个基于TCP/IP通信协议来传递数据，也是互联网上应用最为广泛的一种网络协议。

HTTP的主要特点

简单快速：客户向服务器请求服务时，只需传送请求方法和路径。由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度很快；
灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记；
无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间；
无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快；
支持B/S及C/S模式

无连接、无状态的理解：
TCP协议对应于传输层，而HTTP协议对应于应用层，从本质上来说，二者没有可比性。

Http协议是建立在TCP协议基础之上的，当浏览器需要从服务器获取网页数据的时候，会发出一次Http请求。Http会通过TCP建立起一个到服务器的连接通道，当本次请求的数据完毕后，Http会立即将TCP连接断开，这个过程是很短的。所以Http连接是一种短连接，是一种无状态的连接。所谓的无状态，是指浏览器每次向服务器发起请求的时候，不是通过一个连接，而是每次都建立一个新的连接。如果是一个连接的话，服务器进程中就能保持住这个连接并且在内存中记住一些信息状态。而每次请求结束后，连接就关闭，相关的内容就释放了，所以记不住任何状态，成为无状态连接。

接口
在互联网领域里面，这个词在不同场景下都会出现，经常听到工程师说“ 让后台给我提供一个接口，我直接调用这个接口 ”，“ 这里你设计一个接口，我来实现 ”，大体上来讲，接口一般指的是HTTP接口，也可以说是HTTP API，接口由后端提供，前端调用后端接口以获取后端数据。而且接口由URL和HTTP方法构成，URL为接口的地址，HTTP方法指的是GET, PUT, DELETE等等。

具体来讲接口就是提供具体能力的一个标准和抽象，是一些预先定义的函数，包括接口地址、传入参数和返回参数和数据。可以简单理解为，当需要访问某些数据，正常状态下传入合格参数，会收到该数据范围内的返回参数。前后台的交互基本都是通过程序接口实现的。

总结：
数据交互的过程可简单理解为，前台想要获得某些数据，将传入参数通过URL接口地址，传递给服务器，服务器根据传入的参数了解到前台要获得什么数据，去数据库查询获取数据，然后将所需数据返回给前台，前台拿到数据做相应的页面展示。

案例

网上用户上传图片作为头像这个需求需要后台人员处理，当用户登录修改自己个人信息的时候，上传了头像。此时，后台处理该用户update个人信息，将该图片存入数据库，一般存的都是图片地址，string形式的数据。然后，要返回到前台的时候，后台人员需要对这些用户的个人信息进行处理，不只是头像，还有一些别的信息。后台通过语言编译，生成json格式的键值对（一般是json 还有xml txt 等数据格式）。生成一个地址也就是url，前台人员利用ajax，将返回的data显示到页面就好了。

那么有几个问题，
1、前端请求数据URL由谁来写?
在开发中,URL主要是由后台来写的,写好了给前端开发者.如果后台在查询数据,需要借助查询条件才能查询到前端需要的数据时,这时后台会要求前端提供相关的查询参数，这里的查询参数也就是URL请求的参数。

2.接口文档主要由谁来写?
接口文档也是主要由后台开发者来写的,因为直接跟数据打交道的就是后台,后台是最清楚,数据库里面有什么数据,能返回什么数据.前端开发只是数据的被动接受者.所以接口文档也主要是由后台来完成的,前端只是接口文档的使用者,使用过程中,发现返回的数据不对,则需要跟后台进行商量,由后台来修改.切记前端不要随意更改接口文档,除非在取得后台开发人员的同意的情况下.总的来讲,接口文档主要由后台来设计,修改,前端开发者起到了辅助的作用。

3.前端开发与后台交互的数据格式主要是什么?
前后端交互时传递数据的格式，主要是JSON格式的，当然也有XML格式，但现在用的不多。

JSON
JSON(JavaScript Object Notation,) 是一种轻量级的数据交换格式，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

JSON数据格式很好理解，举个例子：

{
“姓名”:”流年”
“性别”:”男”
“兴趣爱好”:”听音乐”
}
这就是 JSON键/值对。

实例解析1

这是一个APP的页面，前端会把它分为3个部分去分别请求数据，即：

banner部分
课程种类部分
热门好课部分

（1）banner部分
前台需要今天产品的最新图片地址。URL中的参数主要是根据后台需要，如果后台需要前端传递一个时间戳才能够查询到具体的图片信息，那么前端在数据请求时请求参数就应该包含时间的参数，代码如下：

前台部分：
#前端得到的URL
URL:http://www.heiheihei.com/GetPicture.php
#需要传递给后端带参数的URL
或者http://www.heiheihei.com/GetPicture.php?time=”2017-11-23 00:00:00″

代码解析：
http： #协议头，跟后台交互需要基于HTTP协议。
heiheihei.com #域名也叫主机名（heiheihei是乱起的）。
/GetPicture.php #路径，也就是能给前台数据的路径。
?time=”2017-11-23 00:00:00″ #参数，带着这个参数给服务器，服务器就会把2017年11月23日零时0分0秒的banner查询到并且返给前端。

后端部分：

select “轮播图片” from picture where time = “2017-11-23 00:00:00”

代码解析：
数据库查询语句，去数据库里面去查找相应的数据表，查询条件就是前端传递过来的URL参数time。

（2）课程种类部分
此部分包含两部分内容，即图片和标题。这些内容在后台数据库表中，后台只需要设计个URL给前端，让前端直接发访问就可以了：

URL:http://www.heiheihei.com/LessonType.php

（3）热门好课部分
此部分也是包含图片和标题。前端把这些信息告知后台，后台看到这些信息后，会去相对应的数据库去查询，如果这些数据后台很容易获取到，会直接给个URL给前端。否则就需要前端通过URL来传递一些参数。比如：

#前端得到的URL
URL:http://www.heiheihei.com/goodLesson.php
#需要传递给后端带参数的URL
或者http://www.heiheihei.com/goodLesson.php?time=”2017-11-23 00:00:00&clases=””

前端应该告知后台哪些有效信息，后台才能返回前端想的数据的呢？总结来说：

先将要展示的页面内容进行模块划分，将模块的内容提取出来，以及方便前端的一些标志值等，将所有想要的内容和逻辑告知后端，后端就会去数据库里面去查找相应的数据表中去获得相应的内容，或者图片地址信息。

URL中的参数主要是根据后台需要，如果后台需要一个参数作为查询的辅助条件，前端在URL数据请求时就传递参数。参数前面加上？，如果有多个参数，参数中间&

所有前端请求的URL后面的参数，都是辅助后台数据查询的。如果不需要参数，那么后台就会直接给个URL给前端。

实例解析2

这是一个网站的登录功能，我们通过ajax（可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页）加载服务器数据的过程再来体验一下前后台数据交互的过程。

我们先给登录名和登录密码的文本框起两个名字，即UserName，PassWord。

前端代码（解析）如下：

$.ajax({‘url’:’login.php’, #和之前的URL一样，前端把参数传递到什么位置
‘data’:{“username”:$(‘#UserName’).val(),”PassWord”:$(‘#password’).val(),}, #前端传递给后端的数据（用户名和密码）
‘success’:function(data){} #服务器返回数据成功的时候，前端需要如何操作（data中存的就是服务器返回的数据）
‘type’:’post’ #数据传输的方法
‘dataType’:’json’ #传递数据的类型，JSON
}）;

我们不用关心function（data）函数中具体的代码，无非就是：前端页面展示用户的用户名、页面状态变为已登录、展示用户相关数据等。

后端代码过于复杂，就不展示了，总之后端要做的处理就是：拿到前端传递过来的数据（用户名和密码）和数据库中用户信息做比对，如果一致则返回给前台一个状态，并且返回用户的相关数据（昵称、个人信息、购物车信息、收藏的商品等等），这些数据同样是以JSON的形式传回给前端。如果用户名或密码不一致，也返回给前端一个状态。前端根据得到的状态做出页面的相应效果：登录按钮变为退出、显示用户昵称、显示购物车信息、显示收藏信息、登录框隐藏等，如果用户名密码不匹配则显示相应的提示信息。

以上就是网站通过ajax技术完成的前后端数据交互过程。

最后，关于接口设计的建议。
虽然很多时候一个api接口的业务，数据逻辑是后端提供的，但真正使用这个接口的是客户端，一个前端功能的实现流程与逻辑，有时候只有客户端的RD才清楚，从某种意义来说，客户端算是接口的需求方。

所以在前期接口设计和评审时，客户端的RD应该更多的思考和参与，什么时机调什么接口？每个接口需要哪些字段？数据含义怎么给？只有这些都考虑清楚，且达成一致并产出接口文档后，当项目真正启动时，根据接口协议进行开发，才能尽量避免各种不确定因素对项目整体进度的影响。

参考文献：
浅谈前后端数据交互方式
Web通信协议：OSI、TCP、UDP、Socket、HTTP、HTTPS、TLS、SSL、WebSocket、Stomp
前后端交互原理深入理解

超详细总结：前后端数据交互原理相关推荐

ajax连接前后端原理,前后端数据交互方法和原理
前后端数据交互方法和原理发布时间:2018-10-28 11:25, 浏览次数:742 对于想要搞web的新手而言,会用html+css+javascript实现一个页面没什么太大的困难,但是想要前 ...
前后端数据交互方法汇总
这篇文章给大家介绍几种常用的前后端数据交互方法,并给出使用建议.以提高前后端协同开发的效率.非常的详细,推荐给小伙伴们,有需要的小伙伴可以参考下. 1.HTML赋值输出到 Element 的 val ...
干货 | 万字长文全面解析GraphQL，携程微服务背景下的前后端数据交互方案
作者简介古映杰,携程研发高级经理,负责前端框架和基础设施的设计.研发与维护.开源项目react-lite和react-imvc作者. 前言随着多终端.多平台.多业务形态.多技术选型等各方面的发展, ...
详解 AJAX-SpringBoot 前后端数据交互
详解 AJAX-SpringBoot 前后端数据交互 1. Ajax 概述 Ajax 的英文全称是 "Asynchronous JavaScript and XML",即 &quo ...
前后端数据交互——ajax技术
在实际开发过程中,前端页面通常需要根据后台数据实现动态生成和实时更新,因此如何实现前后端数据交互成了开发过程中的难题. 现将使用ajax技术解决前后端数据的交互: (1)ajax技术介绍: ajax一 ...
软件测试的交互,软件测试--前后端数据交互
作为一个合格的软件测试人员, 能够熟练定位bug的位置是属于前端还是后端,是必备技能之一.所以就需要明白前后端数据是怎么进行交互的. 一.网站数据处理主要分为三层第一层,表示层,这部分可以用HTML ...
前后端数据交互——ajax（原生及jquery）
目录前后端数据交互--ajax 1. 介绍 2.原生ajax用法 3.jquery的ajax 4.ajax原理说明前后端数据交互--ajax 1. 介绍 1.1 定义 Ajax(Asynchron ...
前后端数据交互|分页查询|表格-双向绑定|get和post的区别
目录 1 前后端数据交互 1.1 前端代码部署在前端服务器 1.2 前端代码在浏览器展示(只展示页面,没有数据)----自给自足 1.3 前端/浏览器请求后端数据 (后端死数据)----给 ...
基于axios前后端数据交互
基于axios前后端数据交互一.get 1.前端 <!DOCTYPE html> <html lang="en"> <head><met ...

超详细总结：前后端数据交互原理

超详细总结：前后端数据交互原理相关推荐

最新文章

热门文章