前端——交互

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

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

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

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

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

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

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

---

2.交互四大概念

行为:用户在使用程序的所发出的动作，当用户在做动作的时候js会有对应的事件对应的钩子产生，需要特别注意。
状态:指页面元素在用户发生动作后，页面元素不再是发生动作前的页面元素了，而是附带了状态的页面元素，是赋值或赋能过的元素。
数据:在用户发出动作后与给后端发送请求获取到的结果。
效果:当用户进行各种各样的行为，改变了页面元素的状态，发送请求后将数据进行展示，进而达到用户看到的界面的变化，称为效果

---

3.基本模式

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

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

3）前端的触发方式

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

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

 

5)前端请求的数据格式

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