全局刷新

全局刷新：整个页面的刷新，优点就是数据都是在服务器端加载的

页面是由服务器端渲染的，前后端不分离

当客户端发送请求时，服务器端处理的事情：

  • 首先获取到 HTML 资源的内容

  • 从服务器中获取需要展示的数据

  • 把数据和获取的源代码进行拼接处理（处理好的子字符串中有结构和数据）

  • 把处理好的 XML 格式数据返回给客户端

客户端拿到源码后，只需要展示渲染即可（因为需要展示的数据都已经在服务器端拼接好了）

服务器端渲染的好处：

  • 有利于 SEO 优化（服务器端渲染好的内容到客户端呈现，在页面源代码中可以看到绑定的内容，有利于引擎的收录），但是客户端做字符串拼接，呈现出来的内容在页面源代码中是没有的，不利于 SEO

  • 只要服务器端并发（抗压能力）给力，页面加载速度会比客户端渲染更快

很多大网站（例如：京东淘宝）首屏数据都是基于服务器端渲染的，客户端获取 XML 数据后直接呈现，增加页面第一次打开速度，提高首屏加载速度。而剩下屏中的内容都是基于 Ajax 获取数据，在客户端进行数据拼接渲染的

比如：登录界面，输入完用户名，需要验证是否存在 不使用 Ajax，首先向服务器发送请求（通过浏览器地址栏问号传参发送给服务器），服务其获取请求后，验证是否存在，不管存在与否，都要给用户一个提示，原始展示页面内容需要改动，服务器端把带提示的内容重新进行拼接，然后返回给客户端，客户端重新渲染最新内容，只能页面整体刷新。

全局刷新的时候，浏览器的刷新按钮旋转，成功后变回原样

局部刷新

Ajax 的诞生就是为了实现局部刷新。

局部刷新：整个页面中只有一部分页面需要更新，这时我们就不需要整个页面刷新，只刷新局部页面即可。

首屏

  • 基于 Ajax 向服务器端发送请求，获取首屏数据

  • 服务器端接收到请求后，把首屏需要展示的数据和内容都拼接成 XML 格式，并返回给客户端

  • 客户端直接渲染呈现即可

其他屏

  • 基于 Ajax 向服务器端发起请求，获取更新的数据

  • 服务器端只把需要的 JSON 格式数据返回给客户端

  • 客户端自己通过 JSON 数据做字符串拼接实现数据绑定

  • 基于 JS 把获取的最新数据替换原有数据