From 3f07c7efeff67bc1cc7f7eba5f4a07c54f36e9bd Mon Sep 17 00:00:00 2001 From: govolokatliai Date: Mon, 28 Jul 2025 18:53:02 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=B0=8F=E7=BB=86=E8=8A=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- blog/Web的历史1️⃣-HTTP.md | 17 +++++++++++------ blog/Web的历史2️⃣-动态网页.md | 8 ++++---- blog/Web的历史3️⃣-Web应用.md | 2 +- 3 files changed, 16 insertions(+), 11 deletions(-) diff --git a/blog/Web的历史1️⃣-HTTP.md b/blog/Web的历史1️⃣-HTTP.md index 1a00546..0750087 100644 --- a/blog/Web的历史1️⃣-HTTP.md +++ b/blog/Web的历史1️⃣-HTTP.md @@ -10,7 +10,7 @@ 假如我们的电脑上有一个文件`example.docx`,放在我们电脑的文件夹`documents`里面，我们如何使用最原始的方法把它传递给另外一台电脑呢？ -早期的程序员编写了一类叫做"HTTP服务器"的程序，程序的功能是选择电脑上的一个文件夹，将这个文件夹暴露在互联网上共所有人操作。这个文件夹叫做HTTP服务的“根目录”。 +早期的程序员编写了一类叫做"HTTP服务器"的程序，程序的功能是选择电脑上的一个文件夹，将这个文件夹暴露在互联网上让所有人操作。这个文件夹叫做HTTP服务的“根目录”。 要使用这个程序，我们还要先给电脑分配一个IP地址，IP地址是一台电脑在互联网上的唯一标识，假如我们电脑的的IP地址是`123.45.67.89`。我们在这台电脑上启动一个HTTP服务程序。在程序的设置里指定根目录是我们存放文件的文件夹`documents`。 @@ -19,7 +19,7 @@ 假如`documents`文件夹下面还有另外一个文件`hi.txt`，那么当你在浏览器地址栏中输入`http://123.45.67.89/hi.txt`时，你就会发现浏览器显示了`hi.txt`这份文件的内容，因为浏览器可以直接显示`txt`文件，而不能直接显示`docx`文件。 ![IIS根目录](/img/blog/iis-changeroot-websoft9.png) -*IIS是Windows官方的HTTP服务器，有着图形化的配置界面，其它大部分HTTP服务器都需要通过命令行和配置文件进行配置。* +> *IIS是Windows官方的HTTP服务器，有着图形化的配置界面，其它大部分HTTP服务器都需要通过命令行和配置文件进行配置。* ## HTTP协议 @@ -31,14 +31,14 @@ HTTP协议，是`HyperText Transfer Protocol`的缩写，即"超文本传输协 我们刚才就是在我们的电脑上部署了HTTP服务端，而浏览器就是我们通信中的客户端。浏览器首先对服务器发送信息(行话叫做"请求")，要求获取某个文件；然后服务器返回这个文件(行话叫做“响应”)。 -一次完整的HTTP协议总是由客户端请求(Request)和服务端响应(Response)组成。在HTTP协议中，总是由客户端先发起一次HTTP请求，然后由服务端返回这次请求的响应，这样才是一次完整的HTTP通信。 +一次完整的HTTP通信总是由客户端请求(Request)和服务端响应(Response)组成。在HTTP协议中，总是由客户端先发起一次HTTP请求，然后由服务端返回这次请求的响应，这样才是一次完整的HTTP通信。 实际上，HTTP协议中的“客户端”不仅仅是指浏览器，但我们通常用的浏览器确实就是最常见的HTTP客户端。但其实像curl这样的命令行工具，或者手机APP，或者是浏览器里的JavaScript代码，当它们向服务器请求数据时，也可以被称作客户端。 ![HTTP请求示意图](/img/blog/basic_static_app_server.png) -实际上，HTTP协议不仅可以获取一个文件(就像我们所做的)，也可以向服务端上传一个文件，或是修改服务端目录下某个文件的内容... +实际上，HTTP协议不仅可以获取一个文件(就像我们所做的)，也可以向服务端上传一个文件，或是修改某个文件的内容... 一次HTTP通信要进行什么操作(获取or上传等)，由HTTP请求中的“方法”指定，方法是"请求头"的一部分。 @@ -72,6 +72,12 @@ HTTP方法定义了这个请求具体要对指定的文件做什么，其中： 我们日常使用浏览器，比如在地址栏中输入`baidu.com`,其实就是在对这个地址做GET请求，浏览器会把你的输入内容自动补全成 `GET http://www.baidu.com/` 这一HTTP请求 +:::tip 提示 + +打开浏览器的F12开发者菜单，选择"Network"，可以看到你在访问这个网站时与服务器所进行的所有HTTP请求 + +::: + 在浏览器地址栏里直接输入网址，默认就是发送GET请求。你可能会好奇，POST这些请求是怎么发出去的呢？这通常是由网页中的JavaScript代码在背后发送的。我们在之后的内容会讲到这一点。 @@ -85,8 +91,7 @@ HTTP方法定义了这个请求具体要对指定的文件做什么，其中： :::tip[提示] -浏览器虽然正常情况下没法做出GET外的请求，但是浏览器在控制台里是可以自定义请求的，以`Firefox`为例，在F12的`Network`一栏中点`New Request`(有一个加号)就可以发送自定义请求。`curl`等HTTP命令行工具也可以发送请求. - +正常地使用浏览器，是没法做出GET外的请求的，但是浏览器在控制台里可以自定义请求，以`Firefox`为例，在F12的`Network`一栏中点`New Request`(有一个加号)就可以发送自定义请求。`curl`等HTTP命令行工具也可以发送请求. ::: diff --git a/blog/Web的历史2️⃣-动态网页.md b/blog/Web的历史2️⃣-动态网页.md index 5faede5..bd4839f 100644 --- a/blog/Web的历史2️⃣-动态网页.md +++ b/blog/Web的历史2️⃣-动态网页.md @@ -57,7 +57,7 @@ SSI(Server Side Includes)就是满足这种需求的一个HTML宏语言。它有 没错，SSI的功能就是简单地把制定的内容插入进HTML里。这对一些重复的元素(例如每个网页的页头，页脚，侧边栏)还有一些需要更新的内容很实用。 -当然，SSI并没有解决动态网页的问题，它只是把需要手动更新的地方单独拿了出来，使维护静态网站更容易，所以程序员们又发明了CGI技术(其实SSI也可以嵌入CGI的)。 +当然，SSI并没有解决动态网页的问题，它只是把需要手动更新的地方单独拿了出来，使维护静态网站更容易，所以程序员们又发明了CGI技术。 ## CGI **CGI(Common Gateway Interface)** 是第一个真正实现动态网页的技术，它允许Web服务器执行外部程序来生成网页内容。 @@ -70,7 +70,7 @@ Web服务器通常会把能执行的程序(除开静态文件)放在一个叫cgi 脚本解析请求头中`city=中山&date=2025-06-25`这个参数，在数据库中查询这个日期的天气，然后返回一个HTML给HTTP服务程序，再把这个HTML返回给客户端。 -如果没有设置CGI,那么服务程序只会返回给客户端`TodayWeather.py`这个脚本文件的内容。 +如果没有设置CGI,那么服务程序只会返回给客户端`TodayWeather.py`这个脚本文件的代码本身。 其实，CGI是一个接口格式，它定义了我们编写程序与HTTP服务程序之间如何交互。通常，HTTP服务程序给CGI程序的输入就是环境变量，输出就是标准输出。 @@ -157,7 +157,7 @@ echo '' :::info[session和cookie] -在这段JSP代码中有一个对象叫做`session`，这是什么呢？实际上，因为HTTP是无状态的协议，意味着两次请求之间是完全独立的，一次请求不应该依赖另一次请求。这显得有点不灵活，于是人们会在HTTP的请求体上夹带一些额外的参数，用于表明用户的身份信息，比如在用户登录网站之后，服务器会给客户端一个密钥，下一次客户端请求页面是带上这个密钥，服务器就知道这是某个用户的请求。在这种模式下，服务器需要为每个用户维护信息，比如最简单地需要维护密钥是对应哪个用户的，这些信息就叫做session。 +在这段JSP代码中有一个对象叫做`session`，这是什么呢？实际上，因为HTTP是无状态的协议，意味着两次请求之间是完全独立的，一次请求不应该依赖另一次请求。这显得有点不灵活，于是人们会在HTTP的请求体上夹带一些额外的参数，用于表明用户的身份信息，比如在用户登录网站之后，服务器会给客户端一个密钥，下一次客户端请求页面时带上这个密钥，服务器就知道这是某个用户的请求。在这种模式下，服务器需要为每个用户维护信息，比如最简单地需要维护密钥是对应哪个用户的，这些信息就叫做session。 ::: @@ -198,7 +198,7 @@ echo ""; ### LAMP 这种动态网页的编写方法流行了很多年，形成了一个叫做"LAMP"的套路：Linux+Apache+MySQL+PHP;就是将电脑装上Linux系统，运行Apache这个HTTP服务端，使用PHP作为动态脚本语言,使用MySQL来存储和访问业务数据。 -需要注意的是，这四个都是开源免费的软件，LAMP的兴起，是开源软件运动的标志之一。开源软件使得部署网站的成本极大地降低，推动了互联网的繁荣。如果你想建站，那时候互联网上到处都是"LAMP一件安装脚本"之类的东西，现在也能搜到不少。一个下午就能上线一个完备的网站。这些技术的出现，使得开网站不再局限于大企业才能办得到的事情，一时间互联网上到处都是个人或者小单位的网站，甚至后来出现了诸如Wordpress之类的方案，不会写代码也能开网站。繁荣的生态，网页上丰富的动态内容，形成了被我们称为“Web 2.0”的时代。 +需要注意的是，这四个都是开源免费的软件，LAMP的兴起，是开源软件运动的标志之一。开源软件使得部署网站的成本极大地降低，推动了互联网的繁荣。如果你想建站，那时候互联网上到处都是"LAMP一键安装脚本"之类的东西，现在也能搜到不少。一个下午就能上线一个完备的网站。这些技术的出现，使得开网站不再局限于大企业才能办得到的事情，一时间互联网上到处都是个人或者小单位的网站，甚至后来出现了诸如Wordpress之类的方案，不会写代码也能开网站。繁荣的生态，网页上丰富的动态内容，形成了被我们称为“Web 2.0”的时代。 LAMP的一个典型反面是微软全家桶：Windows Server+IIS+SQL Server+ASP，这套技术方案需要给微软缴纳高额的授权费用，在当时基本上只限于追求稳定和售后服务的企业使用。我们的文章也没有怎么介绍这些技术。不过IIS对于个人用自己的电脑建站还是非常方便的。(当然国内没有公网IP那是另一回事了╮(￣▽￣)╭) diff --git a/blog/Web的历史3️⃣-Web应用.md b/blog/Web的历史3️⃣-Web应用.md index 1b81370..7e07df4 100644 --- a/blog/Web的历史3️⃣-Web应用.md +++ b/blog/Web的历史3️⃣-Web应用.md @@ -132,7 +132,7 @@ AJAX的核心在于"异步"，浏览器发送请求后，不会等待后端返 如果不使用AJAX技术，那么用户会发现在按下按钮后，网页会白屏刷新一段时间，过了几秒，返回了一个新页面，提示了报名状态信息。这样的应用虽然不是不能用，但是用户体验总是不如AJAX来的无缝，自然。性能也不好。 ### API驱动与前后端分离 -在上面那个例子里，浏览器并没有返回HTML，而是返回纯数据，交给前端渲染。既然浏览器自己就能根据数据渲染HTML，那么后端也就没必要返回成品HTML了。 +在上面那个例子里，服务器并没有返回HTML，而是返回纯数据，交给前端渲染。既然浏览器自己就能根据数据渲染HTML，那么后端也就没必要返回成品HTML了。 可以发现，这实际上就是把MVC架构中的"Views"部分推给了前端，后端只需要通过HTTP传递数据给前端JavaScript,前端JavaScript再渲染成HTML。后端返回纯数据，由前端渲染的模式称之为**前后端分离**；