Web基础Web基础 Web基本概述关于系统架构系统架构包括形式 C/S架构 Client / Server (客户

Web基本概述

关于系统架构

系统架构包括形式

C/S架构
- Client / Server (客户端 / 服务端)
- C/S架构软件或者系统有哪些?
  - QQ (去腾讯官网将安装包下载到本地, 然后安装就可以使用)
- C/S架构特点 : 需要安装特定的客户端软件
- C/S架构的系统优点和缺点 :
  - 优点 :
    - 速度快(大量数据都放在本地中 , 服务器只需要传输少量数据)
    - 服务器压力小
    - ......
  - 缺点 :
    - 升级维护比较麻烦 (版本迭代时, 每一个客户端都需要升级. 且有些软件不易安装, 比如银行项目)
B/S架构
- Browser/ Server (浏览器 / 服务端)
- B/S架构的系统优点和缺点 :
  - 优点 :
    - 升级维护方便, 成本比较低. (只需要升级服务器端即可)
    - 不需要安装特定的客户端软件, 只需要浏览器输入网址即可
    - ......
  - 缺点 :
    - 速度慢 (所有的数据都在服务器中, 用户每一个请求都需要服务器传输所有需要的响应数据)

B/S架构通信原理

Ajax

概述
Ajax（Asynchronous JavaScript and XML）是一个技术概念 (比如数据库的技术概念 ,这是一种思想)，它描述了通过 JavaScript 在不刷新页面的情况下与服务器进行交互的方式。最早时，Ajax 是通过 XMLHttpRequest 对象来实现的。
作用
- 与服务器进行数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
- 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。
同步与异步
- 同步操作：
  - 你向一个服务器请求数据。在等待数据返回之前，其他操作（如页面渲染、用户交互）都不能进行。这个过程是阻塞的，用户界面可能会卡住，直到数据返回。
- 异步操作：
  - 你向服务器请求数据，请求发出后，程序继续执行其他任务（比如继续渲染页面、处理用户输入等），等到数据返回后再处理。这种方式不阻塞其他操作，用户界面可以流畅响应。

Axios

概述
- Axios 是一个现代的 JavaScript 库，它封装了 XMLHttpRequest 或者 fetch API，简化了异步请求的过程。Axios 本质上是使用了 Ajax 技术，但提供了更简洁、易用的接口，并且内置了很多现代化的特性（例如：Promise 支持、请求拦截器、响应拦截器、JSON 自动解析等）。
与Ajax的关系
- Axios 是基于 Ajax 技术的封装：Axios 背后依然是使用 Ajax 技术来发送 HTTP 请求。也就是说，Axios 内部实现了对 Ajax 的封装，但提供了更高层次的 API，使得发送请求、处理响应和错误更加容易。
代码示例

<body>
    <input type="button" value="获取数据GET" id="btnGet">

    <input type="button" value="获取数据POST" id="btnPost">

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        document.querySelector('#btnGet').addEventListener('click', () => {
            axios.get('https://mock.apifox.cn/m1/3083103-0-default/emps/list').then((result) => {
                console.log(result.data.data);
            });
        })

        document.querySelector('#btnPost').addEventListener('click', () => {
            axios.post('https://mock.apifox.cn/m1/3083103-0-default/emps/update').then((result) => {
                console.log(result.data);
            }).catch((err) => {
                //错误数据
                console.log(err);
                
            });
        })
    </script>
</body>

HTTP协议

概述
- HTTP 协议 是一个基于 TCP/IP 协议之上的应用层协议，负责规范化通信内容的格式
作用
- 在建立连接后，将请求内容封装为标准的请求格式，然后通过已经建立的 TCP 连接将这些数据发送给服务器
标准的请求格式

Ajax与HTTP协议的配合

流程
1. 创建 XMLHttpRequest 对象 在 JavaScript 中，Ajax 通常使用 XMLHttpRequest 对象（或现代浏览器中的 fetch API）来与服务器进行通信。这个对象负责发起 HTTP 请求并接收响应。
2. 发起 HTTP 请求 当某些事件触发时（如按钮点击、页面加载等），Ajax 会使用 XMLHttpRequest 对象发起一个 HTTP 请求。这可以是：
  - GET 请求：从服务器获取数据。
  - POST 请求：向服务器发送数据。
  - 其他 HTTP 方法：如 PUT、DELETE、PATCH 等。
3. 异步请求 Ajax 的最大特点是请求是异步的，这意味着 JavaScript 不需要等待 HTTP 请求完成就继续执行后续代码。这样，页面的其余部分可以继续运行，不会被 HTTP 请求阻塞。Ajax 会在后台完成数据的传输，直到服务器响应。
4. 接收响应数据 当服务器返回响应时，XMLHttpRequest 对象会接收到数据。响应的数据可以是 JSON、XML、纯文本或 HTML。通过事件监听或回调函数，Ajax 会在接收到响应后执行相应的处理逻辑（例如，更新页面内容）。
5. 更新页面内容 根据服务器返回的数据，Ajax 会修改页面上的 DOM 元素，使得页面内容动态更新，而无需重新加载整个页面。
注: Ajax是 JS 调用HTTP请求 (发送 HTTP 请求会自动建立 TCP 连接) ,通常是在已有页面的上下文中发起的 (比如点击按钮、滚动页面等事件触发的请求)。如此, 所以，如果在浏览器地址栏输入路径，就不是 Ajax 请求了，而是一个普通的 HTTP 请求。
总结来说，Ajax 和 HTTP 配合的核心是：使用 JavaScript 创建 HTTP 请求，通过 Ajax 异步处理这些请求，并且在接收到响应时更新页面内容，从而实现无刷新数据更新的效果。

关于WEB服务器软件

WEB服务器和应用服务器的关系

应用服务器实现了JavaEE中的所有规范 (JavaEE有13个不同的规范)
WEB服务器只实现了JavaEE中的Servlet + JSP两个核心的规范
所以, 应用服务器包含WEB服务器

Tomcat WEB服务器

概述与特点

tomcat是一个开源免费的轻量级WEB服务器
tomcat使 Java 语言开发的, 所以tomcat服务器想要运行, 必须要 jre (Java运行时环境)

Tomcat启动原理

执行startup.bat文件, 实际是执行 "%CATALINA_HOME%\bin\catalina.bat" 文件
catalina.bat :
- ```
        //这个类就是main方法所在的类,tomcat是Java语言编写的, 启动tomcat就是执行main方法
        set MAINCLASS=org.apache.catalina.startup.Bootstrap  
```
- 执行启动main方法需要 JRE 运行时环境, catalina.bat中通过环境变量 JAVA_HOME 进行寻找, 所以配置 JDK 环境变量需要使用 JAVA_HOME 进行配置, 不然 tomcat 无法运行
tomcat目录
- bin : tomcat服务器的命令文件存放目录, 例: 启动tomcat服务器等
- conf : 存放tomcat服务器的配置文件目录, 例: server.xml文件配置端口号
- lib : tomcat的核心程序目录
- logs : tomcat的日志目录
- temp : tomcat的临时目录, 存储临时文件
- webapps : 存放大量的webapp (web应用, 一个目录就是一个web应用)
- work : 存放JSP文件翻译之后的Java文件以及编译之后的class文件

Servlet

Servlet规范

作用

遵循Servlet规范的webapp,这个webapp就可以放在不同的WEB服务器中运行。(因为这个webapp是遵循Servlet规范的。)

内容

第一步: 在webapps目录下新建一个目录,起名crm(这个crm就是webapp的名字)。当然,也可以是其它项目,比如银行项目,可以创建一个目录bank,办公系统可以创建一个oa。
- 注意: crm就是这个webapp的根
在webapp的根下新建一个目录:WEB-INF
- 注意: 这个目录的名字是Servlet规范中规定的,必须全部大写,必须一模一样
第三步: 在WEB-INF目录下新建一个目录:classes
- 注意: 这个目录的名字必须是全部小写的classes。这也是Servlet规范中规定的。另外这个目录下一定存放的是Java程序编译之后的class文件(这里存放的是字节码文件)。
第四步: 在WEB-INF目录下新建一个目录:lib
- 注意: 这个目录不是必须的。但如果一个webapp需要第三方的jar包的话,这个jar包要放到这个lib目录下,这个目录的名字也不能随意编写,必须是全部小写的lib。例如java语言连接数据库需要数据库的驱动jar包。那么这个jar包就一定要放到lib目录下。这Servlet规范中规定的。
第五步: 在WEB-INF目录下新建一个文件:web.xml
- 注意: 这个文件是必须的,这个文件名必须叫做web.xml。这个文件必须放在这里。一个合法的webapp,web.xml文件是必须的,这个web.xml文件就是一个配置文件,在这个配置文件中描述了请求路径和Servlet类之间的对照关系。
第六步: 编写一个Java小程序, 这个小程序也不能随意开发, 这个小程序必须实现Servlet接口
- 这个Servlet接口不在 JDK 当中 (因为Servlet 不是JavaSE了, Servlet是JavaEE 规范中的一员, 是另外一套类库)
- Tomcat服务器实现类Servlet规范, 所以Tomcat服务器也需要使用Servlet接口. 即Servlet接口在Tomcat中
总结 : 总结: Servlet规范不仅仅只是一个接口, 配置文件的文件名, 文件存放路径也是Servlet规范规定的. 所以 JavaEE , Tomcat 等都需要遵守Servlet规范, 如此才可以实现解耦, 才可以使一个web项目可以在各个web服务器中运行
模拟Tomcat遵守Servlet规范

/**
 * 模拟Tomcat服务器
 */
public class Tomcat {
    public static void main(String[] args) throws Exception {
        System.out.println("Tomcat服务器启动了...");

        while (true) {
            /*读取配置文件 注:配置文件的文件名, 文件存放路劲也是Servlet规范规定的
            /aaa=com.liny.myservlet.app.BankServlet
			/bbb=com.liny.myservlet.app.LoginServlet
			/ccc=com.liny.myservlet.app.UserListServlet
            */
            Properties properties = new Properties();
            FileInputStream reader = new FileInputStream("D:\\Develop\\java_web\\javaWeb-codes\\Servlet\\web.properties");
            properties.load(reader);


            //浏览器发送请求
            String path = Browser.request();

            //根据键找值(Properties 是一个Map集合, key就是path)
            String objPath = properties.getProperty(path);

            //根据反射, 使用全类名获取到对象
            Object object = Class.forName(objPath).newInstance();

            //Servlet规范
            MyServlet servlet = (MyServlet) object;
            servlet.service();
        }
    }
}

Servlet接口体系

Servlet接口体系继承结构

Servlet接口 : 核心接口, 当客户端发送消息后, Tomcat根据配置文件, 创建Servlet实现类对象, 然后调用Servlet接口中的方法进行处理请求, 调用的过程中, 会Tomcat会依次创建其他Servlet规范中的其他接口.
- GenericServlet实现类 : Servlet接口与ServletConfig接口的实现类, 主要使用适配器设计模式对父类接口进行改造
  - HttpServlet实现类 : 在http包中, 专门处理http请求的, 可以根据请求方式进行对应方法处理, 405错误的源头
ServletConfig接口 : Servlet 对象的专属配置 , 每个 Servlet对象都有自己的 ServletConfig 对象，用于管理独立的初始化信息。
- GenericServlet实现类
  - HttpServlet实现类
ServletContext接口 : 全局配置管理用于获取 web.xml 中配置的全局初始化参数。
ServletRequest接口 : ServletRequest 用于封装客户端请求，提供访问请求参数、内容和客户端信息的能力。适用于所有类型的协议（不仅限于 HTTP），比如 HTTP 或 FTP 请求。
- HttpServletRequest接口 : 专门用于封装客户端发来的 HTTP 请求，将HTTP 请求封装为对象, 后续可以通过对象中的各个方法获取请求中的参数, 比如getMethod() : 获取请求方式
ServletResponse接口 :
- HttpServletResponse接口 : 同上

Servlet对象的生命周期

Servlet对象是由谁维护的?
- Servlet对象的创建, 对象中方法的调用, 对象最终的销毁, Javaweb程序员是无权干预的
- Servlet对象的生命周期是由Tomcat服务器 (WEB容器) 全权负责的 , WEB容器统一管理Servlet对象
- WEB容器只管理配置文件中的Servlet对象.
  - Tomcat服务器读取web.xml 配置文件后, 将路径与 Servlet对象全类名使用HashMap集合中存储起来, 当浏览器发起请求后, Tomcat服务器根据集合中的键 (路径) 去获取到对应 Servlet对象全类名 . 然后根据反射创建出实现类, 再使用Servlet接口 (接口规范的体现) 作为实现类的引用 (多态的体现)
Servlet对象的生命周期
- 服务器在启动时, Servlet对象没有被创建. (默认情况)
  - 当服务器启动时, 只是读取配置文件, 将路径与 Servlet对象全类名映射
- 当浏览器发起请求后, Servlet对象才被创建 (只创建一次)
  - 作用: 懒汉式的思想
  - Servlet对象只会被WEB容器创建一次, 属于伪单例. (因为单例模式的构造器是被私有的, Servlet对象对象由WEB容器管理, WEB容器只创建一次对象, 造成单例的假象, 而不是创建多次指向同一个对象)
- 当destroy()方法执行结束后, Servlet对象才会被WEB容器释放

HttpServlet源码分析

处理流程
1. 请求到达：
  - 当客户端发送一个HTTP请求到服务器时，Web容器（如Tomcat）接收该请求。
2. 创建HttpServletRequest和HttpServletResponse对象：
  - Web容器解析HTTP请求，并创建HttpServletRequest对象来封装请求数据（如请求行、请求头、请求体等）。
  - 同时，Web容器也创建HttpServletResponse对象，用于构建和发送响应给客户端。
3. 选择合适的Servlet：
  - Web容器根据URL映射规则确定应该由哪个Servlet来处理这个请求。
4. 调用service()方法：
  - 一旦选择了合适的Servlet，Web容器会调用该Servlet的service()方法，并将HttpServletRequest和HttpServletResponse对象作为参数传递给它。
  - service()方法是Servlet的核心方法，负责处理客户端的请求并生成响应。对于HttpServlet，service()方法会根据HTTP请求的方法（如GET、POST等）自动调用相应的doGet()、doPost()等方法。
总结
- HttpServletRequest和HttpServletResponse对象的创建：这些对象是由Web容器在接收到HTTP请求后创建的，然后传递给Servlet的service()方法。
- service()方法的调用：Web容器在创建好请求和响应对象之后，调用Servlet的service()方法，并将这两个对象作为参数传递进去。
- 具体的处理逻辑：service()方法内部会根据请求的HTTP方法调用相应的doGet()、doPost()等方法，从而执行具体的业务逻辑。
- 因此，HttpServletRequest和HttpServletResponse对象的创建发生在service()方法被调用之前，而service()方法则是处理请求的具体入口。

前后端分离 (客户端渲染)

服务器端渲染

服务器调用 service() 将数据处理好后, 在服务器端将该数据插入对应的html 代码中 ( 这个技术就是所谓的模板渲染, 常用技术为JSP, Thymeleaf...) , 然后将整个html 等前端代码一起响应给客户端

response.sendRedirect(request.getContextPath() + "/index.jsp");

客户端渲染

客户端渲染就是调用 service() 将数据处理好后直接将数据封装为JSON对象, 返回给前端, 前端使用 vue 等技术将该数据进行插入渲染

MVC架构

MVC架构模式的理解.png

三层架构

三层架构2.png

Web基础

Web基本概述

关于系统架构

系统架构包括形式

B/S架构通信原理

Ajax

HTTP协议

Ajax与HTTP协议的配合

关于WEB服务器软件

分类

WEB服务器和应用服务器的关系

Tomcat WEB服务器

概述与特点

Tomcat启动原理

Servlet

Servlet规范

作用

内容

Servlet接口体系

Servlet接口体系继承结构

Servlet对象的生命周期

HttpServlet源码分析

前后端分离 (客户端渲染)

服务器端渲染

客户端渲染

MVC架构

三层架构