【问题标题】:How to describe interaction between web server and web client?如何描述 Web 服务器和 Web 客户端之间的交互?
【发布时间】:2016-01-14 04:04:19
【问题描述】:

目前我有以下理解(我认为这是不完整的,甚至可能是错误的)。

Web 服务器接收来自客户端的请求。请求到达特定的“路径”(“地址”、“URL”)并具有特定的类型(GET、POST 和可能的其他内容?)。 GET 和 POST 请求也可以带有变量及其值(可以是“字典”或“关联数组”)。 GET 请求的参数设置在地址行(例如:http://example.com?x=1&y=2),而 POST 请求的参数由客户端(用户)通过 Web 表单设置(即用户填写表单并按“提交" 按钮)。

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

所以,我不知道客户端是否可以看到会话中的确切内容(那里有哪些参数以及它们具有哪些值)以及客户端是否能够修改这些参数的值(或添加或删除参数)。但是用户可以做什么,他/她可能决定不接受任何 cookie(或会话)。

还有一种叫做“本地存储”的东西(它在 HTML5 中可用)。它的工作原理如下。与 SESSION 一样,它是 Web 服务器发送给客户端的一些信息,并且也由客户端(如果客户端想要)存储(保存)。与会话相反,它不会由客户端发送回服务器。相反,在客户端运行的 JavaScript(并由 Web 服务器作为 HTML 代码的一部分发送)可以访问本地存储中的信息。

我仍然缺少的是 AJAX 是如何工作的。这就像通过单击浏览器中的某些内容,用户(通过浏览器)向网络服务器发送请求并等待响应。然后浏览器收到一些响应并使用它来修改(但不是替换)用户观察到的页面。我缺少的是浏览器如何知道如何使用来自网络服务器的响应。是否写在 HTML 代码中(类似于:如果单击,则将此请求发送到 Web 服务器,并使用其答案(提供的内容)来修改页面的这一部分)。

【问题讨论】:

  • 浏览器可以通过许多不同的方式与服务器交互,甚至使用各种协议。你的问题似乎介于“不清楚”和“太宽泛”之间,但我相信这背后有一个具体的问题。最后一段是你想问的吗?

标签: ajax http session cookies local-storage


【解决方案1】:

我将回答你关于 AJAXLocalStorage 的问题,同样是在非常高的层次上,因为你的定义在高层次上让我印象深刻。

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

作为客户端,客户端不知道远程服务器需要做什么。它所要做的就是为请求提供 URL、方法和可选的请求负载。负载通常是远程服务器接收到的一个参数或一组参数。

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

我缺少的是浏览器如何知道如何使用响应 来自网络服务器。

您只需告诉它如何处理响应。如上所述,请求对象也可以被告知如何处理响应。它会监听响应,当响应到达时,您告诉客户端如何处理它。

它(响应)是用 HTML 代码写的吗?

没有。响应写在服务器提供的任何内容中。最常见的是Unicode。提供响应的常用方法是 JSON(JavaScript 对象表示法)对象。

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

本地存储

还有一种叫做“本地存储”的东西(它在 HTML5)。它的工作原理如下。像 SESSION 一样,它是发送的一些信息 由网络服务器发送给客户端,并由客户端存储(保存) 客户(如果客户愿意)

不完全准确。 Local Storage 确实是 HTML5 引入的一项新功能。它是一种在客户端中存储数据的新方式,并且对来源而言是唯一的。通过起源,我们指的是一个独特的协议和一个域。

客户端上本地存储对象的生命周期(同样,每个唯一来源)完全取决于用户。也就是说,客户端应用程序当然可以操纵数据并决定本地存储对象中的内容。你是对的,它被存储并且可以通过 JavaScript 在客户端中使用。

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

【讨论】:

    【解决方案2】:

    首先,这只是一个简单的解释,以澄清你的想法。为了更详细地解释这些东西,我们需要写一本书。说了这么多,我一步一步来。


    请求

    请求是客户端向服务器请求/发送数据。
    该请求包含以下部分:

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

    对此的一些解释:

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

    AJAX

    我将省略首字母缩略词的含义,因为您可以轻松地用 Google 搜索它。

    AJAX 的伟大之处在于第一个 A,它代表 asynchronous,这意味着 JS 引擎(在这种情况下内置于浏览器中)在响应返回之前不会阻塞.

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

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

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


    本地存储

    这与任何事情都没有太大关系。

    本地存储只是浏览器提供的一些磁盘空间,因此即使页面或浏览器关闭,您也可以将数据保存在浏览器中。

    一个例子

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

    【讨论】:

      【解决方案3】:

      我将总结您的主要问题,并在其下方简要回答:

      第一季度:

      客户能否看到会话中的具体内容?

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

      第二季度:

      HTML5 LocalStorage 和 Session 有什么区别?

      LocalStorage 可以被视为客户端自己的“会话”数据,或者更好地说是客户端可以保存/持久化数据的本地数据存储。只有客户端(主要来自 javascript)可以访问和更改数据。将其视为 javascript 控制的持久存储(与 cookie 相比,您可以控制哪些数据、它的结构和您想要存储它的格式)。这也比将数据存储到 cookie 更有利 - cookie 有其自身的限制,例如数据大小和结构。

      第三季度:

      AJAX 是如何工作的?

      简单来说,AJAX 意味着在已经加载的 (HTML) 页面上加载按需数据。典型的 http 请求将加载页面的全部数据,而 ajax 请求将仅加载和更新(已加载的)页面的一部分。 话虽如此,AJAX 请求与标准 HTTP 请求非常相似。 Ajax 请求由 javascript 代码控制,它可以丰富与页面的交互。您可以请求特定的数据段并更新页面的部分。

      现在,如果我们还记得过去与网站的任何交互(例如登录、导航到其他页面等)都需要重新加载完整的页面吗?那时,发生了很多不必要的流量,只是为了执行任何简单的操作。这反过来又影响了站点响应能力、用户体验、网络流量等。 发生这种情况是因为浏览器(当时)无法 [a.] 向服务器执行并行 HTTP 请求并 [b] 呈现部分 HTML 视图。 现代浏览器具有这两个启用 AJAX 技术的功能 - 即调用异步(并行)HTTP 请求(Ajax HTTP 请求),它们还通过 javascript(实时 HTML 文档对象模型操作)提供动态 DOM 更改机制)。

      如果您需要有关这些主题的更多信息,或者还有什么我可以提供的帮助,请告诉我。

      为了更深入的了解,我还推荐this nice web history article,因为它解释了一切是如何从创建 HTML 开始的,它的目的是什么(定义 [当时] 丰富的文档),然后是 HTTP 最初是如何创建的以及它解决了什么问题(当时 - “转移”静态 HTML)。这就解释了为什么它是一个无状态协议。 后来,随着 HTML 和 WEB 的发展,出现了其他需求(例如与最终用户交互的需求)——然后 Cookie 机制增强了协议,以通过使用会话 cookie 实现有状态的客户端-服务器通信。然后阿贾克斯紧随其后。如今,cookie 也有其自身的局限性,我们有 LocalStorage。我是否也提到了 WebSockets?

      【讨论】:

        【解决方案4】:

        1。建立连接

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

        还有 UDP用户数据报协议,它的通信方式略有不同,并且各有优缺点。我相信最近一些浏览器可能已经开始使用这两者的组合以获得最佳效果。

        这里还有很多话要说,但除非您打算编写浏览器(或成为一名黑客),否则除了基础知识之外,您不必担心太多。

        2。发送数据包

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

        HTTP超文本传输​​协议是另一种协议,它描述了这些客户端-服务器通信的构成/格式。

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

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

        这里的第一行称为Response lineGET 描述要使用的方法,(其他包括 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>
        

        这里的第一行是Status Line,其中包括一个数字代码和一个简短的文本描述。 200 OK 显然意味着成功。例如,大多数人可能也熟悉404 Not Found

        第二行是Response Header Fields 的第一行。其他经常添加的字段包括dateContent-Length 和其他有用的元数据。

        在标题下方和必要的空行最后是(可选)Message Body。当然,这通常是响应中最令人兴奋的部分,因为它将包含诸如 HTML 之类的内容,供我们的浏览器为我们显示、JSON 数据,或者您可以在 return 语句中编码的几乎任何内容。

        4。 AJAX、异步 JavaScript 和 XML

        基于所有这些,AJAX 相当容易理解。事实上,发送和接收的数据包看起来可能与non-ajax 请求相同。

        唯一的区别是浏览器决定发送请求数据包的方式和时间。通常,在页面刷新时,浏览器会向服务器发送请求。但是,当发出 AJAX 请求时,程序员只是告诉浏览器请立即向服务器发送数据包,而不是在页面刷新时。

        但是,鉴于 AJAX 请求的性质,Message Body 通常不会包含整个 HTML 文档,而是会请求更小、更具体的数据位,例如来自数据库的查询。

        然后,调用 Ajax 的 JavaScript 也可以根据响应执行操作。任何 JavaScript 方法都可用,因为进行 Ajax 调用只是另一个 JavaScript 函数。因此,您可以执行诸如 innerHTML 之类的操作,以使用 Ajax 调用返回的一些 HTML 添加/替换页面上的内容。或者,你也可以做一个简单的 Ajax 调用,它应该返回 True 或 False,然后你可以使用 if else 语句调用一些 JavaScript 函数。正如您所希望看到的,Ajax 与 HTML 无关,它只是一个 JavaScript 函数,它从服务器发出请求并返回响应,无论它可能是什么。

        5。饼干

        HTTP 协议无状态协议 的一个示例。基本上,这意味着每对RequestResponse(如我们所描述的)都独立于其他请求和响应进行处理。因此,服务器不必跟踪当前需要关注的所有成千上万的用户。相反,它可以单独响应每个请求。

        但是,有时我们希望服务器能记住我们。如果每次我想查看我的 Gmail 都因为服务器忘记了我而不得不重新登录,那该有多烦人?

        为了解决这个问题,服务器可以发送 Cookies 以存储在客户端的机器上。服务器可以发送一个响应,告诉客户端存储一个 cookie 以及它应该包含什么。客户端的浏览器负责将这些 cookie 存储在客户端的系统上,因此这些 cookie 的位置将根据您的浏览器和操作系统而有所不同。重要的是要意识到这些只是存储在客户端机器上的小文件,实际上任何知道如何定位和理解它们的人都可以读写。可以想象,这会带来一些不同的潜在安全威胁。一种解决方案是加密存储在这些 cookie 中的数据,以便恶意用户无法利用您提供的信息。 (由于您的浏览器正在设置这些 cookie,因此您的浏览器中通常有一个设置,您可以对其进行修改以接受、拒绝或设置 cookie 的新位置。

        这样,当客户端向服务器发出请求时,它可以将 Cookie 包含在 Request Header Fields 之一中,这将告诉服务器,“嘿,我是经过身份验证的用户,我的名字是 Bob,我是就在我的笔记本电脑死机之前,我正在写一篇非常引人入胜的博客文章,”或者,“我的购物车里挑选了 3 套设计师套装,但我仍然计划明天在你的网站上搜索第 4 套,”例如。

        6。本地存储

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

        这种替代方案还允许存储大量数据,因为不需要在客户端和服务器之间通过互联网传递。

        7。继续研究

        这应该涵盖基础知识,并清楚地了解客户端和服务器之间发生的情况。关于这些要点还有很多要说的,您可以通过简单的 Google 搜索找到大量信息。

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2020-06-29
          • 2013-02-09
          • 1970-01-01
          • 1970-01-01
          • 2016-07-28
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多