JavaWeb【总结】——（请求和响应）浏览器发送请求的方式 & 服务器响应的方式

╰+哭是因爲堅強的太久メ 2024-03-16 18:47 88阅读 0赞

#### 本文目录 ####

*  引出
 *  JavaWeb相关知识
 *   *  1.网页状态码+web相关背景知识+如何在idea中建tomcat web项目
     *  2.Web的请求request：get和post，响应response
     *  3.同步请求和异步请求Ajax，以及异步的Json响应
     *  4.同步jsp和异步ajax的axios下，转发或重定向思考
 *  浏览器发送请求
 *   *  1.浏览器地址栏发送请求----全是get
     *  2.form表单：可以是get或post
     *  3.超链接：等价于浏览器地址栏---get
 *  服务器响应
 *   *  1.响应静态页面：webapp下的静态资源；
     *  2.Servlet处理：resp.getWriter().write("xxxxxxxxxx")；
     *  3.Servlet处理：重定向 resp.sendRedirect("/path")
     *  4.Servlet处理：内部转发---servlet或jsp
     *  5.Servlet处理：异步Ajax的标准响应格式Json
 *  应用案例
 *   *  1.同步请求的案例
     *  2.异步请求的案例
 *  总结

## 引出 ##

根据前面学到的同步、异步，servlet的转发重定向，JavaScript等相关内容，有必要用浏览器发送请求的方式，以及服务器响应的方式这个角度进行思考。  
![在这里插入图片描述][ad10ce4e28914d3aaa10e941924e075e.png]![在这里插入图片描述][5545c06d0099422c8139c460097f4692.png]

--------------------

## JavaWeb相关知识 ##

### 1.网页状态码+web相关背景知识+如何在idea中建tomcat web项目 ###

[Servlet学习 & Web相关背景知识 + 网页状态码（304） & JavaWeb项目初步][Servlet_ _ Web_ _ _304_ _ JavaWeb]

![在这里插入图片描述][bc6a1e630e2c44789bce42eae04c0778.png]

### 2.Web的请求request：get和post，响应response ###

[web的 请求request （post和get请求）和 响应response + 【案例】表格显示在网页][web_ _request _post_get_ _response _]

![在这里插入图片描述][ad380d9541224b9282ecd28dc6c324e0.png]

### 3.同步请求和异步请求Ajax，以及异步的Json响应 ###

[从 Jsp同步请求 到 Ajax 的 axios 的异步请求，以及异步标准响应][Jsp_ _ Ajax _ axios]  
![在这里插入图片描述][5b7869b5011547acb974bd4d0267b96a.png]

### 4.同步jsp和异步ajax的axios下，转发或重定向思考 ###

[什么时候用转发，什么时候用重定向 & 请求request，响应response][_ _request_response]

![在这里插入图片描述][8f80373cca2c435890e0b2a927793b5a.png]

## 浏览器发送请求 ##

### 1.浏览器地址栏发送请求----全是get ###

方法全是get

![在这里插入图片描述][1f476789324d48c88e2dc86ec15f99ea.png]

http://localhost:8080/day06/opus/updatePage/vue/update?id=47

### 2.form表单：可以是get或post ###

![在这里插入图片描述][3462ed98d3d849b3beeacec2f5baa38d.png]

一个form表单的get方法案例：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>图书添加页面</title>
    </head>
    <body>
    <h1>添加图书信息</h1>
    
    <form action="/day06/opus/addMess" method="get">
        书名：<input type="text" name="name"><br>
        简介：<input type="text" name="intro"><br>
        类型：
    <%--    用forEach把类型信息拼出来--%>
        <select name="typeId">
            <c:forEach items="${bookTypes}" var="type">
                <option value="${type.id}">${
        type.name}</option>
            </c:forEach>
        </select><br>
        <span style="color: darkred">${
        msg}</span>
        <br>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>
    </body>
    </html>

get方法的案例

### 3.超链接：等价于浏览器地址栏—get ###

![在这里插入图片描述][3a401910a4c44f559630d2d0c4e85025.png]

## 服务器响应 ##

### 1.响应静态页面：webapp下的静态资源； ###

![在这里插入图片描述][bf4c0f2fee2542dbbf683977a1c6cbc7.png]

### 2.Servlet处理：resp.getWriter().write(“xxxxxxxxxx”)； ###

配置resp.setContentType(“text/html;charset=utf-8”);  
![在这里插入图片描述][97af179e628042bcb4d1bdd994099656.png]

// 解决中文的显示问题
    response.setCharacterEncoding("UTF-8"); // 设置成编码
    response.setContentType("text/html;charset=utf-8"); // 展示的方式
    response.getWriter().write("<h2>inputSuccess<h2>");

### 3.Servlet处理：重定向 resp.sendRedirect(“/path”) ###

既可以重定向到servlet，也可以重定向到jsp，让浏览器直接执行该地址

![在这里插入图片描述][31a4d105b8cc4bce986b724702065c7c.png]

resp.sendRedirect(req.getContextPath()+"/news/list.jsp");

### 4.Servlet处理：内部转发—servlet或jsp ###

共享数据，传到下一个servlet或者jsp  
![在这里插入图片描述][ae9b09c27d3346abab4469bf1538964a.png]

req.getRequestDispatcher("/news/list").forward(req, resp);

### 5.Servlet处理：异步Ajax的标准响应格式Json ###

import com.alibaba.fastjson.JSON;
    
    resp.setContentType("application/json;charset=utf-8");
    resp.getWriter().write(
    		JSON.toJSONString(
    				new ResData(3001, "不能删除别人", null)));

## 应用案例 ##

![在这里插入图片描述][e55a7b4ca39c4f74bfb0b1c58c047706.png]

### 1.同步请求的案例 ###

同步的登录和注册的实现，以及用session进行登录信息的保存：

[同步登陆+注册—— 登陆 和 注册功能 的实现 & 从html 到 jsp 迭代升级 & session保存登陆信息][_ _ _ _ _ _html _ jsp _ _ session]

![在这里插入图片描述][cf9336399c1c45869a723f51aa94b3ed.png]

同步请求下，数据list显示到前端，分页显示，以及数据的增删改查

[用Jsp语法 到 实现数据的分页展示 到 只看自己的数据 + 模糊查询 & 迭代升级][Jsp_ _ _ _ _ _ _ _]

[用Jsp语法实现同步请求的 增删改查 + 删除权限控制][Jsp_ _ _]

![在这里插入图片描述][f0715bc9d0aa4207b6437369b7411af1.png]

### 2.异步请求的案例 ###

用异步实现登陆和注册功能，以及在异步请求中遇到的bug汇总  
[异步登陆+注册——登陆和注册功能 的 迭代升级 & 从Jsp到JavaScript + axios + vue & 诸多bug & 同步到异步][_ _ _ _Jsp_JavaScript _ axios _ vue _ _bug _]

![在这里插入图片描述][69f7fad0c0234f39a3c7d95599f743cd.png]  
异步分页显示，到增删改查全流程实现，以及同步异步在增删改查方法的流程的区别分析

[Tomcat异步分页+增删改查——从同步到异步 & 从jsp 到 js + axios + vue 实现 数据分页显示 & 数据增删改查][Tomcat_ _ _jsp _ js _ axios _ vue _ _ _]

![在这里插入图片描述][27aad270bb824f27878801f376b47528.png]

--------------------

## 总结 ##

javaweb开发相关背景知识；  
浏览器请求和服务器响应方式总结；  
同步和异步的登录注册，分页显示，增删改查案例；

[ad10ce4e28914d3aaa10e941924e075e.png]: https://img-blog.csdnimg.cn/ad10ce4e28914d3aaa10e941924e075e.png
[5545c06d0099422c8139c460097f4692.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/a8bfe3ec288a409e8cef313e831ec6e3.png
[Servlet_ _ Web_ _ _304_ _ JavaWeb]: https://blog.csdn.net/Pireley/article/details/130918646
[bc6a1e630e2c44789bce42eae04c0778.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/de7d18baa28a427798b06613a1e2d886.png
[web_ _request _post_get_ _response _]: https://blog.csdn.net/Pireley/article/details/130922734
[ad380d9541224b9282ecd28dc6c324e0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/f0bea5f69e1d43788ee78152b11a52b0.png
[Jsp_ _ Ajax _ axios]: https://blog.csdn.net/Pireley/article/details/131142137
[5b7869b5011547acb974bd4d0267b96a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/dcb163e5aa624a06a783fc9c05500419.png
[_ _request_response]: https://blog.csdn.net/Pireley/article/details/131062035
[8f80373cca2c435890e0b2a927793b5a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/53cd3909278d468299772e9361841aee.png
[1f476789324d48c88e2dc86ec15f99ea.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/a63aa3110ab44fc4a43923cac8af063b.png
[3462ed98d3d849b3beeacec2f5baa38d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/c0b9c1951e8b4b4594fbc9757db710a2.png
[3a401910a4c44f559630d2d0c4e85025.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/f9a501e140e346a8ba3839eef5534259.png
[bf4c0f2fee2542dbbf683977a1c6cbc7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/29c6bbdbe39b4b46861fdce26db6e9af.png
[97af179e628042bcb4d1bdd994099656.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/053242bd71d641eeb993b1518476bc30.png
[31a4d105b8cc4bce986b724702065c7c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/12cf720b6c074f17a84cc661a96ae765.png
[ae9b09c27d3346abab4469bf1538964a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/8c410ef67d614066badb953562f7a291.png
[e55a7b4ca39c4f74bfb0b1c58c047706.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/4a8b0f471b714839bbebf67f51cc87b7.png
[_ _ _ _ _ _html _ jsp _ _ session]: https://blog.csdn.net/Pireley/article/details/130994390
[cf9336399c1c45869a723f51aa94b3ed.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/b452a1742dcb4998ba765ceeeb860e71.png
[Jsp_ _ _ _ _ _ _ _]: https://blog.csdn.net/Pireley/article/details/131084540
[Jsp_ _ _]: https://blog.csdn.net/Pireley/article/details/131195220
[f0715bc9d0aa4207b6437369b7411af1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/88bb3dc1949b4c7caa1fa9e1289dc9ce.png
[_ _ _ _Jsp_JavaScript _ axios _ vue _ _bug _]: https://blog.csdn.net/Pireley/article/details/131143555
[69f7fad0c0234f39a3c7d95599f743cd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/81797b1f23284d779d1e61ff83da14ca.png
[Tomcat_ _ _jsp _ js _ axios _ vue _ _ _]: https://blog.csdn.net/Pireley/article/details/131160087
[27aad270bb824f27878801f376b47528.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/a7dbdb1acabd4861a405f35efadcc5d6.png