目录
一、Tomcat
HTTP服务器(读取HTTP请求+解析HTTP请求;构造HTTP响应+发送HTTP响应)
Servlet容器(遵守Servlet标准,按照标准调用对应方法进行处理)
二、IDEA配置Tomcat
先提前下载好Tomcat
下载地址https://download.csdn.net/download/qq_46235384/85577195
1.IDEA新建一个Maven项目
2.写项目的名称然后finish
3.在pom.xml中插入依赖并把<properties></properties>中的版本改为1.8
<dependencies>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>
</dependencies>
4.修改完成后点击下面的图标
5.目录格式改成下面这样
6.在WEB-INF文件夹下新建一个web.xml文件,写入下面内容
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1"
metadata-complete="false">
</web-app>
7.在setting下的Plugins 中搜索tomcat就会出现我们需要下载的插件,下载就可以
8.下载完成后点击下面的内容开始配置
9.点击+选择smart Tomcat
10.点击configuration
11.在这里选择刚开始下载的Tomcat文件夹,选中的文件夹的下一级必须是包含bin等其他目录的
12.如下配置,记好标红的部分
13.配置成功会出现下面的图标
14.启动Tomcat,控制台出现就说明配置成功
例子
新建一个first-web项目,在webapp文件夹下建立相同的目录,hello.html文件中引入了script.js文件,script.js文件中使用students.json文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="js/script.js"></script>
</body>
</html>
// 利用这个对象发起 HTTP 请求
var xhr = new XMLHttpRequest();
xhr.open("get", "data/students.json");
// 以时间驱动的方式,读取响应 —— 当 xhr 完成响应时,执行我们准备好的函数
xhr.onload = function () {
console.log(this); // this 就是 xhr 对象
console.log(this.responseText); // string 类型
console.log(xhr.responseText); // string 类型
// 我们希望把 json 字符串解析成 js 的具体数据类型
var sts = JSON.parse(this.responseText);
console.log(sts);
var body = document.querySelector("body");
for(var i in sts){
var st = sts[i];
body.innerHTML += `<div>${st,name}</div>`;
}
}
xhr.send(); // 发送 HTTP 请求
[
{
"name": "小明",
"gender": 2
},
{
"name": "小张",
"gender": 3
},
{
"name": "小王",
"gender": 4
}
]
在浏览器地址栏中输入127.0.0.1:8080/first-web/hello.html,网络面板中显示
控制台会输出
整个的流程
1.用户在浏览器输入 /ajax.html回车
2.浏览器分析用户的输入,构建HTTP请求,使用GET方法
3.Tomcat收到请求,根据用户输入的资源路径找到对应的文件webapp/ajax.html,读取内容,准备响应并发送响应(200 OK Content-Type是text/html)
4.读取响应体,根据Content-Type决定按照html方式对待内容,解析HTML中的标签
5.在解析过程中,发现<script src ="...."></script>,构造一个新的HTTP请求,此时还是GET方法
6.Tomcat根据资源路径,找到对应的文件,读取内容,准备HTTP响应(200 OK Content-Type是application/javascript....)
7.浏览器读取响应体,根据Content-Type执行JS代码,实例化xhr对象,浏览器构建HTTP请求,此时是GET方法
8.Tomcat根据资源路径,找到对应的文件,读取内容,准备HTTP响应(200 OK Content-Type是application/json....)
9.浏览器读取响应,执行JS代码中的xhr.onload()函数,遍历对象并且DOM树
10.浏览器得到最终的DOM结构,显示内容
11.用户看到网页的最终形式
三、构建HTTP请求GET方法和POST方法
1.构建GET方法
地址栏直接输入url,通过一些标签<img>、<script>、<link>、<a>、form表单、ajax请求、重定向
1.1<img>标签
<img src="data/students.json">
1.2<script>标签
<script src="data/students.json"></script>
1.3<link>标签
<link rel="stylesheet" href="data/students.json">
1.4<a>标签
<a href="data/students.json">XXX</a>
点击之后
1.5form表单
<form action="data/students.json">
<button>提交</button>
</form>
点击之后
2.构建POST方法
form表单、ajax请求、重定向
2.1form表单
<form method="post" action="data/students.json">
<button>提交</button>
</form>