JavaWeb-day2-WEB核心（万字）

已于 2022-11-29 19:34:38 修改
阅读量343 收藏 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
    评论
专栏目录
基于SSM的水果商城系统万字报告
04-01
通过完成本项目使学生熟悉软件工程的各个阶段的相关活动和相应文档的书写，并能掌握web程序开发技巧，至少掌握一门流行的开发语言和一种数据库。同时煅炼学生的业务分析能力和系统设计能力，了解基本的软件控制业务流程的方法。 本商城系统共分两个部分： 1）前台门户的部分：注册，登录，浏览水果商品，检索水果商品，管理购物车，提交/修改/取消订单，支付，收藏水果商品，收/退货，评价水果商品，留言反馈，浏览公告； 后台管理部分：水果商品类目管理，水果商品管理，订单管理，用户管理，留言管理，公告管理，管理员管理等。
java 一文讲透集合框架（10万字博文）
Cyan_RA9的博客
04-11 1859
java API常用工具之集合框架 全面总结，10万字深度讲解。
JavaWeb详细介绍(zh)10-JSP
weixin_45428910的博客
03-16 242
JavaWeb详细介绍(zh)10-JSP
微服务入门篇（二），万字长文带你实操作SpringCloudAlibaba微服务组件
只为code醉的博客
01-07 844
1. Nacos：一个更易于构建云原生应用的动态服务发现、配置管理和服务管理平台。 2. Sentinel：把流量作为切入点，从流量控制、熔断降级、系统负载保护等多个维度保护服务的稳定性 3. RocketMQ：一款开源的分布式消息系统，基于高可用分布式集群技术，提供低延时的、高可靠的消息发布与订阅服务。 4. Dubbo：Apache Dubbo™ 是一款高性能 Java RPC 框架。 5. Seata：阿里巴巴开源产品，一个易于使用的高性能微服务分布式事务解决方案。 6. Alibaba Cloud
史上最全的Zookeeper原理详解(万字长文)
热门推荐
雷恩Layne
03-10 1万+
我参考了几十篇文章，总结了里面最重要的部分，并增加了许多自己的思考和理解，完成了这篇博客。我认为这篇博客很全，里面的内容也通俗易懂，想要了解Zookeeper的原理，本文应该就够了。另外，所有的参考文章链接已放到本文末尾，有需要的读者可自行查阅。 文章目录1. ZooKeeper 介绍1.1 什么是Zookeeper1.2 使用ZooKeeper的开源项目1.3 ZooKeeper的三种运行模式2. CAP和BASE理论3. Zookeeper的特点4. 一致性协议之 ZAB4.1 ZAB 中的三个角色4.
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请求来...
1.3万字简述，PRD到底怎么写.pdf
09-07
PRD是一个产品经理硬实力最好的背书。在项目周期中，理论上只有需求阶段由产品经理全权负责，此时受到的外部干扰最少。输出的PRD直观体现产品经理对产品从宏观到细节的思考结论，体现硬实力。
【Javaweb】全面学习JavaWeb 万字长文警告
屠一乐的博客
10-23 720
Web是全球广域网，也称为万维网(www)，能够通过浏览器访问的网站。 在我们日常的生活中，经常会使用浏览器去访问、、等这些网站，这些网站统称为Web网站。如下就是通过浏览器访问传智官网的界面: 我们知道了什么是Web，那么JavaWeb又是什么呢？顾名思义JavaWeb就是用Java技术来解决相关web互联网领域的技术栈。 等学习完JavaWeb之后，同学们就可以使用Java语言开发我们上述所说的网站。而国内很多大型网站公司也是首选Java语言来解决web互联网相关的问题。那都有哪些公司
1.6 万字长文带你读懂 Java IO
CSDN资讯
09-07 3216
作者 |小菠萝责编 | 王晓曼来源 |Java建设者（ID: javajianshe）Java IO 是一个庞大的知识体系，很多人学着学着就会学懵了，包括我在内也是如此，所以本文将会...
五万字长文:Java面试知识点总结
我的博客
04-22 3610
大家第一眼看过去可能会怀疑文章是不是标题党，这篇短短的文章应该是没有50000字的。但是本文实际上远远不止五万字，大家可以打开正文中任何一个链接看看，每一个链接都是一类知识点的总结，任何一个链接都是。正文中的每一个链接都是目录分类的形式知识点的总结，使得杂乱无章的知识点变得条理很清楚，也便于同学们复习。 另外，博主收集了几类全面的思维导图，思维导图可以帮助大家系统全面的建立起知识网络，方便大家理解...
C语言文件操作
weixin_57222280的博客
10-09 237
文章目录C语言文件操作1.什么是文件2. 文件的打开和关闭2.1 文件指针2.2文件的打开和关闭3. 文件的顺序读写对比一组函数：4. 文件的随机读取fseekftellrewind5. 文本文件和二进制文件6. 文件结束判定7. 文件缓冲区 C语言文件操作 1.什么是文件 磁盘上的文件是文件。 但是在程序设计中，我们一般谈的文件有两种：程序文件、数据文件 程序文件 包括源程序文件（后缀为.c）,头文件（后缀为.h）,目标文件（windows环境后缀为.obj）,可执行程序（windows环境后缀为.exe
Nginx 从入门到实践，万字详解！
前端下午茶
04-30 2101
最近越来越频繁地遇到需要配置反向代理的场景，在自己搭建博客的时候，也不可避免要用到 Nginx，所以这段时间集中学习了一下 Nginx，同时做了一些笔记，希望也可以帮助到大家～ ????...
GAN 万字综述
wzg2016的博客
02-22 316
文章下载链接：How Generative Adversarial Networks and its variants Work: An Overview of GAN 中文解读：https://www.jianshu.com/p/331a078036ee
Spring5架构，万字文章带你学习
qq_52655865的博客
05-04 1万+
一.Spring框架概述 1，Spring是一个 开源的 轻量级的 JavaEE框架。 轻量级：体积小，jar独立使用不需要依赖其他jar包， 开源：免费，可以提供源代码 框架：解决开发的复杂性，简化企业开发。 2，spring的两个核心部分：IOC，Aop IOC：控制反转，把创建对象的过程交给spring进行管理。 Aop：面向切面，在不修改源代码的情况下，进行功能的添加或增强。 3，spring框架的特点： 1），方便解耦，简化开发：对象与对象之间的关系依赖spring。 2...
从C到C++（简易汇总篇，适合收藏）
兮于怀
05-30 262
1.C++头文件不必是以.h结尾，C语言中的标准库头文件math.h、stdio.h，在C++标准库头文件中被命名为cmath、cstdio. #include <cmath> #include <cstdio> int main() { double a=1.2; a=sin(a); printf("%lf\n",a); return 0; } 2.C++除了C的多行注释，还可以使用单行注释 （在 C99 标准中，单行注释正式加入C语言，但是大部分编译器在 C99
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值