写在前面：仅供自己学习参考，侵删。
一些概念
网站数据处理一般分为三层
第一层，表示层，这部分可以用HTML代码，CSS/Javascript代码来实现等。通过前端代码可以实现网页的布局和设计。这层又可以称为显示层。也就是你用浏览器打开能看到的网页。（前端负责的）
第二层，是业务层，这层是负责处理数据的。常用的后端语言有PHP，Java，Go等。后端将前端传回的数据进行一系列的业务处理之后，将要回显的数据发送给前端。（后端负责的）
第三层，是数据层，主要是对数据库进行操作。当然这里的数据库不止有传统的关系型数据库mysql等，还有非关系型数据库，例如：redis、MongoDB、es等（数据库）
接口
前后端的交互基本都是通过程序接口实现的。
接口就是提供具体能力的一个标准和抽象，是一些预先定义的函数，包括接口地址、传入参数和返回参数和数据。
可以简单理解为，当需要访问某些数据时，正常状态下向某一路径传入正确参数，会收到对应的返回数据。
前后端交互主要有Json格式、form-data格式等，Json格式为主。
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言，易于阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
对象格式：是一个无序的“键值对”集合，显示的时候看似有顺序，其实就是巧合。
{ "ID": 1001,"name": "张三", "age": 24}
数组格式：是值的有序集合。
["张三","李四","王老五"]
嵌套格式：
[{ "id":1,"name":"张三""age":18,"sex":"男"},{"id":2,"name":"李四","age":30,"sex":"男"}]
Json格式、form-data格式的比较
1.数据格式不同
form-data的数据格式为：a=1&b=2&c=3;
json的数据格式为：{“a”: 1, “b”: 2, “c”: 3};
2.请求头不同
form-data：Content-Type: application/x-www-form-urlencoded;
json: Content-Type: application/json
3.对于同样的数据信息，使用form-data数据量会比使用json的要小一点；
4.对于可读性来说，json的可读性要好，因为它简洁和清晰的层次结构；
5.form-data传二进制比较方便，如上传文件，而使用json则不太合适；
数据都放在服务器上，服务器上的大多数数据会放在数据库中，比如MySQL数据库。网上是说，部分数据会缓存在文件中，比如一些配置文件，以加快响应速度。但经和学姐等人讨论有不同意见，分担mysql压力的缓存通常放在内存中，文件io不如直接读mysql。
有两个比较有趣的缓存数据cookie和session，他们常常用来记录请求者的身份，cookie在客户端，常常加密存在于客户端里，session常常存在于服务端上。
前端不能直接操作数据库，必须通过后端来进行操作。因此，就产生了前后端数据交互的问题。
数据交互的过程可简单理解为，前端想要获得某些数据，将传入参数通过URL接口地址，传递给服务器，服务器根据传入的参数了解到前端要获得什么数据，去数据库查询获取数据，再将所需数据返回给前端，前端拿到数据做相应的页面展示。
数据交互有哪些方式（10个）
1. cookie
通俗的说，cookie是前端能用于存储信息的一个技术，这个技术主要的使用目的是为了在跟后端进行数据交互时，让后端识别前端的身份。
2. 服务端渲染SSR
服务端渲染，是指由服务侧（server side）完成页面的DOM结构拼接，然后发送到浏览器，为其绑定状态与事件，成为完全可交互页面的过程。
3. 客户端渲染CSR
客户端渲染，是指由客户端（client side）中的JS完成页面和数据的拼接，生成DOM结构再交由浏览器渲染成页面的过程。
4. Ajax
Ajax 是指⼀种创建交互式⽹⻚应⽤的⽹⻚开发技术。Ajax 是⼀种在⽆需重新加载整个⽹⻚的情况下，能够更新部分⽹⻚的技术。Ajax 是⼀种⽤于创建快速动态⽹⻚的技术。
使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重新加载整个页面，这使得程序能够更快地响应用户的操作。
5. JSONP
可用于解决主流浏览器的跨域数据访问的问题。
为什么会出现跨域问题——出于浏览器的同源策略限制。同源策略是一种约定，它是浏览器最核心也最基本的安全功能。
在同源策略中，要求域名、协议、端口 3部分都要相同。
6. CROS
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
它是一种规范化的跨域请求解决方案，安全可靠。
优势：
可以在服务端控制是否允许跨域，可自定义规则
支持各种请求方式，如get，post等
缺点：
会产生额外的请求，就是接下来我们要提到的预检请求
CORS请求
简单请求： 简单请求就是表单请求，浏览器沿袭了传统的处理方式，不把行为复杂化，否则开发者可能转而使用表单，规避 CORS 的限制，即不使用cors。
非简单请求：在正式通信之前，增加一次HTTP请求，称为“预检”请求。浏览器会先询问服务器，当前网页所在域名是否在服务器的许可名单之中，服务器允许之后，浏览器才会发出正式的XMLHttpRequest请求，否则会报错。
即时通讯技术
7. Ajax短轮询
浏览器定时向服务器发送请求，看看有没有更新的数据。
短轮询的缺点：消息交互的实时性较低（服务端到客户端的数据反馈效率低）；
实现方式
方式1：设定一个定时器，无论有无结果返回，时间一到就会继续发起请求，这种轮询耗费资源，也不一定能得到想要的数据，这样的轮询是不推荐的。
方式2：轮询就是在第一次请求的时候，如果返回数据了那么就在成功的回调里面再次发起这个请求，就像递归一样，调用本方法。
8. comet
comet:俗称反转Ajax或服务端推数据技术。
由于某些特定的业务需求，比如抢票，我们需要有及时的数据更新,我们能够想到的就是使用setInterval每隔一定时间，比如10s去获取一次请求，从而做到一些通知更新，但是这并不一种高效的做法，这会增加服务器的请求数量。
这个时候有了另外一种概念，“反向Ajax”，即由服务器进行数据推送， Comet能够让信息近乎实时的被推送到页面上，非常适合要求实时性的获取的数据的页面。
实现Comet的方式有两种：
长轮询
页面发起一个到服务器的请求，然后服务器一直保持连接打开，直到有数据发送。发送完数据之后，浏览器关闭连接，随即又发起一个到服务器的请求。这一过程在页面打开期间一直持续不断。
http流
流在页面的整个生命周期内只使用一个HTTP连接。具体来说，就是浏览器向服务器发送一个请求，而服务器保持连接打开，然后周期性地向浏览器发送数据。
9. Web Socket
HTML5 WebSocket 设计出来的目的就是要取代轮询和 Comet 技术，使客户端浏览器具备像 C/S 架构下桌面系统的实时通讯能力。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。
也就是我们可以使用web技术构建实时性的程序比如聊天游戏等应用。
10. SSE
SSE（Server-Sent Event，服务端推送事件）是一种允许服务端向客户端推送新数据的HTML5技术。与由客户端每隔几秒从服务端轮询拉取新数据相比，这是一种更优的解决方案。
部分方式详细讲解
SSR （server side render）服务端渲染
优点
前端首屏响应速度变快，尽量不占用前端的资源，前端耗时少。因为后端拼接完了html，浏览器只需要直接渲染出来。
有利于SEO。因为在后端有完整的html页面，所以爬虫更容易爬取获得信息。
SEO（search engine optimization）搜索引擎优化，利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名
缺点
不利于前后端分离，开发效率低。使用服务器端渲染，则无法进行分工合作，则对于前端复杂度高的项目，不利于项目高效开发。
占用服务器端资源，加大了服务器的压力。
CSR（client side render）客户端渲染
随着应用复杂性提高，用户对于界面的要求越来越高，前端交互也越发显得重要。同时，AJAX的兴起把传统的开发模式带入到一个新时代：前后端分离式开发，即前端有自己的服务，不依赖于后台，前后端通过AJAX进行数据交互。前端发送请求，通过后台提供的api获取数据，然后通过前端js进行HTML页面的生成，展示给浏览器。
优点
前后端分离。前端专注于前端UI，后端专注于api开发，且前端有更多的选择性，而不需要遵循后端特定的模板。
用户体验更好，我们将网站做成SPA（单页面应用）或者部分内容做成SPA，当用户点击时，不会形成频繁的跳转。
缺点
前端响应速度慢，特别是首屏。
不利于SEO，因为客户端渲染页面的代码中只有一个空代码（空html），所以对于目前的搜索引擎爬虫来说，页面中没有任何有用的信息，自然就无法提取关键词，进行索引。
二者之间的选择：
如果是企业级网站，主要功能是页面展示，它没有复杂的交互，并且需要良好的SEO，那我们应该使用服务端渲染。
如果是后端管理页面，强调交互性，它不需要考虑到SEO，那我们应该使用客户端渲染。
具体使用哪种渲染方式也不是绝对的，现在很多网站使用服务端渲染和客户端渲染结合的方式
前后端分离的优势与劣势
优势：
1.以实现真正的前后端解耦，优化开发流程，划分职责界限
2.减少后端服务器的并发负载压力
3.更友好的错误提示
劣势：
1.前端响应较慢，资源消耗严重，在业务复杂的情况下，一个页面可能要发起多次HTTP请求才能将页面渲染完毕，且在Json返回的数据量比较大的情况下，渲染的十分缓慢，会出现页面卡顿的情况
b.不利于SEO,搜索引擎的爬虫无法爬下JS异步渲染的数据
为了解决不足，后续在前后端分离的基础上衍生出了引入NodeJS作为中间层的进行服务端渲染的架构方案.
同构渲染
首屏使用服务端渲染，其他页面使用客户端渲染。
同构渲染，实际上就是把CSR和SSR的优势结合起来，让同一套代码在服务器上跑一遍，生成首屏内容，然后再在客户端跑一遍，绑定事件。这样既提供了更快的首屏速度、更好的SEO支持，也完成了前后端分离，又能避免对服务器带来过大的负载。
AJAX（Asynchronous Javascript And XML）异步JS&XML
Ajax 是指⼀种创建交互式⽹⻚应⽤的⽹⻚开发技术。Ajax 是⼀种在⽆需重新加载整个⽹⻚的情况下，能够更新部分⽹⻚的技术。Ajax 是⼀种⽤于创建快速动态⽹⻚的技术。
传统的web应用要想与服务器交互，必须提交一个表单（form），服务器接收并处理传来的表单，然后返回全新的页面，因为前后两个页面的数据大部分都是相同的，这个过程做了很多重复的工作，传输了很多冗余的数据、浪费了带宽。于是Ajax技术便应运而生。
Ajax的出现使客户端与服务器端传输数据少了很多，也快了很多，也满足了以丰富用户体验为特点的web2.0时代初期发展的需要，但是慢慢地也暴露了他的弊端。比如无法满足即时通信等富交互式应用的实时更新数据的要求。这种浏览器端的技术毕竟还是基于http协议，http协议要求的请求/响应的模式也是无法改变的。
Ajax 通过在后端与服务器进⾏少量数据交换，可以使⽹⻚实现异步更新。这意味着可以在不重新加载整个⽹⻚的情况下，对⽹⻚的某部分进⾏更新。
同步：发送⼀个请求，需要等待响应返回后才能够发送下⼀个请求，如果该请求没有响应，不能发送下⼀个请求，客户端会处于⼀直等待中。
异步：发送⼀个请求，不需要等待响应返回，随时可以再发送下⼀个请求。
实现
原生js实现
1、定义⼀个XMLHttpRequest核⼼对象xhr
2、通过xhr.open⽅法给当前对象提供访问⽅式、URL等
3、发送当前的请求⾄指定的URL
4.后端可用servlet接收返回值并处理
JQuery实现
JS版的Ajax仅做为了解，我们重点学习jQuery版的Ajax，jQuery是⼀个优秀的js框架，对JS原⽣的Ajax进⾏了封装，封装后的Ajax的操作⽅法更简洁，功能更强⼤，，语法结构简单，代码可读性好，也是程序员最普遍使⽤的一种数据交互方式。在这里顺便提一下axios，axios是现在最流行的一种第三方库，建议大家去熟悉了解一下它的使用方法等。
与Ajax操作相关的经常使⽤的jQuery⽅法
Ajax请求
Get请求
Post请求
相同点： 都是jQuery封装的⽅法，实现了异步的数据交互。
不同点： $.ajax()是jQuery的第⼀次封装，使⽤时稍显麻烦，但是功能强⼤，覆盖了get和post请求，有错误调试能⼒，写法顺序可以改变。
$.post()和$.get()是jQuery Ajax的第⼆次封装，由于$.Ajax()写法过于臃肿，简化为$.post()和$.get()，功能是相同的没有区别。但是写法要求更⾼，顺序不能改变。
cookie
前端通过登录来存储cookie信息，后端可以通过 req.cookies() 来获取存储的cookie信息
我们在浏览器上登陆上自己的账号后，只要浏览器不关闭，随便我们浏览网页，我们的账号始终都是处于登陆状态的。这用到的就是cookie，我们把我们的账号信息保存在了浏览器的cookie上了
原生js实现
jQuery实现
1).expires: 7
定义cookie的有效时间，值可以是一个数字（从创建cookie时算起，以天为单位）或一个Date 对象。如果省略，那么创建的cookie是会话cookie，将在用户退出浏览器时被删除。
2).path: ‘/’
默认情况：只有设置cookie的网页才能读取该cookie。
3).secure: false
默认值：false。如果为true，cookie的传输需要使用安全协议（HTTPS）。
默认值：创建 cookie的网页所拥有的域名。
4).raw: false
默认值：false。
默认情况下，读取和写入 cookie 的时候自动进行编码和解码（使用encodeURIComponent 编码， decodeURIComponent 解码）。要关闭这个功能设置 raw: true 即可。
jsonp
可用于解决浏览器的跨域数据访问的问题。
利用的就是script的src标签没有跨域限制来实现的。
最大特点就是简单适用，兼容性好，缺点是只支持get请求，不支持post请求。
核心思想：网页通过添加一个<script>元素，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。
原生js实现
jQuery实现