什么是DOM,JSON,AJAX?【JavaScript全栈入门教程6】

前后端：比如我们是从前端看到这个视频，但是视频存储是在后端服务器上的，包括bilibili的账号密码都是在后端服务器上的。后端负责底层数据的存储和软件交互的逻辑，什么是软件交互逻辑？一键三连就是，这个视频权重变高，就会推送给更多的人。点赞→权重，这就是一个逻辑。

DOM：前端向后端发出请求，后端返回HTML文件，浏览器就是将该文件解析成DOM树。这些节点之间存在相应的关系（父子节点、邻居节点）节点也有着各自的属性，根据DOM树,浏览器计算每个元素的几何属性,如宽高、位置等,这一步称为布局(layout)。浏览器就会依据这些信息进行网页的排序和渲染从而生成最终的界面。（关键要理解：页面不是HTML从服务端发送来就是这样的，首先是要经过浏览器将其解析为DOM树，再根据DOM树的属性和节点关系进行布局）

JavaScript正是操作dom节点来改变HTML页面的

前后端之间传输数据的格式就是JSON。前端通过AJAX请求后端接口,后端将数据处理成JSON格式返回给前端,前端再解析JSON数据进行页面渲染和交互操作。这种模式已经成为目前最常见的前后端交互方式之一。JSON使用JavaScript语法来描述数据对象,但是JSON格式的数据和JavaScript代码是不同的（JSON和字典的区别：JSON和字典在一些方面确实相似。首先，它们都使用键值对的形式来组织数据。JSON使用键值对来表示数据的属性和值，字典也是由键值对组成的数据结构。这种键值对的形式使得数据可以按照特定的标识进行访问和操作。其次，JSON和字典都支持嵌套结构。JSON中的值可以是简单的数据类型，也可以是对象或数组，这使得可以构建复杂的数据结构。字典中的值也可以是任意类型，包括嵌套的字典或其他数据结构，从而实现多层次的数据表示。此外，JSON和字典都可以通过键来访问和操作对应的值。在JSON中，可以使用键来获取特定属性的值；在字典中，可以通过键来获取对应的值。尽管它们有相似之处，但需要注意的是，JSON是一种通用的数据交换格式，可以在不同的编程语言和系统之间进行数据交互。字典则是一种数据结构，通常是特定编程语言的内置类型或标准库提供的功能。它们在使用方式和应用场景上有一些差异，需要根据具体情况选择合适的数据表示和操作方式。）这里还要补充一下什么叫对象？对象就是类的实例化，类是抽象的，对象是具体的。比如汽车是类，某一辆汽车就是对象（千万不要以为对象是类的一部分，比如认为汽车零件是对象）

AJAX

传统的Web应用模式是前端发送HTTP请求,后端返回完整的HTML页面。但随着Web应用越来越复杂,这种模式展示一些问题:

• 整页加载不够灵活,每次互动都需要重新加载页面，比如我在B站搜索视频，很多内容其实是不需要变的，只需要发送需要改变的JSON请求就是了。
• 前后端耦合严重,后端负责主要的逻辑处理。

因此,AJAX模式应运而生:

• 前端使用JavaScript发送异步请求,获取数据。
• 后端只返回数据,通常是JSON格式,不再返回完整HTML。
• 前端使用JavaScript渲染页面,实现局部刷新。

这种模式提高了用户体验,页面不需要重新加载就可以更新。并且实现了前后端的分离：后端专注业务逻辑,只返回数据。前端专注展示,使用前端框架渲染页面。所以,返回JSON格式的数据而不是完整HTML,是当前Web应用实现前后端分离的常用方式之一。不过传统模式返回HTML也依然有其适用场景。

传统的Web应用是这样的:

1. 浏览器发送HTTP请求,请求HTML页面
2. 服务器生成完整的HTML页面,返回给浏览器
3. 浏览器解析HTML,生成DOM树
4. JavaScript通过DOM API操作DOM树实现页面交互

而现在的Web应用中,常采用AJAX模式:

1. 浏览器使用JavaScript发送异步请求,直接请求数据(常是JSON格式)
2. 服务器返回JSON格式的数据给浏览器
3. 浏览器中JavaScript代码接收到JSON数据
4. 然后借助DOM API或框架(如jQuery)将JSON数据渲染成HTML
5. 再将生成的HTML插入到DOM树中

需要解析JSON并构建DOM树主要有以下原因:

1. 浏览器无法直接将JSON构建为DOM树

浏览器接收到的JSON数据只是一段文本,这些数据本身不包含任何标记语言信息。浏览器无法知道如何根据这些数据构建DOM树。

2. 需要根据JSON的数据构建界面

JSON本身只包含数据,不包含表示界面方式的信息。我们需要根据JSON数据生成对应的HTML标记,然后构建成DOM树,才能通过DOM树渲染出界面。

3. 便于通过JavaScript操作界面

拿到JSON数据后,我们需要通过JavaScript更新界面。而JavaScript只能通过DOM API操作DOM树。所以我们需要用JSON数据构建DOM树,才能通过JavaScript控制界面。

4. 实现数据和界面解耦

如果不经过解析JSON就直接输出界面,数据和界面会强耦合。通过解析JSON构建DOM树,可以实现数据和界面解耦,提高代码灵活性。

5. 允许按需更新界面

通过操作构建的DOM树,可以只更新界面局部而非整页。避免不必要的重复渲染。

总结来说,JSON本身只是数据,需要构建成DOM树之后,才能通过JavaScript控制界面更新,实现数据和界面解耦,减少重复渲染,提高性能和灵活性。这是当前web开发中常见的模式。

进一步解释HTML和JSON的区别:

- HTML与HTTP请求确实是一体的。传统的Web应用中,每次交互都需要重新请求完整的HTML页面。这导致页面需要频繁重新加载。

- JSON与AJAX请求是分离的。AJAX可以单独请求JSON格式的数据,并使用JavaScript局部更新页面,避免整页重新加载。所以,HTML+HTTP对应于传统的“全页面加载”模式。JSON+AJAX对应于新 的“单页应用”模式。

- HTML用于定义页面内容结构,JSON用于存储和交换数据。

- HTML需要完整加载才能显示页面。JSON可以部分加载,JavaScript解析后更新页面。

- HTML对数据和视图混合在一起。JSON分离了数据,更灵活。

- 简言之,HTML+HTTP是过去的传统模式,JSON+AJAX是当前的主流模式。SON配合AJAX可以实现局部更新,减少不必要的数据加载,提高性能和用户体验HTML代表过去的全页加载模式,JSON代表当前的异步分段加载模式。这是Web应用进化到单页应用的一个重要原因。