一、首先了解前端、后端、数据三者的关系

1) 前端通常是html，css，js三者构成的页面的总称。运行在客户端。以浏览器为例。

2) 后端是指后端程序。比如java，php等编写的一些服务。用来操作服务器。

3) 数据，数据都存放在服务器上。

4) 服务器上的数据大多会放在数据库中，比如mysql数据库；部分数据会缓存在文件或redis中，比如一些配置文件，以加快响应速度。

5) 有两个比较有趣的缓存数据，cookie和session，它们通常用来记录请求者的身份。cookie常常加密储存在客户端里。session常常储存在服务器上。

6) 前端不能直接操作数据库，必须通过后端来进行操作。因此，就产生了前后端数据交互（通过接口）的问题。

二、前后端数据交互的原理

基于BS模式下的前后端交互方式，遵循 请求&响应 原理。

1) 输入网址，打开网页，这本身就是一次基本的数据交互模式。

  • 前端发送请求，后端返回数据

2) 我们讨论前后端的交互方式时，一般是讨论前后端都参与时的情况。 常见的前后端交互的基本模式如下：

i）url地址（没有url就无法发起一次请求）

ii）请求参数（请求一个url，然后发送请求参数，达到更精细化的请求）

iii）前端的触发方式

  • 用 a标签 可以发 get 请求，但是也会刷新页面或新开页面；
  • 用 img 可以发 get 请求，但是只能以图片的形式展示；
  • 用 link 可以发 get 请求，但是只能以 css、favicon 的形式展示；
  • 用 script 可以发 get 请求，但是只能以脚本的形式运行；
  • 用 form表单 可以发请求，但是会刷新页面或新开页面；
  • 用 jsonp 实现请求，支持跨域请求；
  • 用 ajax 实现页面无刷新的请求。

iv）前端触发以后，前端请求的方式

 v）前端请求的数据格式

  • 对于请求参数和返回的数据，前后端会统一起来，使用同一个数据格式，一般有xml和json两种。JOSN会更常用。
  • 请求的参数，可以被封装成json格式，传入到后端，后端获取后，解析请求数据，操作数据库，获得数据库数据，打包成json格式，传给前端。
  • 这里，json是以小型数据库的形式出现了。js对json进行了编码和解码，java/php等也对json进行了编码和解码。

以上就是前后端交互方式的大致总结，涉及的基础知识有 http协议，java/php，js，josn等相关内容。

更多推荐

前端和后端 数据交互的基本知识