完善Web后端教程-增加HTTP协议和AJAX例子

docs/devdocs/09-培训/02-Web后端/01-Web后端的简单介绍.md

@@ -5,12 +5,54 @@
 进行Web后端开发，首先需要知道Web的一些概念，实际上，“后端”这个概念不是一开始就存在的，随着人们对互联网需求的不断复杂化，后端的概念才出现了，我们首先来了解Web的发展历史
 
 ### 静态网页
-互联网最开始只有静态网页，所谓“静态”，指的是网页中的内容是完全固定的，在服务器端存储了内容固定的html,css，或者是其他的什么文件，用户访问网页，就是通过互联网查看这些固定的文件。在这种情况下，Web服务本质上更像是远程访问计算机上的某个文件夹，这种访问通过HTTP协议来进行。
+互联网最开始只有静态网页，所谓“静态”，指的是网页中的内容是完全固定的，在服务器端存储了内容固定的html,css，或者是其他的什么文件，用户访问网页，就是通过互联网查看这些固定的文件。在这种情况下，Web服务本质上更像是远程访问计算机上的某个文件夹.
 
 例如，如果要建立一个网站，那就在你的电脑上安装一个HTTP服务器（比如apache,nginx），在设置里指定`root`为你电脑上的某个文件夹，然后去买一个域名，把域名的DNS绑定到你电脑的IP地址上，那么其他人在浏览器上输入你的域名，就可以访问`root`文件夹下面的内容了。在下面放一个`index.html`,那浏览器就会默认显示这个文件的内容，在下面放一些图片，比如文件夹下面有：
 `$ROOT/foo.jpg`和`$ROOT/subfolder/bar.jpg`，那么别人在浏览器上面输入`http://yourdomain.com/foo.jpg`和`http://yourdomain.com/subfolder/bar.jpg`就可以访问到对应的文件。
 
-HTTP协议不仅可以获取一个文件，他也可以上传，删除一个服务器上面的文件，这通过所谓"HTTP方法"来进行，`GET`方法从服务器获得一个资源，我们在浏览器的地址栏输入一个地址时，就是在对这个URI做`GET`请求，前面的例子也是通过`GET`方法来进行的。
+这些访问都是通过HTTP协议来进行的，在这里，我们需要详细介绍HTTP协议，以及HTTP协议的方法：
+
+#### HTTP协议
+HTTP（HyperText Transfer Protocol，即超文本传输协议）是一个网络客户端（比如浏览器）和服务端之间沟通的协议，让浏览器可以对服务器上的某个文件进行操作（最常见，也是大家最熟悉的用途就是获取这个文件），我们上面举的例子，包括我们日常浏览网站，就是在获取服务器上面的内容(实际上HTTP协议可以做的不止这些，下面会讲到)
+
+一个完整的HTTP通信包含了请求和回应,请求有客户端发起，回应是服务端返回给客户端
+
+###### HTTP的请求
+严谨地说，一个HTTP请求包含请求头(HTTP Request Header)和请求体(Request Body)，一个HTTP的请求头主要包含了：
+- 目标网站:资源存在的网站，例如`example.org`
+- URL,用于指定需要操作的是哪一个文件，例如`example.org/hahaha.txt`
+- 方法，用于指定对URL指定的资源进行什么操作，比如访问这个文件
+- 自定义参数：前面说的URL和方法都是通过键值对的形式存在于请求头上的，作为请求头的参数（键值对就是形如`a=b`的表达式）你也可以自定义一些键值对在请求头里，这表现为附加在URL之后的一系列键值对，通过?开头，&分割，例如`example.org/hello.html?locale=zh-CN&custom=wuwuwu`,这就告诉服务器:两个参数：`locale=zh-CN,custom=wuwuwu`，这些参数是可选的，自定义的参数可以用于被后端解析，关于URL参数的话题我们在之后谈
+- cookie:cookie是服务器放在浏览器里的一些临时缓存，可以干一些事情，当然如果有的话也会上传的
+
+某些方法需要向服务器上传一些东西，请求体就是装载这些东西的
+
+
+##### HTTP方法
+HTTP方法定义了这个请求具体要对指定的文件做什么，其中：
+- GET:获取指定的资源
+- POST:上传指定的资源
+- PUT:更新指定的资源，如果没有就创建一个
+- PATCH:修改指定的资源
+- DELETE:删除指指定的资源
+- HEAD:和GET差不多，但是只要求服务器返回回应头，可以用在试探文件的大小上，来判断文件的更新情况，从而决定下一步操作
+
+我们日常使用浏览器，比如在地址栏中输入`baidu.com`,其实就是在对这个地址做GET请求，一般用户使用浏览器，自己是不能做出除了GET之外的请求的，但是其他请求在现代的网站中被经常使用，这其实是前端脚本在工作，以后会解释
+
+如果使用某一些方法的话，需要上传一些东西，那么这些东西就需要放在请求体里面，比如POST等
+
+##### HTTP的响应
+其实回应也分为回应头和回应体，回应头主要包含：
+- 状态码：针对请求的回应有对应的状态，比如，如果GET请求没有问题，成功返回的话就返回200 OK状态码，如果找不到请求里对应的文件就会返回`404 Not Found`
+- 内容格式:向浏览器说明回应体（若有）是什么格式的,文本文件的编码设置等，比如html文件？图片？这决定了浏览器如何对待这些文件
+- 内容的大小：返回所请求资源的大小（若有）
+
+回应体就是包含了回应的主体内容了，如果是GET请求的话，那么就回应了所GET文件的内容，如果是其他请求的话，可能也会没有回应体，具体看使用的方法
+
+##### 一个例子
+`GET`方法从服务器获得一个资源，我们在浏览器的地址栏输入一个地址时，就是在对这个URI做`GET`请求，前面的例子也是通过`GET`方法来进行的。
+
+比如，发送`GET developer.zsxyww.com/test/test.txt`,那么就会把我们服务器上的test.txt这个文件发过来
 
 `POST`方法向服务器上传一个资源，例如使用某个客户端发送`POST http://example.org/someprogram.exe`，在request body里面带上你的这个文件，那么`example.org`网站的根目录下就会多出一个叫做`someprogram.exe`的文件
 
@@ -22,13 +64,13 @@ httpbin.org 这个网站可以让你试验HTTP协议的方法
 
 :::
 
-不管使用的是什么方法，这些操作都在对一些固定静态的文件在操作，这些文件的内容是什么就是什么，不会变化，这样的网页就叫做静态网页。
+不管使用的是什么方法，HTTP协议传输的对象都是一些固定静态的文件，这些文件的内容是什么就是什么，不会变化，这样的网页就叫做静态网页。
 
 ### 动态网页
-这样的网页是不能满足大家对互联网的需求的，举例子来说：淘宝上有数不清的商品在售卖，如果淘宝为每一个商品都在服务器目录下面创建一个html文件，好让大家通过访问`http://taobao.com/someproduct.html`来查看商品信息，那这个工作量就非常大了，还有一些更重要的问题：作为服务器的管理员，你如何从商家那里获取他们要卖什么？如何通过网页来让顾客点击按钮就可以下单？
+这样的网页是不能满足大家对互联网的需求的，举例子来说：淘宝上有数不清的商品在售卖，如果淘宝为每一个商品都在服务器目录下面创建一个html文件，好让大家通过访问`http://taobao.com/someproduct.html`来查看商品信息，那这个工作量就非常大了，还有一些更重要的问题：这样的网页，基本上没有交互的功能，我们希望用户可以点击按钮就能购买商品，商家填写表单就能上传商品
 
 #### CGI
-这些都是静态互联网无法解决的问题，所以程序员们开发了一个叫CGI(Common Gateway Interface,通用网关接口)的技术，这种技术在用户请求网站的内容时，让一个脚本劫持用户的请求，返回给用户一个脚本动态生成的html文件，比如，如果用户想知道这台计算机目前的内存和硬盘占用情况，发送`GET http://example.org/status.html`，CGI程序发现给本机请求status.html这个文件，并且程序的代码里写了：如果是这个文件的话，就执行系统的相关操作，并将返回结果插入到一个模板html文件中。程序返回这个文件，于是，用户就受到了CGI程序动态产生的html.
+这些都是静态互联网无法解决的问题，所以程序员们开发了一个叫CGI(Common Gateway Interface,通用网关接口)的技术，这种技术在用户请求网站的内容时，让一个脚本劫持用户的请求，返回给用户一个脚本动态生成的html文件，比如，如果用户想知道报名数据库里面目前所有的报名人员，发送`GET http://example.org/allVolunteer.html`，CGI程序发现给本机请求`allVolunteer.html`这个文件，并且程序的代码里写了：如果接受到对`/allVolunteer.html`的请求，那就去查找数据库里面的全部报名人员，并将返回结果插入到一个模板html文件中。程序返回这个文件，于是，用户就受到了CGI程序动态产生的html.
 
 虽然CGI现在很少见了，但是将一个发送到服务器的地址请求劫持到脚本（函数）上是现代动态网站的常用思路。
 
@@ -36,14 +78,25 @@ httpbin.org 这个网站可以让你试验HTTP协议的方法
 除了服务器，浏览器也在为适配动态网站而更新。在1995年，网景公司的员工发明了一种编程语言，叫做"JavaScript",这是对当时新兴的Java和Java Applet的回应，这种语言最大的特点就是它被设计在浏览器中运行，并且可以调用相关接口来操作页面html，css内容和进行HTTP请求，他们让自己家的网景浏览器率先支持了这种编程语言(这个浏览器就是火狐浏览器的前身)，这极大的提高了浏览器对于动态网页的支持。
 
 #### AJAX(Asynchronous JavaScript and XML)
-尽管是在浏览器里的语言，但是作为一个完整编程语言的JavaScript还是非常强大的，在有了操作DOM,发起HTTP请求的能力后，JavaScript,搭配一些后端的程序，可以做到CGI传统动态页面没有办法做到的功能：动态更新用户html页面上的内容。传统的后端CGI,可以动态生成html,但是这个html生成之后到用户的手里还是不会变化的，而JavaScript,通过运行在用户浏览器,自行发起HTTP请求，在用户不关心的情况下，可以从后端获取一些内容，依据这些内容便可以部分改变用户浏览器所显示的HTML,CSS，只需要浏览器重新渲染一遍就行了，这种技术就叫做AJAX,Asynchronous JavaScript and XML
+尽管是在浏览器里的语言，但是作为一个完整编程语言的JavaScript还是非常强大的，在有了操作DOM,发起HTTP请求的能力后，JavaScript,搭配一些后端的程序，可以做到CGI传统动态页面没有办法做到的功能：动态更新用户html页面上的内容。传统的后端CGI,可以动态生成html,但是这个html生成之后到用户的手里还是不会变化的，而JavaScript作为一个编程语言,通过运行在用户浏览器,可以操作html内容和发起HTTP请求，便可以自己异步地对服务器发送一些请求，依据这些内容便可以部分改变用户浏览器所显示的HTML,CSS，只需要浏览器重新渲染一遍就行了，这种技术就叫做AJAX,Asynchronous JavaScript and XML
 
 AJAX与传统动态页面的不同点是：在获取新数据时，不是刷新全部的页面，而是让JavaScript操作页面的部分内容。同时，后端也不是返回html，而是返回一些可以被JavaScript理解的序列化数据（例如纯文本、XML,JSON等），前端的脚本根据这些数据，来操作用户的html
 
-这些后端路径不是给用户设计的，通过浏览器直接访问这些地方大概会返回一些用户难以读懂的代码，他们是给JavaScript,或者另一种程序设计的，这种路径就叫做web API，他们是两个程序通过HTTP交互的地方，而不是人机交互的界面
+##### 例子
+比如，在浏览我们的wiki网站时（虽然我们的wiki是静态网页），你会发现页面的大部分元素都是重叠的，比如页面最上面的导航栏，sidebar,页脚等，样式也是一样的，在切换不同的页面时，每次获取html都要重新获取这些重复的部分，这样就造成了一些浪费，如果使用AJAX技术，那么只需要第一次打开网站的时候加载这些框架性的元素，然后再加载一个JavaScript脚本，点击sidebar的时候，就将那个文章的内容本身拿过来，然后替换掉原有的页面内容，这样就更加节省，这种部分更新页面内容，而不重新加载整个页面的技术，就叫做AJAX
+
+再举一个例子,比如我们的报名系统有一个查询功能，如果输入的用户在数据库存在的话，返回这个用户的全部信息，如果不存在，那么要给用户显示一条错误信息，这种信息如果要单独给用户发送一个新页面的话，是很麻烦的，用户端的体验也不好，我们希望在按下查询按钮之后直接在原来的页面旁边显示服务器返回的结果，如果没有AJAX技术，那么我们只能把用户的当前页面重新发过去，但是把查询结果也放里面，因为传统没有JavaScript的网页没有办法对数据进行一些简单的操作，只是被动的渲染html.css文件，而AJAX技术就允许我们直接把返回的数据本身发送到客户端，而且发送的数据也不止局限于HTML,CSS,而可以是一个XML,JSON,或是直接返回状态码，让客户端脚本负责解析这些数据，并将这些数据变成浏览器其他部分可以直接渲染的文件
+
+当一个URL不是返回一个HTML数据，而是返回一些不是给用户本人准备的数据时，当这些路径不至于接受GET请求时，这些路径就和我们传统静态网站的URL代表一个文件时所表现的路径有所不同了
+
+这些后端路径不是给用户设计的，通过浏览器直接访问这些地方大概会返回一些用户难以读懂的代码，他们是给JavaScript,或者另一种程序设计的，这种路径就叫做web API，他们是两个程序通过HTTP交互的地方，而不是人机交互的界面，我们先举一个例子，再解释这个问题
+
+:::tip 提示
 
 AJAX技术在今天已经非常常用了，以至于很多人都意识不到他们在使用AJAX技术
 
+:::
+
 ##### 一个AJAX报名系统的例子
 下面举一个例子，来详细说明AJAX的工作原理：用户需要通过一个网页进行某项活动的报名，填写个人信息，然后点击网页上的提交按钮，服务端会返回报名的结果，成功还是失败，与传统的方法不同，服务器返回信息时不是重新返回一个HTML,而是让浏览器直接在原有的界面上（比如提交按钮的下面）显示报名的状态
 
@@ -51,12 +104,40 @@ AJAX技术在今天已经非常常用了，以至于很多人都意识不到他
 
 返回的html文件包括了提示框，要求用户输入姓名，手机，空闲时间等信息，在这些输入栏的最下面有一个提交按钮，当点击这个按钮时，脚本就会被激活，脚本执行的函数将读取用户从上面输入进来的内容，做一些简单的认证（比如说手机号的格式等），然后将这些信息组织成一个XML文件（当然,AJAX中的X就是XML咯，现在其实也可以用其他的方法序列化，比如JSON什么的），向服务器发送一个`POST`请求，地址是`http://example.org/api/submit/submit.php`,在请求体中包含刚才的XML文件。
 
-服务器在接收这个请求后，就会将，这个请求的上下文全部转交给`submit.php`这个脚本，脚本再做一些工作，录入数据库，如果一切都成功了，就向客户端发送回应成功，反之则回应失败的消息，回应的内容可以是一个纯文本，或者直接是状态码。
+服务器在接收这个请求后，就会将，这个请求的上下文全部转交给`submit.php`这个脚本，脚本再做一些工作，录入数据库，如果一切都成功了，就向客户端发送回应成功，反之则回应失败的消息，回应的内容可以是一个纯文本，或者直接是状态码，比如，就返回一个JSON:
 
-在JavaScript脚本接收到回应后，根据返回的内容，操作html文件的内容，在提交按钮的下面一行插入一个文本块：`<p>提交成功！</p>`或者其他的信息
+```JSON
+
+{
+    "status":"success",
+    "submit":{
+        "name":"小明",
+        "freeday":"2023-11-25",
+        "phone":10000000000
+    },
+    "createdAt":"2023-10-25_9:23:22"
+}
+
+```
+
+在JavaScript脚本接收到回应后，根据返回的内容，操作html文件的内容，在提交按钮的下面一行插入一个文本块：
+
+```HTML
+
+<div id="json_responses">
+    <p id="json:status">提交成功</p>
+    <p id="json:submit.name">姓名：小明</p>
+    <p id="json:submit.freeday">空闲时间：2023-11-25</p>
+    <p id="json:submit.phone">手机号：10000000000</p>
+    <p id="json:createdAt">服务端提交创建时间：2023-10-25 9:23:22</p>
+</div>
+
+```
+
+或者其他的信息
 
 #### URI在现代的意义
-从刚才的这个例子中，我们可以看到网站的URI,其实慢慢的不止可以指代一个文件了，他更多的是指代一个资源，或者一个业务,向`submit.php`提交一个`POST`请求，难道是在远端创建一个`submit.php`程序？其实在这里更多是指将客户端的数据上传到这个`/api/submit/submit.php`的业务窗口,我们的后端开发，也是建立在这种对虚拟的路径的请求下的。
+从刚才的这个例子中，我们可以看到网站的URI,其实慢慢的不止可以指代一个文件了，他更多的是指代一个资源，或者一个业务,向`submit.php`提交一个`POST`请求，难道是在远端创建一个`submit.php`程序？其实在这里更多是指将客户端的数据上传到这个`/api/submit/submit.php`的业务窗口,我们的后端开发，也是建立在这种对虚拟的路径的请求下的。例如我们设计一个报名系统，我们可以设计一个API接口叫做`POST http://api.yourwebsite.io/newVolunteer`,接受浏览器js的报名信息提交，在服务器，根本就没有`/newVolunteer`这个文件，连文件夹都不一定会有,全靠路由在工作（见下篇文章）
 
 ### Web应用
 #### WebSocket
@@ -72,18 +153,26 @@ WebSocket是一个全新的协议，支持客户端和服务器的全双工通
 
 :::
 
-##### Server-Sent Events
+##### Server-Sent Events(SSE)
 WebSocket是一个全新的协议，兼容性可能不是那么好，如果要求比较低的话，可以看一看Server-Sent Events,这个协议基于HTTP,允许服务器主动给客户端发送信息，当然也请自行了解。
 
 #### 在Web上运行应用
-传统观念里，一个应用程序是在计算机上直接运行的，但是在介绍了上面的技术之后，我们可以想到，在Web上也是可以运行应用程序的，通过现代的高性能JavaScript运行时，可以提供类似于原生的运行速度，通过WebSocket,可以快速的更新内容，现在的HTML和CSS也足够强大，用户的机器性能也越来越强了，而且，开发Web应用可以直接使用成熟的Web技术栈，在浏览器中运行也更安全，以至于现在很多本地的应用也开始使用Web技术了(electron)。现在流行的单页应用(Single Page Application)，后端基本上不参与渲染UI,只是为前端提供API接口，这些应用大多数都使用一些前端框架，例如`React.js`或者`Vue.js`，`Next.js`等，许多复杂的功能大多数使用前端完成，也减轻后端的压力，符合“边缘计算”的原则
+传统观念里，一个应用程序是在计算机上直接运行的，但是在介绍了上面的技术之后，我们可以想到，在Web上也是可以运行应用程序的，通过现代的高性能JavaScript运行时，可以提供类似于原生的运行速度，通过WebSocket,可以快速的更新内容，现在的HTML和CSS也足够强大，用户的机器性能也越来越强了，而且，开发Web应用可以直接使用成熟的Web技术栈，在浏览器中运行也更安全，以至于现在很多本地的应用也开始使用Web技术了(electron)。
 
 例如，我们所使用的腾讯文档，支持多人协作编辑，就使用了WebSocket技术来向你主动发送其他人对文档编辑的信息
 
+#### 单页应用(SPA)
+一个现代的网站，或者说一个提供服务的Web应用，流行单页应用架构，顾名思义，服务器只会在用户打开网页时加载一段html文件，后面的全部内容都是通过js动态更新的，js和服务器的后端接口交互主要是采用AJAX,对于某些复杂的需求，可能会需要使用前面的技术，WebSocket或者SSE
+
+`React.js`就是贯彻单页应用思想最彻底的前端框架,单页应用的坏处就是打破了为静态网页文件设计的“收藏”功能和前进后退，也不利于SEO和无障碍，因为用户在网站上只打开一个网页，网页的内容根据用户操作由浏览器脚本动态更新，而生成的html也大多没有做语义化优化，难以被理解和解析
+
+SPA的例子就是邮箱应用（比如Gmail）,通过浏览器访问你的邮箱，通过邮箱的主页面点某个邮件，你并没有进入一个新的页面，而是在原有的页面上，内容变成了邮件查看的界面，如果在主页面上点击发件的话，同样也没有一个发件页面，而是直接呈现发件的UI
+
+有时候，通过AJAX调用API的HTTP交互没办法满足一些需求，比如说服务器主动推送信息，或者流式传输（比如直播平台，游戏等），这个时候就需要使用前面提到的技术，前面的腾讯文档就是一个例子，还有就是网络聊天室（matrix之类），需要向浏览器主动推送信息，还有直播平台，需要将源源不断的多媒体数据传递到用户那里，还有网络游戏需要快速在浏览器和服务器之间交换游戏数据，但是一般这些应用的基础框架都是建立在传统AJAX上的，只是业务部分采用其他协议实现，这些现代的应用慢慢地将计算量转移到了前端，而后端只负责存储和提供，查询数据，甚至后端都不用负责产生html,只需要提供API,来为前端提供数据就行
 
 
 ##### WebAssembly
-WebAssembly是最近新出现的技术，他允许开发者将C/C++ , Rust等原本的一些编译型语言编译成浏览器可以执行的字节码，使得在浏览器中也可以执行这些程序，目前也有一些使用WebAssembly的应用，可以去看看
+WebAssembly是最近新出现的技术，他允许开发者将C/C++ , Rust等原本的一些编译型语言编译成浏览器可以执行的字节码，使得在浏览器中也可以执行这些程序，目前也有一些使用WebAssembly的应用，可以去看看，最大的好处就是不会JavaScript也能开发前端，也可以复用以前的代码（当然，这个其实是前端的内容）
 
 ## Web后端-是干什么的？
 前面用非常长的一段文字来介绍Web的发展历史，就是为了说明Web后端是干什么的，或者说，编写一个Web后端需要干什么？
@@ -103,7 +192,19 @@ WebAssembly是最近新出现的技术，他允许开发者将C/C++ , Rust等原
 
 详细的信息，请阅读下一篇文章：[Click Me](./基于HTTP的Web后端的组成)
 
+:::tip 提示
+
+读完这篇文章之后，你可以回顾文章里的内容，问一问自己：
+
+- Web经历了哪些发展阶段？
+- 前后端之间是如何使用HTTP协议交互的？
+- AJAX技术是什么？是如何支撑起现代的网页的？(单页应用)
+
+推荐在看下一篇文章之前看看下面的参考文章
+
+:::
+
 ## 参考
-在读完这篇文章后，你可以去详细阅读这篇文档：https://developer.mozilla.org/zh-CN/docs/Learn/Server-side/First_steps/Introduction
+在读完这篇文章后，你可以去详细阅读这篇文档：https://developer.mozilla.org/zh-CN/docs/Learn/Server-side/First_steps/Introduction (**强烈推荐！**)
 
 这里是关于HTTP协议的详细介绍：https://developer.mozilla.org/zh-CN/docs/Web/HTTP