如何描述Web服务器和Web客户端之间的交互？

Question

目前我有以下了解（我想，是不完整甚至可能是错误的）。

一个web服务器接收来自客户端的请求。请求会发送到特定的“路径”（“地址”，“URL”），并具有特定的类型（GET，POST和可能还有其他类型？）。 GET和POST请求也可以带有变量及其值（可视为“字典”或“关联数组”）。 GET请求的参数设置在地址栏中（例如：http://example.com?x=1&y=2），而POST请求的参数由客户端（用户）通过Web表单设置（换句话说，用户填写表单并按“提交”按钮）。

除此之外，我们还有所谓的SESSION（也称为COOKIES）。其工作方式如下。当web服务器收到一个请求（GET或POST类型）时，它（web服务器）检查发送的参数值，并基于此生成并发送回到客户端HTML代码，在浏览器中显示（用户可以看到）。除此之外，web服务器还发送一些参数（这些参数也可以想象成“字典”或“关联数组”）。这些参数由浏览器保存在客户端的某个位置上，并且当客户端发送新的请求时，他/她也会将之前从web服务器接收到的会话参数发送回来。事实上，服务器说：你从我这里得到了这个，请记住它，下次与我交流时，把它还给我（这样我就能认出你）。

因此，我不知道客户端是否可以看到会话中的确切内容（有哪些参数以及它们具有什么值），以及客户端是否能够修改这些参数的值（或添加或删除参数）。但是用户可以决定不接受任何cookie（或会话）。

还有一种称为“本地存储”的东西（在HTML5中可用）。其工作方式如下。像SESSION一样，它是从Web服务器发送到客户端的一些信息，并且也被客户端记忆（保存）（如果客户端愿意的话）。与会话相反，它不会被客户端发送回服务器。相反，运行在客户端上的JavaScript（作为HTML代码的一部分由Web服务器发送）可以访问本地存储中的信息。

我仍然不明白的是如何使用AJAX。就像在浏览器中单击某些内容一样，用户通过浏览器发送请求到Web服务器并等待响应。然后浏览器接收到一些响应并使用它来修改（而不是替换）用户观察到的页面。我不明白的是浏览器如何知道如何使用来自Web服务器的响应。它是在HTML代码中写的吗（类似于：如果单击了这个，则向Web服务器发送这个请求，并使用其答案（提供的内容）来修改页面的这一部分）。

- Roman

---

浏览器可以使用许多不同的方式与服务器进行交互，甚至使用各种协议。你的问题似乎介于“不清楚”和“过于宽泛”之间，但我相信其中有一个具体的问题。最后一段是你想问的事情吗？ - Palec

Answer 1

我将回答你关于AJAX和LocalStorage的问题，同时也会以非常高的水平进行解释，因为你的定义给我留下了这样高的印象。

AJAX代表异步JavaScript和XML。您的浏览器使用一个名为XMLHTTPRequest的对象与远程资源建立HTTP请求。

作为客户端，它不知道远程服务器包含什么内容。它所要做的就是提供请求URL、方法和可选的请求有效载荷。有效载荷通常是由远程服务器接收的参数或一组参数。

请求对象有几个方法和属性，它也有处理响应的方法。

引用：

我不明白的是浏览器如何知道如何使用来自Web服务器的响应。

你只需告诉它如何处理响应即可。如上所述，请求对象还可以被告知如何处理响应。它将侦听响应，并在到达时告诉客户端如何处理它。

引用：

它（响应）是否在HTML代码中编写？

不是。响应是以服务器提供的任何方式编写的。最常见的是Unicode。服务响应的常见方式是JSON（JavaScript对象表示）对象。

之后发生的任何事情都是实现的纯粹问题。

LocalStorage 引用：

还有一种称为“本地存储”的东西（在HTML5中可用）。它的工作方式如下。像SESSION一样，它是由Web服务器发送到客户端的一些信息，并且也被客户端记忆（保存）（如果客户端希望）

不完全准确。本地存储确实是HTML5引入的新功能。它是在客户端中存储数据的一种新方法，并且对于源是唯一的。通过来源，我们指的是唯一的协议和域。

本地存储对象在客户端上的生命周期（再次，每个唯一的来源）完全取决于用户。也就是说，当然，客户端应用程序可以操纵数据并决定本地存储对象中的内容。您关于其存储并可通过JavaScript在客户端中使用的事实是正确的。

例如：某些网络跟踪工具希望有某种备份计划，以防远程收集用户数据的服务器由于某种原因无法访问。网络跟踪器（有时作为JavaScript插件引入）可以首先将任何事件写入本地存储，只有在远程服务器确认成功接收事件后才释放它，即使用户关闭了浏览器。

- Yuval Herziger

Answer 2

我将总结您的主要问题，并在下面简要回答：

Q1:

客户端能够看到会话中有什么内容吗？

A: 不行。客户端只知道“SessionID”，它是元数据（所有其他会话数据仅存储在服务器上，客户端无法查看或更改）。服务器使用SessionID仅用于标识客户端并将应用程序过程映射到其先前的状态。 HTTP是一种无状态协议，这种经典技术使其具有有状态性。 极少数情况下，完整的会话数据存储在客户端上（但在这种情况下，服务器还应加密会话数据，以使客户端无法查看/更改它）。 另一方面，有些Web客户端根本没有存储Cookie的功能，或者它们具有防止存储Cookie数据的功能（例如，用户拒绝来自域的Cookie的能力）。在这种情况下，解决方法是通过使用HTTP重定向将SessionID注入URL参数。

Q2:

HTML5 LocalStorage和Session之间有什么区别？

LocalStorage可以被视为客户端自己的“会话”数据，或者更好地说是一个本地数据存储库，客户端可以在其中保存/持久化数据。只有客户端（主要是从JavaScript）可以访问和更改数据。可以将其视为由JavaScript控制的持久存储（与Cookie相比，具有您可以控制存储什么数据、它的结构以及您想要存储的格式的优点）。与将数据存储到Cookie中相比，它也更有优势-因为Cookie有其自身的限制，例如数据大小和结构。

Q3:

AJAX是如何工作的？

简单地说，AJAX意味着在已加载（HTML）页面的顶部按需加载数据。典型的HTTP请求将加载整个页面的数据，而AJAX请求将加载并更新页面的一部分。 这样说来，AJAX请求与标准HTTP请求非常相似。 Ajax请求由javascript代码控制，它可以丰富页面之间的交互。您可以请求特定的数据段并更新页面的各个部分。

现在，如果我们记得早期的日子，任何与网站的交互（例如登录、导航到其他页面等）都需要完全重新加载页面吗？那时候，进行任何简单操作都会产生很多不必要的流量。这反过来影响了网站的响应性、用户体验、网络流量等。 这是由于当时的浏览器无法[1.]执行并行的HTTP请求到服务器和[b]呈现部分HTML视图。 现代浏览器具有这两个功能，可以启用AJAX技术-即调用异步（并行）HTTP请求（Ajax HTTP请求），它们还通过JavaScript提供实时的DOM更改机制（实时HTML文档对象模型操作）。

如果您需要有关这些主题的更多信息，或者如果有任何其他问题，敬请告知。

为了更深入地了解，我还建议阅读这篇关于Web历史的文章，因为它解释了一切是如何从创建HTML并定义（当时）丰富文档的目的开始的，然后HTTP最初是如何创建以及解决的问题（当时是“传输”静态HTML）。这就解释了为什么它是无状态协议。 随着HTML和WEB的发展，出现了其他需求（例如与最终用户交互的需要），然后Cookie机制通过使用会话Cookie改进了协议，从而实现了有状态的客户端-服务器通信。然后是Ajax。现在，Cookie也有自己的局限性，我们有了LocalStorage。我还提到过WebSockets吗？

- Andrei Mărcuţ

Answer 3

首先，这只是一个简单的解释，以澄清你的想法。要详细解释这个东西，我们需要写一本书。既然这样说了，我将一步步进行。

---

请求

请求是客户端向服务器请求/发送数据。
此请求包括以下部分：

• URL（协议+主机名/IP+路径）
• 方法（GET、POST、PUT、DELETE、PATCH等）
• 一些可选参数（发送方式取决于方法）
• 一些标头（向服务器发送的元数据）
• 一些可选cookie
• 一个可选SESSION ID

关于此的一些解释：

• cookie可以由客户端或服务器设置，但它们始终由客户端浏览器存储。因此，浏览器可以决定是否接受它们，删除或修改它们
• 会话存储在服务器中。服务器向客户端发送一个会话ID，以便能够在任何未来的请求中识别他。
• 会话和cookie是两件不同的事情。一个是服务器端的，另一个是客户端的。

---

AJAX

我会省略缩写的含义，因为你可以很容易地在谷歌上搜索到。

AJAX最棒的是它的第一个A，代表异步，这意味着JS引擎（在这种情况下内置于浏览器中）不会被阻塞，直到响应返回。

要了解AJAX的工作原理，您必须知道它与普通请求非常相似，但不同之处在于，它可以在不重新加载网页的情况下触发。

响应的内容可以是您想要的任何内容。从一些HTML代码到JSON字符串。甚至一些纯文本。

响应的处理方式取决于实现和编程。例如，您可以简单地alert() AJAX呼叫的结果，或将其附加到DOM元素上。

---

本地存储

这与任何事情无关。

本地存储只是浏览器提供的一些磁盘空间，以便您可以在浏览器中保存数据，即使页面或浏览器关闭也会持久存在。

一个例子

Chrome提供了一个JavaScript API来管理本地存储。它是客户端的，您可以以编程方式访问此存储并进行CRUD操作。它就像是浏览器中的非SQL非关系数据库。

- Joaquín O

Answer 4

1. 建立连接

Web服务器和客户端通信最常用的方式是通过遵循传输控制协议（TCP）的连接。基本上，使用TCP时，通过一系列来回检查在客户端和服务器机器之间建立连接。一旦连接建立并打开，数据就可以在客户端和服务器之间发送。这个连接也可以称为会话。

还有用户数据报协议（UDP），它具有稍微不同的通信方式和自己的一套优缺点。我相信最近一些浏览器可能已经开始使用两者的组合以获得最佳结果。

这里还有很多要说的，但除非你要编写浏览器（或成为黑客），否则这不应该超出基础知识的范围。

2. 发送数据包

一旦建立了客户端-服务器连接，数据包就可以在两者之间发送。 TCP数据包包含各种信息，以帮助两个端口之间的通信。对于Web程序员来说，数据包最重要的部分将是包含HTTP请求的部分。

HTTP（超文本传输协议）是另一种描述客户端-服务器通信构成/格式的协议。

从客户端发送到服务器的数据包的相关部分的最基本示例如下：

GET /index.html HTTP/1.1
Host: www.example.com

这里的第一行被称为响应行(Response line)。 GET描述了要使用的方法（其他方法包括POST、HEAD、PUT、DELETE等），/index.html描述了所请求的资源，最后，HTTP/1.11描述了正在使用的协议。

第二行在此情况下是请求中唯一的报头字段(header field)，并且在此情况下它是HOST字段，该字段是服务器IP地址的别名，由DNS提供。

[既然您提到了它，那么GET请求和POST请求之间的区别仅在于，在GET请求中，参数（例如表单数据）包含在响应行(Response Line)中，而在POST请求中，参数将包括在消息主体(Message Body)中（见下文）。]

3. 接收数据包

根据发送到服务器的请求，服务器会思考您请求了什么，并相应地进行响应（也就是您编程让它做的任何事情）。

以下是从服务器发送的响应数据包示例：

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
...

<html>
    <head>
        <title>A response from a server</title>
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

这里的第一行是“状态行”，它包括数字代码以及简短的文本描述。“200 OK”表示成功。“404 Not Found”也是大家可能熟悉的例子。

第二行是“响应头字段”的第一个。通常还会添加其他字段，例如日期(date)、内容长度(Content-Length)和其他有用的元数据。

在头部和必要的空行之后是可选的“消息主体”。当然，这通常是响应中最令人兴奋的部分，因为它包含了像 HTML 这样的内容，供我们的浏览器显示，还有 JSON 数据，或者基本上你可以在 return 语句中编码的任何东西。

基于这些，AJAX 是相当容易理解的。实际上，发送和接收的数据包看起来与非 AJAX 请求的数据包完全相同。

唯一的区别在于浏览器何时以及如何决定发送请求数据包。通常情况下，当页面刷新时，浏览器会向服务器发送请求。但是，在发出 AJAX 请求时，程序员只需告诉浏览器立即向服务器发送数据包，而不是在页面刷新时发送。

然而，鉴于 AJAX 请求的性质，消息主体通常不会包含整个 HTML 文档，而是请求更小、更具体的数据，例如从数据库中查询的数据。

随后，调用 Ajax 的 JavaScript 代码也可以根据响应做出相应的操作。由于 Ajax 调用只是另一个 JavaScript 函数，因此您可以使用任何 JavaScript 方法。因此，您可以使用 innerHTML 将一些 HTML 插入/替换页面上的内容，该内容是 Ajax 调用返回的结果。或者，您也可以做一些简单的 Ajax 调用，只需要返回真或假，然后可以通过 if else 语句调用某个 JavaScript 函数。希望您能看到 Ajax 与 HTML 本质上无关，它只是一个 JavaScript 函数，用于从服务器请求数据，并返回响应，无论响应是什么。

“HTTP 协议”是“无状态协议”的一个例子。基本上，这意味着每个请求和响应对（如我们所描述的）都是独立处理的，与其他请求和响应无关。因此，服务器不必跟踪所有正在等待服务的用户。相反，它可以逐个响应每个请求。

但是，有时我们希望服务器记住我们。如果每次我想查看 Gmail 邮件时都必须重新登录，那该有多烦人啊！

为了解决这个问题，服务器可以发送Cookies，以存储在客户端的设备上。服务器可以发送响应来告诉客户端存储Cookie并指定其内容。客户端的浏览器负责将这些Cookies存储在客户端的系统上，因此这些Cookies的位置会因浏览器和操作系统而异。然而，重要的是要认识到这些只是存储在客户端机器上的小文件，实际上任何知道如何查找和理解它们的人都可以读取和写入它们。正如您可以想象的那样，这会带来一些潜在的安全威胁。其中一个解决方法是加密存储在这些Cookies中的数据，以便恶意用户无法利用您提供的信息。（由于您的浏览器正在设置这些Cookies，所以通常有一个浏览器设置可以修改，用于接受、拒绝或为Cookies设置新位置。）

这种方式，当客户端向服务器发出请求时，可以在 请求头字段 之一中包含Cookie，告诉服务器：“嘿，我是经过身份验证的用户，我的名字是Bob，在我的笔记本电脑死机之前，我正在撰写一篇非常吸引人的博客文章，”或者，“我已经在我的购物车中挑选了3套设计师西装，但我还打算在您的网站上搜索第4套。”

6. 本地存储

HTML5引入了本地存储作为Cookie的更安全的替代方案。与Cookies不同，使用本地存储时数据实际上不会发送到服务器。相反，浏览器本身跟踪状态。

这种替代方案也允许存储更大量的数据，因为没有要在客户端和服务器之间通过Internet传递数据的要求。

7. 继续研究

这应该涵盖了基础知识，并清楚地说明了客户端和服务器之间正在发生什么。每个点都有更多可以说的内容，您可以通过简单的Google搜索找到大量信息。

- tam5