1。建立连接
Web 服务器和客户端通信的最常见方式是通过遵循 传输控制协议 或 TCP 的连接。基本上,当使用 TCP 时,客户端和服务器机器之间通过一系列来回检查建立连接。一旦连接建立并打开,就可以在客户端和服务器之间发送数据。这种连接也可以称为Session。
还有 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>
这里的第一行是Status Line,其中包括一个数字代码和一个简短的文本描述。 200 OK 显然意味着成功。例如,大多数人可能也熟悉404 Not Found。
第二行是Response Header Fields 的第一行。其他经常添加的字段包括date、Content-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 协议 是无状态协议 的一个示例。基本上,这意味着每对Request 和Response(如我们所描述的)都独立于其他请求和响应进行处理。因此,服务器不必跟踪当前需要关注的所有成千上万的用户。相反,它可以单独响应每个请求。
但是,有时我们希望服务器能记住我们。如果每次我想查看我的 Gmail 都因为服务器忘记了我而不得不重新登录,那该有多烦人?
为了解决这个问题,服务器可以发送 Cookies 以存储在客户端的机器上。服务器可以发送一个响应,告诉客户端存储一个 cookie 以及它应该包含什么。客户端的浏览器负责将这些 cookie 存储在客户端的系统上,因此这些 cookie 的位置将根据您的浏览器和操作系统而有所不同。重要的是要意识到这些只是存储在客户端机器上的小文件,实际上任何知道如何定位和理解它们的人都可以读写。可以想象,这会带来一些不同的潜在安全威胁。一种解决方案是加密存储在这些 cookie 中的数据,以便恶意用户无法利用您提供的信息。 (由于您的浏览器正在设置这些 cookie,因此您的浏览器中通常有一个设置,您可以对其进行修改以接受、拒绝或设置 cookie 的新位置。
这样,当客户端向服务器发出请求时,它可以将 Cookie 包含在 Request Header Fields 之一中,这将告诉服务器,“嘿,我是经过身份验证的用户,我的名字是 Bob,我是就在我的笔记本电脑死机之前,我正在写一篇非常引人入胜的博客文章,”或者,“我的购物车里挑选了 3 套设计师套装,但我仍然计划明天在你的网站上搜索第 4 套,”例如。
6。本地存储
HTML5 引入了 本地存储 作为 Cookie 的更安全替代方案。与 cookie 不同,具有本地存储的数据实际上并不发送到服务器。相反,浏览器本身会跟踪状态。
这种替代方案还允许存储大量数据,因为不需要在客户端和服务器之间通过互联网传递。
7。继续研究
这应该涵盖基础知识,并清楚地了解客户端和服务器之间发生的情况。关于这些要点还有很多要说的,您可以通过简单的 Google 搜索找到大量信息。