JavaWeb-day2-WEB核心（万字）

已于 2022-11-29 19:34:38 修改
阅读量332 收藏 5
点赞数 1
分类专栏： web前端开发 文章标签： 前端 servlet javascript
于 2022-11-29 19:30:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lsl5713/article/details/128044935
版权

一、概述

1.1 什么是JavaWeb

  • Web：全球广域网，也称为万维网(www)，能够通过浏览器访问的网站
  • JavaWeb： 是用 Java技术来解决相关web互联网领域的技术栈

1.2 JavaWeb技术栈

  • B/S 架构：Browser/Server，浏览器/服务器 架构模式，它的特点是，客户端只需要浏览器，应用程序的逻辑和数据都存储在服务器端。浏览器只需要请求服务器，获取Web资源，服务器把Web资源发送给浏览器即可
    • 好处：易于维护升级：服务器端升级后，客户端无需任何部署就可以使用到新的版本
    • 静态资源：HTML、CSS、JavaScript、图片等。负责页面展现
    • 动态资源：Servlet、JSP 等。负责逻辑处理
    • 数据库：负责存储数据
    • HTTP协议：定义通信规则
    • Web服务器：负责解析 HTTP 协议，解析请求数据，并发送响应数据
      在这里插入图片描述

1.3 Web核心需要掌握知识

  • HTTP、Tomcat、Servlet
  • Request(请求)、Response(响应)
  • JSP、会话技术(Cookie、Session)
  • Filter（过滤器）、Listener（监听器）
  • Ajax、Vue、ElementUI

二、HTTP

  • 概念：HyperText Transfer Protocol，超文本传输协议，规定了浏览器和服务器之间数据传输的规则
  • HTTP 协议特点：
    • 基于TCP协议：面向连接，安全
    • 基于请求-响应模型的：一次请求对应一次响应
    • HTTP协议是无状态的协议：对于事务处理没有记忆能力。每次请求-响应都是独立的。
      • 缺点：多次请求间不能共享数据。
      • 优点：速度快

2.1 HTTP-请求数据格式

  • 请求数据分为3部分：
    • 请求行：请求数据的第一行。其中GET表示请求方式，/表示请求资源路径，HTTP/1.1表示协议版本
    • 请求头：第二行开始，格式为key：value形式。
    • 请求体： POST请求的最后一部分，存放请求参数
  • 常见的HTTP 请求头：
    • Host: 表示请求的主机名
    • User-A gent: 浏览器版本，例如Chrome浏览器的标识类似Mozilla/5.0 … Chrome/79，IE浏览器的标识类似Mozilla/5.0 (Windows NT …) like Gecko；
    • Accept：表示浏览器能接收的资源类型，如text/*，image/或者/*表示所有；
    • Accept-Language：表示浏览器偏好的语言，服务器可以据此返回不同语言的网页；
    • Accept-Encoding：表示浏览器可以支持的压缩类型，例如gzip, deflate等。
  • GET
    在这里插入图片描述
  • POST
    在这里插入图片描述
  • GET请求和 POST请求区别：
    • GET请求请求参数在请求行中，没有请求体。POST请求请求参数在请求体中
    • GET请求请求参数大小有限制，POST没有

2.2 HTTP-响应数据格式

  • 响应数据分为3部分
    • 响应行：响应数据的第一行。其中HTTP/1.1表示协议版本，200表示响应状态码，OK表示状态码描述
    • 响应头：第二行开始，格式为key：value形式
    • 响应体： 最后一部分。存放响应数据
  • 常见的HTTP响应头
    • Content-Type：表示该响应内容的类型，例如text/html，image/jpeg；
    • Content-Length：表示该响应内容的长度（字节数）；
    • Content-Encoding：表示该响应压缩算法，例如gzip；
    • Cache-Control：指示客户端应如何缓存，例如max-age=300表示可以最多缓存300秒
      在这里插入图片描述
  • 响应状态码
    • 遇到时自行百度，常遇到响应状态码有404、500
      在这里插入图片描述

2.3 Tomcat

  • 概念： Tomcat是Apache 软件基金会一个核心项目，是一个开源免费的轻量级Web服务器，支持Servlet/JSP少量JavaEE规范。
  • JavaEE：Java Enterprise Edition，Java企业版。指Java企业级开发的技术规范总和。包含13项技术规范：JDBC、JNDI、EJB、RMI、JSP、Servlet、XML、JMS、Java IDL、JTS、JTA、JavaMail、JAF
  • Tomcat 也被称为 Web容器、Servlet容器。Servlet 需要依赖于 Tomcat才能运行
  • 官网：https://tomcat.apache.org/

三、Servlet

  • Servlet 是 Java提供的一门动态web资源开发技术
  • Servlet 是JavaEE 规范之一，其实就是一个接口，将来我们需要定义Servlet类实现Servlet接口，并由web服务器运行Servlet
  • Servlet专门用来开发动态web资源

3.1 快速入门

  1. 创建 web项目，导入 Servlet依赖坐标

    <dependency>   
<groupId>javax.servlet</groupId
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>

  2. 创建：定义一个类，实现 Servlet接口，并重写接口中所有方法，并在 service方法中输入一句话

    public class ServletDemo1 implements Servlet {
    public void service(){}
}

  3. 配置：在类上使用@WebServlet 注解，配置该 Servlet的访问路径

    @WebServlet("/demo1") public class ServletDemo1 implements Servlet {

  4. 访问：启动 Tomcat，浏览器输入URL 访问该Servlet

    http://localhost:8080/web-demo/demo1

3.2 Servlet 执行流程

举例说明

  • http://localhost:8080/web-demo/demo1
    • http://localhost:8080------对应Tomcat服务器
    • /web-demo------对应某个项目
    • demo1------对应Tomcat创建的Servlet
  • 注意
    • Servlet由Web（Tomcat）服务器创建，并且由Web服务器调用。

3.3 Servlet 生命周期

  • Servlet运行在Servlet容器(web服务器)中，其生命周期由容器来管理，分为4个阶段：
    • 加载和实例化：默认情况下，当Servlet第一次被访问时，由容器创建Servlet对象
    • 初始化：在Servlet实例化之后，容器将调用Servlet的init()方法初始化这个对象，完成一些如加载配置文件、创建连接等初始化的工作。该方法只调用一次。
    • 请求处理：每次请求Servlet时，Servlet容器都会调用Servlet的service()方法对请求进行处理。
    • 服务终止：当需要释放内存或者容器关闭时，容器就会调用Servlet实例的destroy()方法完成资源的释放。在destroy()方法调用之后，容器会释放这个Servlet实例，该实例随后会被Java的垃圾收集器所回收。

3.4 Servlet 体系结构

在这里插入图片描述

  • HttpServlet使用步骤
    • 继承HttpServlet
    • 重写doGet和doPost方法
  • HttpServlet原理----（重点就是分成了不同的请求方式，继承之后直接重写即可）
    -获取请求方式，并根据不同的请求方式，调用不同的doXXX方法。

3.5 Servlet urlPattern配置

  • Servlet要想被访问，必须配置其访问路径（urlPattern）
    • 一个Servlet，可以配置多个urlPattern
      @WebServlet(urlPattern = {"/demo1"."/demo2"})
    • urlPattern配置规则
      • 精确匹配
        • 配置路径：@WebServlet("/user/select")
        • 访问路径：localhost:8080/web-demo/user/select
      • 目录匹配
        • 配置路径：@WebServlet("/user/*")
        • 访问路径：localhost:8080/web-demo/user/aaa或localhost:8080/web-demo/user/bbb
      • 扩展名匹配
        • 配置路径：@WebServlet("*.do")
        • 访问路径：localhost:8080/web-demo/user/aaa.do或localhost:8080/web-demo/user/bbb.do
      • 任意匹配
        • 配置路径：@WebServlet("/")或@WebServlet("/*")
        • 访问路径：localhost:8080/web-demo/user/123或localhost:8080/web-demo/user/435

3.6 XML配置方式编写Servlet

  • 编写Servlet类
  • 在web.xml中配置该Servlet
    在这里插入图片描述

四、Request 和Response

Request：获取请求数据
Response：设置相应数据

4.1 Request 继承体系

在这里插入图片描述

  • Request的继承体系为：ServletRequest–>HttpServletRequest–>RequestFacade
  • Tomcat需要解析请求数据，封装为request对象,并且创建request对象传递到service方法
  • 使用request对象，可以查阅JavaEE API文档的HttpServletRequest接口中方法说明

4.2 Request 获取请求数据

4.2.1 请求行

请求行包含三块内容，分别是请求方式、请求资源路径、HTTP协议及版本
在这里插入图片描述

  • 获取请求方式: GET

    String getMethod()

  • 获取虚拟目录(项目访问路径): /request-demo

    String getContextPath()

  • 获取URL(统一资源定位符): http://localhost:8080/request-demo/req1

    StringBuffer getRequestURL()

  • 获取URI(统一资源标识符): /request-demo/req1

    String getRequestURI()

  • 获取请求参数(GET方式): username=zhangsan&password=123

    String getQueryString()
4.2.2 请求头

对于请求头的数据，格式为key: value如下:
在这里插入图片描述

String getHeader(String name)
4.2.3 请求体

浏览器在发送GET请求的时候是没有请求体的，所以需要把请求方式变更为POST，请求体中的数据格式如下:
在这里插入图片描述
对于请求体中的数据，Request对象提供了如下两种方式来获取其中的数据，分别是:

  • 获取字节输入流，如果前端发送的是字节数据，比如传递的是文件数据，则使用该方法

    ServletInputStream getInputStream()
该方法可以获取字节

  • 获取字符输入流，如果前端发送的是纯文本数据，则使用该方法

    BufferedReader getReader()
4.2.4 小结

HTTP请求数据中包含了请求行、请求头和请求体，针对这三部分内容，Request对象都提供了对应的API方法来获取对应的值:

  • 请求行
    • getMethod()获取请求方式
    • getContextPath()获取项目访问路径
    • getRequestURL()获取请求URL
    • getRequestURI()获取请求URI
    • getQueryString()获取GET请求方式的请求参数
  • 请求头
    • getHeader(String name)根据请求头名称获取其对应的值
  • 请求体
    • 注意: 浏览器发送的POST请求才有请求体
    • 如果是纯文本数据:getReader()
    • 如果是字节数据如文件数据:getInputStream()
4.2.5 通用方式获取请求参数

对于请求参数的获取,常用的有以下两种:

  • GET方式:
String getQueryString()
  • POST方式:
BufferedReader getReader();

但是思考一个问题，GET和POST各自调用各自的函数，而POST函数的代码又和GET的完全一样，代码冗余，如何解决？

  • 可以考虑在doPost里面调用doGet，另外需要注意的是，doGet和doPost方法都必须存在，不能删除任意一个。（但是要达到这样，需要get和post的参数统一，限制太死）
    GET请求和POST请求获取请求参数的方式不一样，在获取请求参数这块该如何实现呢?

要想实现，我们就需要思考:
GET请求方式和POST请求方式区别主要在于获取请求参数的方式不一样，是否可以提供一种统一获取请求参数的方式，从而统一doGet和doPost方法内的代码?
request对象已经将上述获取请求参数的方法进行了封装，并且request提供的方法实现的功能更强大，以后只需要调用request提供的方法即可，在request的方法中都实现了哪些操作?

  • 根据不同的请求方式获取请求参数，获取的内容如下:
    在这里插入图片描述

  • 把获取到的内容进行分割，内容如下:
    在这里插入图片描述

  • 把分割后端数据，存入到一个Map集合中:
    在这里插入图片描述

注意:因为参数的值可能是一个，也可能有多个，所以Map的值的类型为String数组。

基于上述理论，request对象为我们提供了如下方法:

  • 获取所有参数Map集合
Map<String,String[]> getParameterMap()
  • 根据名称获取参数值（数组）
String[] getParameterValues(String name)
  • 根据名称获取参数值(单个值)
String getParameter(String name)

4.3 Request 请求转发

请求转发(forward):一种在服务器内部的资源跳转方式。

  1. 请求转发(forward):一种在服务器内部的资源跳转方式。

在这里插入图片描述

(1)浏览器发送请求给服务器，服务器中对应的资源A接收到请求

(2)资源A处理完请求后将请求发给资源B

(3)资源B处理完后将结果响应给浏览器

(4)请求从资源A到资源B的过程就叫请求转发

  1. 请求转发的实现方式:
req.getRequestDispatcher("资源B路径").forward(req,resp);
  1. 请求转发资源间共享数据:使用Request对象

此处主要解决的问题是把请求从资源A转发到资源B的时候，如何传递数据给资源B。

需要使用request对象提供的三个方法:

  • 存储数据到request域[范围,数据是存储在request对象]中
void setAttribute(String name,Object o);
  • 根据key获取值
Object getAttribute(String name);
  • 根据key删除该键值对
void removeAttribute(String name);

在这里插入图片描述

4.4 Response设置响应数据功能

HTTP响应数据总共分为三部分内容，分别是响应行、响应头、响应体，对于这三部分内容的数据，respone对象都提供了哪些方法来进行设置?

  1. 响应行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yn4fkaWV-1669643562681)(assets/1628858926498.png)]

对于响应头，比较常用的就是设置响应状态码:

void setStatus(int sc);
  1. 响应头

设置响应头键值对：

void setHeader(String name,String value);
  1. 响应体

在这里插入图片描述

对于响应体，是通过字符、字节输出流的方式往浏览器写，

获取字符输出流:

PrintWriter getWriter();

获取字节输出流

ServletOutputStream getOutputStream();

4.5 Response完成重定向

  1. Response重定向(redirect):一种资源跳转方式。
    在这里插入图片描述

  • Response重定向(redirect):一种资源跳转方式。

    (1)浏览器发送请求给服务器，服务器中对应的资源A接收到请求

    (2)资源A现在无法处理该请求，就会给浏览器响应一个302的状态码+location的一个访问资源B的路径

    (3)浏览器接收到响应状态码为302就会重新发送请求到location对应的访问地址去访问资源B

    (4)资源B接收到请求后进行处理并最终给浏览器响应结果，这整个过程就叫重定向

  • 重定向的实现方式:

    resp.setStatus(302);
resp.setHeader("location","资源B的访问路径");

    //可简写为如下
resp.sendRedirect("资源B的访问路径");

  • 重定向特点：

    • 浏览器地址栏路径发生变化
    • 可以重定向到任意位置的资源（服务器内部、外部均可）
    • 两次请求，不能再多个资源使用request共享数据

4.6 Response响应字符数据

要想将字符数据写回到浏览器，我们需要两个步骤:

  • 通过Response对象获取字符输出流： PrintWriter writer = resp.getWriter();

  • 通过字符输出流写数据: writer.write("aaa");

4.7 Response响应字节数据

要想将字节数据写回到浏览器，我们需要两个步骤:

  • 通过Response对象获取字节输出流：ServletOutputStream outputStream = resp.getOutputStream();

  • 通过字节输出流写数据: outputStream.write(字节数据);

五、JSP

5.1 JSP概述

  • JSP（全称：Java Server Pages）：Java 服务端页面。是一种动态的网页技术，其中既可以定义 HTML、JS、CSS等静态内容，还可以定义 Java代码的动态内容，也就是 JSP = HTML + Java。
  • JSP 作用：简化开发，避免了在Servlet中直接输出HTML标签。

5.2 JSP原理

我们之前说 JSP 就是一个页面，那么在 JSP 中写 html 标签，我们能理解，但是为什么还可以写 Java 代码呢？

因为 JSP 本质上就是一个 Servlet。
在这里插入图片描述

  1. 浏览器第一次访问 hello.jsp 页面
  2. tomcat 会将 hello.jsp 转换为名为 hello_jsp.java 的一个 Servlet
  3. tomcat 再将转换的 servlet 编译成字节码文件 hello_jsp.class
  4. tomcat 会执行该字节码文件，向外提供服务

5.3 JSP脚本

JSP脚本用于在 JSP页面内定义 Java代码。在之前的入门案例中我们就在 JSP 页面定义的 Java 代码就是 JSP 脚本。

5.3.1 JSP 脚本分类

JSP 脚本有如下三个分类：

  • <%…%>：内容会直接放到_jspService()方法之中
  • <%=…%>：内容会放到out.print()中，作为out.print()的参数，直接输出到页面
  • <%!…%>：内容会放到_jspService()方法之外，被类直接包含

5.4 EL表达式

  • EL（全称Expression Language ）表达式语言，用于简化 JSP 页面内的 Java 代码。

  • EL 表达式的主要作用是: 获取数据。其实就是从域对象中获取数据，然后将数据展示在页面上。

  • 而 EL 表达式的语法也比较简单，$ {expression} 。例如：${brands} 就是获取域中存储的 key 为 brands 的数据。

5.4.1 域对象

JavaWeb中有四大域对象，分别是：

  • page：当前页面有效
  • request：当前请求有效
  • session：当前会话有效
  • application：当前应用有效

el 表达式获取数据，会依次从这4个域中寻找，直到找到为止。而这四个域对象的作用范围如下图所示
在这里插入图片描述
例如： ${brands}，el 表达式获取数据，会先从page域对象中获取数据，如果没有再到 requet 域对象中获取数据，如果再没有再到 session 域对象中获取，如果还没有才会到 application 中获取数据。

5.5 JSTL标签

5.5.1 概述

JSP标准标签库(Jsp Standarded Tag Library) ，使用标签取代JSP页面上的Java代码。如下代码就是JSTL标签

<c:if test="${flag == 1}">
    男
</c:if>
<c:if test="${flag == 2}">
    女
</c:if>

上面代码比起在JSP页面里面直接嵌套Java代码简单并且易懂很多

  • JSTL提供了很多标签
    在这里插入图片描述
    这里只举例两个常用的标签，其他的用到自行查询，<c:forEach> 标签和 <c:if> 标签。
5.5.2 if标签

<c:if>：相当于 if 判断

  • 属性：test，用于定义条件表达式
<c:if test="${flag == 1}">
    男
</c:if>
<c:if test="${flag == 2}">
    女
</c:if>
5.5.1 forEach 标签

<c:forEach>：相当于 for 循环。java中有增强for循环和普通for循环，JSTL 中的 <c:forEach> 也有两种用法

  • 一种类似于 Java 中的增强for循环。涉及到的 <c:forEach> 中的属性如下

    • items：被遍历的容器

    • var：遍历产生的临时变量

    • varStatus：遍历状态对象

  • 第二种类似于 Java 中的普通for循环。涉及到的 <c:forEach> 中的属性如下

    • begin：开始数

    • end：结束数

    • step：步长

从0循环到10，变量名是 i ，每次自增1

<c:forEach begin="0" end="10" step="1" var="i">
    ${i}
</c:forEach>

六、MVC模式和三层架构

6.1 MVC模式（开发模式）

  • MVC 是一种分层开发的模式，其中：

    • M：Model，业务模型，处理业务

    • V：View，视图，界面展示

    • C：Controller，控制器，处理请求，调用模型和视图

  • MVC 好处：

    • 职责单一，互不影响。每个角色做它自己的事，各司其职。

    • 有利于分工协作。

    • 有利于组件重用

6.2 三层架构（软件设计架构）

  • 三层架构是将我们的项目分成了三个层面，分别是 表现层、业务逻辑层、数据访问层。
    在这里插入图片描述

    • 数据访问层：对数据库的CRUD基本操作
    • 业务逻辑层：对业务逻辑进行封装，组合数据访问层层中基本功能，形成复杂的业务逻辑功能。例如 注册业务功能 ，我们会先调用 数据访问层 的 selectByName() 方法判断该用户名是否存在，如果不存在再调用 数据访问层 的 insert() 方法进行数据的添加操作
    • 表现层：接收请求，封装数据，调用业务逻辑层，响应数据

而整个流程是，浏览器发送请求，表现层的Servlet接收请求并调用业务逻辑层的方法进行业务逻辑处理，而业务逻辑层方法调用数据访问层方法进行数据的操作，依次返回到serlvet，然后servlet将数据交由 JSP 进行展示。

  • 三层架构的每一层都有特有的包名称：

    • 表现层： com.daimalu.controller 或者 com.daimalu.web
    • 业务逻辑层：com.daimalu.service
    • 数据访问层：com.daimalu.dao 或者 com.daimalu.mapper

而学习的框架和三层之间的关系如下图所示：
在这里插入图片描述

6.2 MVC模式和三层架构的关系

在这里插入图片描述
如上图上半部分是 MVC 模式，上图下半部分是三层架构。 MVC 模式 中的 C（控制器）和 V（视图）就是 三层架构 中的表现层，而 MVC 模式 中的 M（模型）就是 三层架构 中的 业务逻辑层 和 数据访问层。

可以将 MVC 模式 理解成是一个大的概念，而 三层架构 是对 MVC 模式 实现架构的思想。 那么我们以后按照要求将不同层的代码写在不同的包下，每一层里功能职责做到单一，将来如果将表现层的技术换掉，而业务逻辑层和数据访问层的代码不需要发生变化。

七、Filter和Listener

Filter 表示过滤器，是 JavaWeb 三大组件(Servlet、Filter、Listener)之一。Servlet 前面已经说过了，接下来来了解Filter
过滤器可以把对资源的请求拦截下来，从而实现一些特殊的功能。
在这里插入图片描述

7.1 过滤器快速入门

进行 Filter 开发分成以下三步实现

  • 定义类，实现 Filter接口，并重写其所有方法

    在这里插入图片描述

  • 配置Filter拦截资源的路径：在类上定义 @WebFilter 注解。而注解的 value 属性值 /* 表示拦截所有的资源

    在这里插入图片描述

  • 在doFilter方法中输出一句话，并放行

    在这里插入图片描述

    上述代码中的 chain.doFilter(request,response); 就是放行，也就是让其访问本该访问的资源。

7.2 Filter执行流程

在这里插入图片描述
在这里插入图片描述

7.3 Filter拦截路径配置

拦截路径表示 Filter 会对请求的哪些资源进行拦截，使用 @WebFilter 注解进行配置。如：@WebFilter("拦截路径")

拦截路径有如下四种配置方式：

  • 拦截具体的资源：/index.jsp：只有访问index.jsp时才会被拦截
  • 目录拦截：/user/*：访问/user下的所有资源，都会被拦截
  • 后缀名拦截：*.jsp：访问后缀名为jsp的资源，都会被拦截
  • 拦截所有：/*：访问所有资源，都会被拦截

7.4 过滤器链

过滤器链是指在一个Web应用，可以配置多个过滤器，这多个过滤器称为过滤器链。

如下图就是一个过滤器链，我们学习过滤器链主要是学习过滤器链执行的流程

在这里插入图片描述

上图中的过滤器链执行是按照以下流程执行：

  1. 执行 Filter1 的放行前逻辑代码
  2. 执行 Filter1 的放行代码
  3. 执行 Filter2 的放行前逻辑代码
  4. 执行 Filter2 的放行代码
  5. 访问到资源
  6. 执行 Filter2 的放行后逻辑代码
  7. 执行 Filter1 的放行后逻辑代码

以上流程串起来就像一条链子，故称之为过滤器链。

7.5 Listener

  • Listener 表示监听器，是 JavaWeb 三大组件(Servlet、Filter、Listener)之一。

  • 监听器可以监听就是在 application，session，request 三个对象创建、销毁或者往其中添加修改删除属性时自动执行代码的功能组件。

    request 和 session 我们学习过。而 application 是 ServletContext 类型的对象。

    ServletContext 代表整个web应用，在服务器启动的时候，tomcat会自动创建该对象。在服务器关闭时会自动销毁该对象。

JavaWeb 提供了8个监听器：
在这里插入图片描述

这里面只有 ServletContextListener 这个监听器后期我们会接触到，ServletContextListener 是用来监听 ServletContext 对象的创建和销毁。

ServletContextListener 接口中有以下两个方法

  • void contextInitialized(ServletContextEvent sce)：ServletContext 对象被创建了会自动执行的方法
  • void contextDestroyed(ServletContextEvent sce)：ServletContext 对象被销毁时会自动执行的方法
7.5.1 代码演示

我们只演示一下 ServletContextListener 监听器

  • 定义一个类，实现ServletContextListener 接口
  • 重写所有的抽象方法
  • 使用 @WebListener 进行配置

代码如下：

@WebListener
public class ContextLoaderListener implements ServletContextListener {
    @Override
    public void contextInitialized(ServletContextEvent sce) {
        //加载资源
        System.out.println("ContextLoaderListener...");
    }

    @Override
    public void contextDestroyed(ServletContextEvent sce) {
        //释放资源
    }
}

启动服务器，就可以在启动的日志信息中看到 contextInitialized() 方法输出的内容，同时也说明了 ServletContext 对象在服务器启动的时候被创建了。

八、AJAX

8.1 AJAX概述

AJAX (Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。

我们先来说概念中的 JavaScript 和 XML，JavaScript 表明该技术和前端相关；XML 是指以此进行数据交换。而这两个之前都讲述过。

  • AJAX 作用有以下两方面：

    • 与服务器进行数据交换：通过AJAX可以给服务器发送请求，服务器将数据直接响应回给浏览器。

      我们先来看之前做功能的流程，如下图：
      在这里插入图片描述
      Servlet 调用完业务逻辑层后将数据存储到域对象中，然后跳转到指定的 jsp 页面，在页面上使用 EL表达式 和 JSTL 标签库进行数据的展示。

      而我们学习了AJAX 后，就可以使用AJAX和服务器进行通信，以达到使用 HTML+AJAX来替换JSP页面了。如下图，浏览器发送请求servlet，servlet 调用完业务逻辑层后将数据直接响应回给浏览器页面，页面使用 HTML 来进行数据展示。
      在这里插入图片描述

  • 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用校验，等等…

8.1.1 同步和异步

  • 同步发送请求过程如下

    在这里插入图片描述
    ​ 浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作。

  • 异步发送请求过程如下

    在这里插入图片描述
    浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。

8.2 AJAX快速入门

  • 原生AJAX太过复杂繁琐，取而代之的是AXIOS异步框架，基本没有开发者使用，因此这里略过，我们直接来看AXIOS异步框架。

8.3 AXIOS异步框架

  • Axios 对原生的AJAX进行封装，简化书写。

  • Axios官网是：https://www.axios-http.cn

8.3.1 基本使用

axios 使用是比较简单的，分为以下两步：

  • 引入 axios 的 js 文件

    <script src="js/axios-0.18.0.js"></script>

  • 使用axios 发送请求，并获取响应结果

    • 发送 get 请求

      axios({
    method:"get",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
}).then(function (resp){
    alert(resp.data);
})

    • 发送 post 请求

      axios({
    method:"post",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
    data:"username=zhangsan"
}).then(function (resp){
    alert(resp.data);
});

axios() 是用来发送异步请求的，小括号中使用 js 对象传递请求相关的参数：

  • method 属性：用来设置请求方式的。取值为 get 或者 post。
  • url 属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为： url?参数名=参数值&参数名2=参数值2。
  • data 属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。

then() 需要传递一个匿名函数。我们将 then() 中传递的匿名函数称为 回调函数，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。

8.3.2 请求方法别名

为了方便起见， Axios 已经为所有支持的请求方法提供了别名。如下：

  • get 请求 ： axios.get(url[,config])

  • delete 请求 ： axios.delete(url[,config])

  • head 请求 ： axios.head(url[,config])

  • options 请求 ： axios.option(url[,config])

  • post 请求：axios.post(url[,data[,config])

  • put 请求：axios.put(url[,data[,config])

  • patch 请求：axios.patch(url[,data[,config])

而我们只关注 get 请求和 post 请求。

8.3.1 基本使用中的 get 请求代码可以改为如下：

axios.get("http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan").then(function (resp) {
    alert(resp.data);
});

8.3.1 基本使用中的 post 请求代码可以改为如下：

axios.post("http://localhost:8080/ajax-demo/axiosServlet","username=zhangsan").then(function (resp) {
    alert(resp.data);
})

8.4 JSON

8.4.1 JSON概述

概念：JavaScript Object Notation。JavaScript 对象表示法.

如下是 JavaScript 对象的定义格式：

{
	name:"zhangsan",
	age:23,
	city:"北京"
}

接下来我们再看看 JSON 的格式：

{
	"name":"zhangsan",
	"age":23,
	"city":"北京"
}

通过上面 js 对象格式和 json 格式进行对比，发现两个格式特别像。只不过 js 对象中的属性名可以使用引号（可以是单引号，也可以是双引号）；而 json 格式中的键要求必须使用双引号括起来，这是 json 格式的规定。json 格式的数据有什么作用呢？

作用：由于其语法格式简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

8.4.2 JSON基础语法

JSON 本质就是一个字符串，但是该字符串内容是有一定的格式要求的。 定义格式如下：

var 变量名 = '{"key":value,"key":value,...}';

JSON 串的键要求必须使用双引号括起来，而值根据要表示的类型确定。value 的数据类型分为如下

  • 数字（整数或浮点数）
  • 字符串（使用双引号括起来）
  • 逻辑值（true或者false）
  • 数组（在方括号中）
  • 对象（在花括号中）
  • null

示例：

var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}'
8.4.3 发送异步请求携带参数

后面我们使用 axios 发送请求时，如果要携带复杂的数据时都会以 JSON 格式进行传递，如下

axios({
    method:"post",
    url:"http://localhost:8080/ajax-demo/axiosServlet",
    data:"username=zhangsan"
}).then(function (resp) {
    alert(resp.data);
})

请求参数不可能由我们自己拼接字符串吧？肯定不用，可以提前定义一个 js 对象，用来封装需要提交的参数，然后使用 JSON.stringify(js对象) 转换为 JSON 串，再将该 JSON 串作为 axios 的 data 属性值进行请求参数的提交。如下：

var jsObject = {name:"张三"};

axios({
    method:"post",
    url:"http://localhost:8080/ajax-demo/axiosServlet",
    data: JSON.stringify(jsObject)
}).then(function (resp) {
    alert(resp.data);
})

而 axios 是一个很强大的工具。我们只需要将需要提交的参数封装成 js 对象，并将该 js 对象作为 axios 的 data 属性值进行，它会自动将 js 对象转换为 JSON 串进行提交。如下：

var jsObject = {name:"张三"};

axios({
    method:"post",
    url:"http://localhost:8080/ajax-demo/axiosServlet",
    data:jsObject  //这里 axios 会将该js对象转换为 json 串的
}).then(function (resp) {
    alert(resp.data);
})

注意：

  • js 提供的 JSON 对象我们只需要了解一下即可。因为 axios 会自动对 js 对象和 JSON 串进行想换转换。
  • 发送异步请求时，如果请求参数是 JSON 格式，那请求方式必须是 POST。因为 JSON 串需要放在请求体中。
8.4.4 JSON串和Java对象的相互转换

学习完 json 后，接下来聊聊 json 的作用。以后我们会以 json 格式的数据进行前后端交互。前端发送请求时，如果是复杂的数据就会以 json 提交给后端；而后端如果需要响应一些复杂的数据时，也需要以 json 格式将数据响应回给浏览器。

在这里插入图片描述

在后端我们就需要重点学习以下两部分操作：

  • 请求数据：JSON字符串转为Java对象
  • 响应数据：Java对象转为JSON字符串

有一套 API，可以实现上面两部分操作。这套 API 就是 Fastjson

  • Fastjson 是阿里巴巴提供的一个Java语言编写的高性能功能完善的 JSON 库，是目前Java语言中最快的 JSON 库，可以实现 Java 对象和 JSON 字符串的相互转换。

  • Fastjson 使用也是比较简单的，分为以下三步完成

    • 导入坐标

      <dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.62</version>
</dependency>

    • Java对象转JSON

      String jsonStr = JSON.toJSONString(obj);

      将 Java 对象转换为 JSON 串，只需要使用 Fastjson 提供的 JSON 类中的 toJSONString() 静态方法即可。

    • JSON字符串转Java对象

      User user = JSON.parseObject(jsonStr, User.class);

      将 json 转换为 Java 对象，只需要使用 Fastjson 提供的 JSON 类中的 parseObject() 静态方法即可。

阿渌
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
超详细的Spring Cloud全面总结2W字（建议收藏）
bieber007的博客
09-20 521
首先我给大家看一张图，如果大家对这张图有些地方不太理解的话，我希望你们看完我这篇文章会恍然大悟。 什么是Spring cloud 构建分布式系统不需要复杂和容易出错。Spring Cloud 为最常见的分布式系统模式提供了一种简单且易于接受的编程模型，帮助开发人员构建有弹性的、可靠的、协调的应用程序。Spring Cloud 构建于 Spring Boot 之上，使得开发者很容易入手并快速应用于生产中。 官方果然官方，介绍都这么有板有眼的。 我所理解的Spring Cloud就是微服务系..
最新丨万字详解Docker架构原理及功能使用
架构文摘
08-09 1772
提示：文中有些内容为大神的博客内容，就不统一标注那里引用，只是再最下面标注参考连接，谢谢！一、简介1、了解Docker的前生LXCLXC为Linux Container...
eBPF 完全入门指南.pdf（万字长文）
云原生实验室
04-02 1915
eBPF 源于 BPF[1]，本质上是处于内核中的一个高效与灵活的虚类虚拟机组件，以一种安全的方式在许多内核 hook 点执行字节码。BPF 最初的目的是用于高效网络报文过滤，经过重新设计，eBPF 不再局限于网络协议栈，已经成为内核顶级的子系统，演进为一个通用执行引擎。开发者可基于 eBPF 开发性能分析工具、软件定义网络、安全等诸多场景。本文将介绍 eBPF 的前世今...
万字集合概述
Aur_ora的博客
07-08 209
1. 集合体系图 下面所有的实现类都重写了toString方法 1.1 单列集合 1.2 双列集合 存放的是K-V 2.Collection方法 因为Collection Set List都是接口不能直接实例化，所以我们选用ArrayList来演示各种方法 2.1 添加操作 2.2 删除操作 2.3 查找 2.4 获取元素个数 list.size() 2.5 判断为空 list.isEmpty() 2.6清空 list.clear(); 2.7 遍历 2.7.1 Iterator法 It
C语言入门篇（万字）
养成系的阿玥的博客
04-13 340
主要介绍C语言的基本知识。定义“方法：数据类型 变量名 = 数值如 int a=1，char b=‘a’, float c=1.0int a = 0;//这里我们定义了一个整型变量a并且初识化为0 printf("a=%d\n" , a);a = 9;//这里我我们给a赋值一个数9 printf("a=%d\n" , a);return 0;运行结果:经过运行代码我们可以看出这里a是可以变化的，则它是变量。
javaweb-csu：大三下Web课设-中南大学主页-JavaWeb
01-30
实验一 一，实验内容 制作一个与中南大学主页类似的页面： ...CSS和JS文件单独书写。 版面排版和内容需基本接近学校主页 只需完成首页的制作，无需做二级页面 “教育机构”需有类似的投放窗口菜单 ...
JavaWeb-day01-数据库基础.xmind
11-05
JavaWeb-day01-数据库基础.xmind
Javaweb-讨论课PPT-Web开发应用框架介绍与比较
06-30
Web开发应用框架介绍与比较，分为四章进行展示：Django的python框架、Jfinal框架、Struts框架，以及最后章节对比与总结。末尾写出参考文献。 内容完整，图文表并茂，可用于JavaWeb讨论课展示。 文件仅供参考学习。
javaweb-demo
最新发布
09-27
这个名为"javaweb-demo"的项目很可能是用来演示JavaWeb应用的基础架构和核心功能。下面，我们将深入探讨JavaWeb开发的关键概念、常用技术和在实际项目中的应用。 1. **Servlet与JSP**： - **Servlet**：Java ...
传智播客崔希凡JavaWeb-day10-java web之requestrespone-全部资料
12-08
本资源包"传智播客崔希凡JavaWeb-day10-java web之requestrespone-全部资料"涵盖了第十天课程的完整学习材料，帮助学生深化对HTTP请求与响应的理解。 1. **HTTP请求**：在Web应用中，用户通过浏览器发起HTTP请求来...
多线程-万字详解
DotNetFamily
07-22 374
Java 多线程详解
ArrayList万字说明书
理想万岁万万岁的博客
09-01 106
长达万字的ArrayList使用说明书
Sentinel 万字教程
IT技术精选文摘
04-25 73
若有收获,请记得分享和转发哦限流作为现在微服务中常见的稳定性措施，在面试中肯定也是经常会被问到的，我在面试的时候也经常喜欢问一下你对限流算法知道哪一些？有看过源码吗？实现原理是什么？第一部分先讲讲限流算法，最后再讲讲源码的实现原理。限流算法关于限流的算法大体上可以分为四类：固定窗口计数器、滑动窗口计数器、漏桶(也有称漏斗，英文Leaky bucket)、令牌桶(英文Tok...
万字总结redis
热门推荐
假装懂编程的博客
10-11 1万+
redis数据类型剖析 1.string sds数据结构，采用空间预分配和惰性空间释放来提升效率，缺点就是耗费内存。 struct sdshdr { int len; //长度 int free; //剩余空间 char buf[]; //字符串数组 }; 空间预分配：当一个sds被修改成更长的buf时，除了会申请本身需要的内存外，还会额外申请一些空间。惰性空间：当一个sds被修改成更短的buf时，并不会把多余的内存还回去，而是会保存起来。总结：这种设计的核心思想就是空间
SpringMVC 万字通关
Node_Hao的博客
05-19 1905
SpringMVC 是 Spring Framework 的一部分，是一个基于 Servlet API 构建的原始的 Web 框架 , 它的正式名称为 Spring Web MVC.Spring MVC 是一个Web框架.Spring MVC 是基于构建的.然而真正理解 SpringMVC , 我们需要先知道什么是 MCV?MVC 是 Model View Controller 的缩写 , 它是软件工程的一种软件框架模式 , 它把软件系统分为模型视图控制器三个基本部分.Model。
【计算机网络】万字总结
小羊不会飞的博客
07-01 4323
爆肝计算机网络全面的知识总结！！！
C++万字总结（建议收藏）
Linux驱动相关内容及Android开发
04-05 500
自定义异常类需要继承异常的父类：exception类，具有异常exception的属性和方法，需要重写what方法class MyException :public exception //例如该异常类是字符串异常public:num = obj;return num;trythrow MyException("自定义字符串异常");cout
java String类 万字详解（通俗易懂）
Cyan_RA9的博客
03-06 1545
java 《API-常用类》专题——常用类 String 类 详解。
图文详解：mysql倒序输出
m0_57699613的博客
07-13 1039
二、我们先来看看这份笔记到底有什么 1、先把kubernetes跑起来（先跑起来+创建kubernetes集群+部署应用+访问应用+Scale应用+滚动更新） 2、重要概念 3、部署kubernetes Cluster（安装docker+安装 kubelet.kubeadm和 kubectll+用kubeadm 创建cluster） 4、kubernetes架构（Master节点+Node节点+完整的架构图+用例子把他们串起来） 5、运行应用（Deployment+DaemonSet+Job） 6
JavaWeb-SSM-超市管理系统.docx
07-01
JavaWeb-SSM-超市管理系统.docxJavaWeb-SSM-超市管理系统.docxJavaWeb-SSM-超市管理系统.docxJavaWeb-SSM-超市管理系统.docxJavaWeb-SSM-超市管理系统.docxJavaWeb-SSM-超市管理系统.docxJavaWeb-SSM-超市管理系统.docxJavaWeb-SSM-超市管理系统.docxJavaWeb-SSM-超市管理系统.docx

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值