客户端服务端交互概述

最新推荐文章于 2021-08-09 15:18:54 发布

中小学生

最新推荐文章于 2021-08-09 15:18:54 发布

阅读量420

点赞数

CC 4.0 BY-SA版权

原文链接：https://developer.mozilla.org/zh-CN/docs/Learn/Server-side/First_steps/Client-Server_overview

静态网站

静态网站是指每当请求一个特定的资源时，会从服务器返回相同的硬编码内容。因此，例如，如果您在 /static/myproduct1.html 有一个关于产品的页面，则该页面将返回给每个用户。如果您添加另一个类似的产品到您的网站，您将需要添加另一个页面（例如 myproduct2.html ）等。这可能开始变得非常低效：当您访问数千个产品页面时会发生什么——你会在每个页面（基本的页面模板，结构等等）上重复很多代码，如果你想改变页面结构的任何东西，比如添加一个新的“相关产品”部分，必须单独更改每个页面。

注释: 当你有少量页面时，向每个用户发送相同的内容时，静态网站是最佳选择，然而随着页面数量的增加，它们的维护成本也会很高。

让我们回顾一下在上一篇文章中看到的静态网站架构图，看看它是如何工作的。

A simplified diagram of a static web server.

当用户想要导航到页面时，浏览器会发送一个指定HTML页面的URL的HTTP的GET请求。
服务器从它的文件系统中检索所请求的文档，并返回包含文档和HTTP响应状态码“200 OK”(表示成功)的HTTP响应。服务器可能会返回一个不同的状态码，例如，"404 Not Found"表明文件不在服务器上，或者"301 Moved Permanently"表明如果文件存在，则被重定向到另一个位置。

静态站点的服务器只需要处理 GET 请求，因为服务器不存储任何可修改的数据。它也不会根据HTTP请求数据（例如 URL 参数或 cookie）更改响应。

了解静态站点如何工作在学习服务器端编程时非常有用，因为动态站点以完全相同的方式处理对静态文件(CSS、JavaScript、静态图像等)的请求。

动态网站

动态站点可以根据特定的请求 URL 和数据生成和返回内容(而不是总是返回同一个URL的硬编码文件)。使用产品网页的示例，服务器将把产品“数据”存储在数据库中，而不是单独的HTML文件。当接收到一个产品的HTTP GET 请求时，服务器将确定产品 ID，从数据库中获取数据，然后通过将数据插入到HTML模板中来构造响应的HTML页面。与静态站点相比，这有很大的优势

通过使用数据库，可以有效地将产品信息存储在易于扩展、可修改和可搜索的方式中。

使用 HTML 模板可以很容易地改变HTML结构，因为这只需要在一个模板中的某一处地方完成，而不需要跨越数千个静态页面。

剖析动态请求

本节将逐步概述“动态” HTTP 请求和响应周期，以更详细的内容构建我们在上一篇文章中所看到的内容。为了“让事情保持真实”，我们将使用一个体育团队经理网站的情景，在这个网站上，教练可以用 HTML 表单选择他们的球队名称和球队规模，并为他们的下一场比赛中获得建议的“最佳阵容”。

下面的图表显示了“球队教练”网站的主要元素，以及当教练访问他们的“最佳团队”列表时，操作序列的编号。使其动态的站点的部分是 Web 应用程序（这就是我们将如何引用处理 HTTP 请求并返回 HTTP 响应的服务器端代码）数据库，该数据库包含关于球员、球队、教练及其关系以及HTML 模板的信息。

This is a diagram of a simple web server with step numbers for each of step of the client-server interaction.

在教练提交球员名单和球员人数后，其操作顺序为：

Web 浏览器使用资源的基本 URL（/best）来创建一个HTTP GET请求，将球队和球员编号附加到URL后面作为参数（例如 /best?team = my_team_name&show = 11）或作为URL地址的一部分（例如 /best/my_team_name/11/）。使用GET请求是因为请求只是获取数据（而不是修改数据）。
Web 服务器检测到请求是“动态的”，并将其转发给 Web 应用程序（Web Application）进行处理（ Web 服务器根据其配置中定义的模式匹配规则确定如何处理不同的 URL ）。
Web 应用程序（Web Application）确定请求的意图是根据 URL（/best/）获得“最佳团队列表”，并从 URL 中找出所需的球队名称和球员人数。然后，Web 应用程序（Web Application）从数据库中获取所需的信息（使用额外的“内部”参数来定义哪些球员是“最好”的，并且可能还从客户端 cookie 获得登录教练的身份）。
Web应用程序（Web Application）通过将数据（来自数据库）放入 HTML 模板中的占位符中动态地创建 HTML页面。
Web应用程序（Web Application）将生成的HTML（通过Web服务器）和HTTP状态代码200（“成功”）返回到Web浏览器。如果有任何东西阻止HTML被返回，那么Web应用程序将返回另一个状态代码 - 例如“404”来表示球队不存在。
然后，Web 浏览器将开始处理返回的 HTML ，发送单独的请求以获取其引用的任何其他 CSS 或 JavaScript 文件（请参阅步骤7）。
Web 服务器从文件系统加载静态文件，并直接返回到浏览器（同样，正确的文件处理基于配置规则和URL模式匹配）。

在服务器中，更新数据库中的记录的操作将被类似地与上述过程一样处理，但是更新数据库的这一类的操作，应该指定来自浏览器的HTTP请求为POST请求。

完成其他工作

Web 应用程序（Web Application）的工作是接收 HTTP 请求并返回 HTTP 响应。虽然与数据库交互以获取或更新信息是非常常见的功能，但是代码也可能同时做其他事情，甚至不与数据库交互。

一个 Web 应用程序（Web Application）可能执行的额外任务的一个很好的例子就是发送一封电子邮件给用户，以确认他们在网站上的注册。该网站也可能执行日志记录或其他操作。

返回HTML以外的内容

服务器端网站代码并非只能在响应中返回 HTML 代码片段/文件。它可以动态地创建和返回其他类型的文件（text，PDF，CSV 等）甚至是数据（JSON，XML等）。

将数据返回到 Web 浏览器以便它可以动态更新自己的内容（AJAX）的想法实现已经有相当长的一段时间了。最近，“单页面应用程序”已经变得流行起来，整个网站用一个 HTML 文件编写，在需要时动态更新。使用这种风格的应用程序创建的网站将大量的计算成本从服务器推向网络浏览器，并可能导致网站表现出更像本地应用程序（高度响应等）。