JAJX（Asynchronous Javascript And XML）

XML：可扩展的标记语言，用自定义标签来存储数据。

[
  {
    "name": "Tom",
    "age": 18,
    "score": {
      "math": 100
    }
  },
  {
    "name": "Jack",
    "age": 19,
    "score": {
      "math": 99
    }
  }
]

<?xml version="1.0" encoding="UTF-8"?>
<root>
  <student>
    <name>Tom</name>
    <age>18</age>
    <score>
      <math>100</math>
    </score>
  </student>
  <student>
    <name>Jack</name>
    <age>20</age>
    <score>
      <math>99</math>
    </score>
  </student>
</root>

项目的架构模型

• 纯服务器渲染（需要做SEO优化或者技术氛围问题）

  • 服务器接收到请求后找到对应的页面，获取到页面的代码

  • 根据需求从数据库中获取到需要动态展示的数据

  • 把页面和数据结合在一起进行渲染，生成有结构有内容的完整页面（服务端进行渲染）

  • 把渲染玩的页面返回给客户端

  特点：

  • 我们看到的内容都是在服务器端渲染完的，客户端只是把所有渲染好的内容呈现在页面中而已， 然而第一次渲染完，页面中的某部分数据需要更新了，需要让服务器整体重新渲染一次，把最新 的页面返回给客户端，客户端只能整体刷新页面展示最新的内容，性能和体验等都非常差，而且 服务器压力也很大。由于内容在服务器端就已经渲染好了，页面渲染完后，在页面的源代码中 可以看到内容，有利于 SEO 优化。

• 混编模式，部分内容服务器渲染，部分内容客户端渲染。

  • 骨架屏：首屏内容服务器渲染，其余内容都是客户端基于 AJAX 获取。

    • 服务器接收到请求后，把需要的页面代码返回给客户端

    • 客户端第一次渲染完，只有结构和样式，没有数据

    • 客户端通过 AJAX 向服务器发请求获取数据

    • 服务器接收获取数据请求后，把需要的数据找到并返回给客户端

    • 客户端填充页面数据

    特点：

    • 可以实现页面中内容的局部刷新，而且渲染操作交给客户端来操作，体验好，减轻了服务器 压力。

    • 开始可以只把部分区域的数据获取到，滚动到某个区域后，再请求对应的数据，实现数据的 分批异步加载，提高性能体验

    • 由客户端渲染的内容没有出现在源代码中，不利于 SE0 优化

• 客户端和服务器端完全分离，目前最常见的模型。

  • Vue

  • React

• Vue / React 在服务器端基于 Node 来渲染