javascript - 在 HTML 中“即时”进行更改的过程背后是什么？

Question

在浏览器级别背后发生了什么，允许对 HTML 文件进行动态更改，例如使用 javascript 向元素添加类，甚至插入整个元素结构？它会刷新页面吗？它是语言级别还是浏览器保存一些参数并在重新加载页面时加载？我有这个疑问，因为在添加了一些东西之后，它不会重新启动我所做的其他 javascript 修改，而例如，使用 django 框架，当我再次加载相同的页面时，所有用 js 所做的修改都消失了。

标签： javascripthtmldjangobrowser

Answer 1

如果我理解正确，您希望用户对页面进行更改并保留这些更改，也许是为了未来的用户？

首先，javascript 可以对立即可见的 HTML（实际上是对DOM ）进行更改。

当页面刷新时，那些由 javascript 所做的更改会丢失，因为重新显示的是存储在网络服务器上的 HTML（如果您在本地执行此操作，通过 xampp 或 mamp 或 flask/django/etc，那么想象您正在通过虚拟主机在线访问该网站）。

要使更改“坚持”，您必须以某种方式修改后端代码。不可能的？并不真地。

您可以从一开始就对站点进行编程，以获取某些数据以显示在网页上（例如，表格行的默认顺序......或 textarea 或 DIV 的默认内容 - 您的 javascript 允许用户使用这些内容修改）从存储的位置（例如从 MariaDB/MySQL 数据库 - 甚至从网络服务器上的文本文件）。然后，当用户与网页交互并更改其中之一时，您的设计的一部分是让 javascript 通过将 mods 保存回原始数据的存储位置来保留新数据/更改（替换原来的那里）。然后，下次刷新页面时，将显示更改的数据而不是原始数据。

这需要您的网页（在客户端浏览器中运行的javascript）主动与后端网络服务器通信，将用户的修改发送回网络服务器，并且网络服务器必须知道如何接收数据并存储它。

但是您编写的 javascript 仅在客户端运行 - 它如何更改服务器文件？最流行的答案是：AJAX—— 它实际上比你想象的更容易使用。

因此，您同时编写 HTML 和 javascript。javascript 允许用户对页面进行一些更改。（假设有一个保存按钮）当点击保存按钮时，javascript 代码将获取更改的数据并使用 AJAX 将其发送到后端网络服务器。因此，还必须对网络服务器进行编程以期待这样的通信并接收数据，然后它必须将数据存储在正确的位置。为此，必须使用服务器端语言在服务器端编写附加代码。最常见的是 PHP 或 ASP.NET，但也可以是 javascript （如果服务器上安装了 Node.js），或 Python、Erlang、Haskell、Java、Rust、Ruby 等。但 PHP、ASP.NET、 Python 和现在的 javascript 是最流行的。