【JavaWeb开发的技术栈，HTTP协议和HTTP请求与响应数据的格式】

谁践踏了优雅 2024-03-30 12:54 76阅读 0赞

### HTTP ###

**知识点线缆：**

>  *  JavaWeb开发的技术栈
>  *  HTTP协议和HTTP请求与响应数据的格式

### 1，Web概述 ###

#### 1.1 Web和JavaWeb的概念 ####

Web是全球广域网，也称为万维网(www)，能够通过浏览器访问的网站。  
在我们日常的生活中，经常会使用浏览器去访问`百度`、`京东`、`传智官网`等这些网站，这些网站统称为Web网站。

我们知道了什么是Web，那么JavaWeb又是什么呢？顾名思义JavaWeb就是用Java技术来解决相关web互联网领域的技术栈。  
等学习完JavaWeb之后，同学们就可以使用Java语言开发我们上述所说的网站。而国内很多大型网站公司也是首选Java语言来解决web互联网相关的问题。那都有哪些公司的系统是使用Java语言的呢?

使用Java语言开发互联网系统是有很多技术栈需要大家了解，具体都有哪些呢?

#### 1.2 JavaWeb技术栈 ####

了解JavaWeb技术栈之前，有一个很重要的概念要介绍。

##### 1.2.1 B/S架构 #####

什么是B/S架构?  
B/S 架构：Browser/Server，浏览器/服务器 架构模式，它的特点是，客户端只需要浏览器，应用程序的逻辑和数据都存储在服务器端。浏览器只需要请求服务器，获取Web资源，服务器把Web资源发送给浏览器即可。大家可以通过下面这张图来回想下我们平常的上网过程:  
![在这里插入图片描述][e7dcc376371444af954cf7bf0cd3375c.png_pic_center]

*  打开浏览器访问百度首页，输入要搜索的内容，点击回车或百度一下，就可以获取和搜索相关的内容
 *  思考下搜索的内容并不在我们自己的点上，那么这些内容从何而来？答案很明显是从百度服务器返回给我们的
 *  日常百度的小细节，逢年过节百度的logo会更换不同的图片，服务端发生变化，客户端不需做任务事情就能获取最新内容
 *  所以说B/S架构的好处:易于维护升级：服务器端升级后，客户端无需任何部署就可以使用到新的版本。  
    了解了什么是B/S架构后，作为后台开发工程师的我们将来主要关注的是服务端的开发和维护工作。在服务端将来会放很多资源,都有哪些资源呢?

##### 1.2.2 静态资源 #####

*  静态资源主要包含HTML、CSS、JavaScript、图片等，主要负责页面的展示。
 *  我们之前已经学过前端网页制作`三剑客`(HTML+CSS+JavaScript),使用这些技术我们就可以制作出效果比较丰富的网页，将来展现给用户。但是由于做出来的这些内容都是静态的，这就会导致所有的人看到的内容将是一模一样。
 *  在日常上网的过程中，我们除了看到这些好看的页面以外，还会碰到很多动态内容，比如我们常见的百度登录效果:

`张三`登录以后在网页的右上角看到的是 `张三`，而`李四`登录以后看到的则是`李四`。所以不同的用户访问相同的资源看到的内容大多数是不一样的，要想实现这样的效果，光靠静态资源是无法实现的。

##### 1.2.3 动态资源 #####

*  动态资源主要包含Servlet、JSP等，主要用来负责逻辑处理。
 *  动态资源处理完逻辑后会把得到的结果交给静态资源来进行展示，动态资源和静态资源要结合一起使用。
 *  动态资源虽然可以处理逻辑，但是当用户来登录百度的时候，就需要输入`用户名`和`密码`,这个时候我们就又需要解决的一个问题是，用户在注册的时候填入的用户名和密码、以及我们经常会访问到一些数据列表的内容展示(如下图所示)，这些数据都存储在哪里?我们需要的时候又是从哪里来取呢?  
    ![在这里插入图片描述][dc98f6423974455aa0953af90c0a06eb.png_pic_center]

##### 1.2.4 数据库 #####

*  数据库主要负责存储数据。
 *  整个Web的访问过程就如下图所示:  
    ![在这里插入图片描述][e87f1f7424404ca6a955a28381c6bfa0.png_pic_center]

(1)浏览器发送一个请求到服务端，去请求所需要的相关资源;  
(2)资源分为动态资源和静态资源,动态资源可以是使用Java代码按照Servlet和JSP的规范编写的内容;  
(3)在Java代码可以进行业务处理也可以从数据库中读取数据;  
(4)拿到数据后，把数据交给HTML页面进行展示,再结合CSS和JavaScript使展示效果更好;  
(5)服务端将静态资源响应给浏览器;  
(6)浏览器将这些资源进行解析;  
(7)解析后将效果展示在浏览器，用户就可以看到最终的结果。  
在整个Web的访问过程中，会设计到很多技术，这些技术有已经学习过的，也有还未涉及到的内容，都有哪些还没有涉及到呢?

##### 1.2.5 HTTP协议 #####

*  HTTP协议:主要定义通信规则
 *  浏览器发送请求给服务器，服务器响应数据给浏览器，这整个过程都需要遵守一定的规则，之前大家学习过TCP、UDP，这些都属于规则，这里我们需要使用的是HTTP协议，这也是一种规则。

##### 1.2.6 Web服务器 #####

*  Web服务器:负责解析 HTTP 协议，解析请求数据，并发送响应数据
 *  浏览器按照HTTP协议发送请求和数据，后台就需要一个Web服务器软件来根据HTTP协议解析请求和数据，然后把处理结果再按照HTTP协议发送给浏览器
 *  Web服务器软件有很多，我们课程中将学习的是目前最为常用的Tomcat服务器

到这为止，关于JavaWeb中用到的技术栈我们就介绍完了，这里面就只有HTTP协议、Servlet、JSP以及Tomcat这些知识是没有学习过的，所以整个Web核心主要就是来学习这些技术。

#### 1.3 Web核心课程安排 ####

![在这里插入图片描述][6cf4cdc031fd4f64887c60832089eca8.png_pic_center]

整个Web核心，我们总共有六天的学习内容，分别是:

*  HTTP、Tomcat、Servlet
 *  Request(请求)、Response(响应)
 *  JSP、会话技术(Cookie、Session)
 *  Filter(过滤器)、Listener(监听器)
 *  Ajax、Vue、ElementUI
 *  综合案例

(1)Request是从客户端向服务端发出的请求对象，

(2)Response是从服务端响应给客户端的结果对象，

(3)JSP是动态网页技术,

(4)会话技术是用来存储客户端和服务端交互所产生的数据，

(5)过滤器是用来拦截客户端的请求,

(6)监听器是用来监听特定事件,

(7)Ajax、Vue、ElementUI都是属于前端技术

这些技术都该如何来使用，我们后面会一个个进行详细的讲解。接下来我们来学习下HTTP、Tomcat和Servlet。

### 2, HTTP ###

#### 2.1 简介 ####

**HTTP概念**

HyperText Transfer Protocol，超文本传输协议，规定了浏览器和服务器之间数据传输的规则。

*  数据传输的规则指的是请求数据和响应数据需要按照指定的格式进行传输。
 *  如果想知道具体的格式，可以打开浏览器，点击`F12`打开开发者工具，点击`Network`来查看某一次请求的请求数据和响应数据具体的格式内容，如下图所示:

![在这里插入图片描述][4e282a10c3a741c6a7f8850f51eed04b.png_pic_center]

> 注意:在浏览器中如果看不到上述内容，需要清除浏览器的浏览数据。chrome浏览器可以使用ctrl+shift+Del进行清除。

所以学习HTTP主要就是学习请求和响应数据的具体格式内容。

**HTTP协议特点**

HTTP协议有它自己的一些特点，分别是:

*  基于TCP协议: 面向连接，安全
    
    TCP是一种面向连接的(建立连接之前是需要经过三次握手)、可靠的、基于字节流的传输层通信协议，在数据传输方面更安全。
 *  基于请求-响应模型的:一次请求对应一次响应
    
    请求和响应是一一对应关系
 *  HTTP协议是无状态协议:对于事物处理没有记忆能力。每次请求-响应都是独立的
    
    无状态指的是客户端发送HTTP请求给服务端之后，服务端根据请求响应数据，响应完后，不会记录任何信息。这种特性有优点也有缺点，
    
     *  缺点:多次请求间不能共享数据
     *  优点:速度快
    
    请求之间无法共享数据会引发的问题，如:
    
     *  京东购物，`加入购物车`和`去购物车结算`是两次请求，
     *  HTTP协议的无状态特性，加入购物车请求响应结束后，并未记录加入购物车是何商品
     *  发起去购物车结算的请求后，因为无法获取哪些商品加入了购物车，会导致此次请求无法正确展示数据
    
    具体使用的时候，我们发现京东是可以正常展示数据的，原因是Java早已考虑到这个问题，并提出了使用`会话技术(Cookie、Session)`来解决这个问题。具体如何来做，我们后面会详细讲到。刚才提到HTTP协议是规定了请求和响应数据的格式，那具体的格式是什么呢?

#### 2.2 请求数据格式 ####

##### 2.2.1 格式介绍 #####

请求数据总共分为三部分内容，分别是请求行、请求头、请求体

![在这里插入图片描述][58501604f2c24cf5b4d199029245c494.png_pic_center]

*  请求行: HTTP请求中的第一行数据，请求行包含三块内容，分别是 GET\[请求方式\] /\[请求URL路径\] HTTP/1.1\[HTTP协议及版本\]
    
    请求方式有七种,最常用的是GET和POST
 *  请求头: 第二行开始，格式为key: value形式
    
    请求头中会包含若干个属性，常见的HTTP请求头有:
    
        Host: 表示请求的主机名
        User-Agent: 浏览器版本,例如Chrome浏览器的标识类似Mozilla/5.0 ...Chrome/79，IE浏览器的标识类似Mozilla/5.0 (Windows NT ...)like Gecko；
        Accept：表示浏览器能接收的资源类型，如text/*，image/*或者*/*表示所有；
        Accept-Language：表示浏览器偏好的语言，服务器可以据此返回不同语言的网页；
        Accept-Encoding：表示浏览器可以支持的压缩类型，例如gzip, deflate等。
    
    这些数据有什么用处?
    
    举例说明:服务端可以根据请求头中的内容来获取客户端的相关信息，有了这些信息服务端就可以处理不同的业务需求，比如:
    
     *  不同浏览器解析HTML和CSS标签的结果会有不一致，所以就会导致相同的代码在不同的浏览器会出现不同的效果
     *  服务端根据客户端请求头中的数据获取到客户端的浏览器类型，就可以根据不同的浏览器设置不同的代码来达到一致的效果
     *  这就是我们常说的浏览器兼容问题
 *  请求体: POST请求的最后一部分，存储请求参数

![在这里插入图片描述][72ab46f5c9704c2bb4f2d32a930c4ef6.png_pic_center]

如上图红线框的内容就是请求体的内容，请求体和请求头之间是有一个空行隔开。此时浏览器发送的是POST请求，为什么不能使用GET呢?这时就需要回顾GET和POST两个请求之间的区别了:

*  GET请求请求参数在请求行中，没有请求体，POST请求请求参数在请求体中
 *  GET请求请求参数大小有限制，POST没有

##### 2.2.2 实例演示 #####

把 `代码\http` 拷贝到IDEA的工作目录中，比如`D:\workspace\web`目录，

![在这里插入图片描述][5e0bb257f92947a0aa087f649d650ede.png_pic_center]

使用IDEA打开  
![在这里插入图片描述][2652fe14cea745ff881b59e95e82c447.png_pic_center]

打开后，可以点击项目中的`html\19-表单验证.html`，使用浏览器打开，通过修改页面中form表单的method属性来测试GET请求和POST请求的参数携带方式。

![在这里插入图片描述][864e2c31372b42f9a3dd629972b5105b.png_pic_center]

**小结**:

1.  请求数据中包含三部分内容，分别是请求行、请求头和请求体
2.  POST请求数据在请求体中，GET请求数据在请求行上

#### 2.3 响应数据格式 ####

##### 2.3.1 格式介绍 #####

响应数据总共分为三部分内容，分别是响应行、响应头、响应体

![在这里插入图片描述][8b010dcb094d405f96eab08021bd97f0.png_pic_center]

*  响应行：响应数据的第一行,响应行包含三块内容，分别是 HTTP/1.1\[HTTP协议及版本\] 200\[响应状态码\] ok\[状态码的描述\]
 *  响应头：第二行开始，格式为key：value形式
    
    响应头中会包含若干个属性，常见的HTTP响应头有:
    
        Content-Type：表示该响应内容的类型，例如text/html，image/jpeg；
        Content-Length：表示该响应内容的长度（字节数）；
        Content-Encoding：表示该响应压缩算法，例如gzip；
        Cache-Control：指示客户端应如何缓存，例如max-age=300表示可以最多缓存300秒
 *  响应体： 最后一部分。存放响应数据
    
    上图中…这部分内容就是响应体，它和响应头之间有一个空行隔开。

##### 2.3.2 响应状态码 #####

关于响应状态码，我们先主要认识三个状态码，其余的等后期用到了再去掌握:

*  200 ok 客户端请求成功
 *  404 Not Found 请求资源不存在
 *  500 Internal Server Error 服务端发生不可预期的错误

##### 2.3.3 自定义服务器 #####

在前面我们导入到IDEA中的http项目中，有一个Server.java类，这里面就是自定义的一个服务器代码，主要使用到的是`ServerSocket`和`Socket`

package com.itheima;
    
    import sun.misc.IOUtils;
    
    import java.io.*;
    import java.net.ServerSocket;
    import java.net.Socket;
    import java.nio.charset.StandardCharsets;
    import java.nio.file.Files;
    /*
        自定义服务器
     */
    public class Server {
        
        public static void main(String[] args) throws IOException {
        
            ServerSocket ss = new ServerSocket(8080); // 监听指定端口
            System.out.println("server is running...");
            while (true){
        
                Socket sock = ss.accept();
                System.out.println("connected from " + sock.getRemoteSocketAddress());
                Thread t = new Handler(sock);
                t.start();
            }
        }
    }
    
    class Handler extends Thread {
        
        Socket sock;
    
        public Handler(Socket sock) {
        
            this.sock = sock;
        }
    
        public void run() {
        
            try (InputStream input = this.sock.getInputStream()) {
        
                try (OutputStream output = this.sock.getOutputStream()) {
        
                    handle(input, output);
                }
            } catch (Exception e) {
        
                try {
        
                    this.sock.close();
                } catch (IOException ioe) {
        
                }
                System.out.println("client disconnected.");
            }
        }
    
        private void handle(InputStream input, OutputStream output) throws IOException {
        
            BufferedReader reader = new BufferedReader(new InputStreamReader(input, StandardCharsets.UTF_8));
            BufferedWriter writer = new BufferedWriter(new OutputStreamWriter(output, StandardCharsets.UTF_8));
            // 读取HTTP请求:
            boolean requestOk = false;
            String first = reader.readLine();
            if (first.startsWith("GET / HTTP/1.")) {
        
                requestOk = true;
            }
            for (;;) {
        
                String header = reader.readLine();
                if (header.isEmpty()) {
         // 读取到空行时, HTTP Header读取完毕
                    break;
                }
                System.out.println(header);
            }
            System.out.println(requestOk ? "Response OK" : "Response Error");
            if (!requestOk) {
        
                // 发送错误响应:
                writer.write("HTTP/1.0 404 Not Found\r\n");
                writer.write("Content-Length: 0\r\n");
                writer.write("\r\n");
                writer.flush();
            } else {
        
                // 发送成功响应:
    
                //读取html文件，转换为字符串
                BufferedReader br = new BufferedReader(new FileReader("http/html/a.html"));
                StringBuilder data = new StringBuilder();
                String line = null;
                while ((line = br.readLine()) != null){
        
                    data.append(line);
                }
                br.close();
                int length = data.toString().getBytes(StandardCharsets.UTF_8).length;
    
                writer.write("HTTP/1.1 200 OK\r\n");
                writer.write("Connection: keep-alive\r\n");
                writer.write("Content-Type: text/html\r\n");
                writer.write("Content-Length: " + length + "\r\n");
                writer.write("\r\n"); // 空行标识Header和Body的分隔
                writer.write(data.toString());
                writer.flush();
            }
        }
    }

上面代码，大家不需要自己写，主要通过上述代码，只需要大家了解到服务器可以使用java完成编写，是可以接受页面发送的请求和响应数据给前端浏览器的，真正用到的Web服务器，我们不会自己写，都是使用目前比较流行的web服务器，比如Tomcat

**小结**

1.  响应数据中包含三部分内容，分别是响应行、响应头和响应体
2.  掌握200，404，500这三个响应状态码所代表含义，分布是成功、所访问资源不存在和服务的错误

[e7dcc376371444af954cf7bf0cd3375c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/191a92b3ba2c4100bf3ea26e9f37992a.png
[dc98f6423974455aa0953af90c0a06eb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/b2a9978e89794580a2ff6956de19fd84.png
[e87f1f7424404ca6a955a28381c6bfa0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/b8eaa6c3fd544a9ca682898aed9b8191.png
[6cf4cdc031fd4f64887c60832089eca8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/5874482fb9de4748945879bbdcbb350f.png
[4e282a10c3a741c6a7f8850f51eed04b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/c3dbc2a559ef411d895a0eb1202fe612.png
[58501604f2c24cf5b4d199029245c494.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/873606fbf57d486eab2bcac453cef0d8.png
[72ab46f5c9704c2bb4f2d32a930c4ef6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/fe6598bf9ff640b1a2b5fcaf835c1dd7.png
[5e0bb257f92947a0aa087f649d650ede.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/1862bf8391874d539aaf3ceafa8d0641.png
[2652fe14cea745ff881b59e95e82c447.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/017db85dfd7c4ee4985ec6b74866c39b.png
[864e2c31372b42f9a3dd629972b5105b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/58eb63bf527b4dc2a354d2679216fe7d.png
[8b010dcb094d405f96eab08021bd97f0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/d67f33d8ec494c9e95d7efbd3e709213.png