回顾

1. json
    JavaScript对象表示形式，简单易懂，现在作为互联网传输数据的载体
    语法格式：
        let user = {"name":"jack"};
        let array = [
            {"name":"jack"},
            {"name":"jack"}
        ]
        let weiXiaoBao = {
            "age":18,
            "array":[{},{}],
            "shifu":"陈近南"
        }
2. ajax【课程深入后，理解程度会更深入】
    是前端提供：异步提交和局部刷新的技术，提高用户体验
    用户名校验是否存在案例
        原生ajax（了解）
        ajax提供ajax插件【掌握】
            $.ajax(); 发送get、post
            $.get()
            $.post()

3. 搜索案例
    模拟百度搜索效果....

Tomcat&Http

今日目标

1. web知识概述

2. tomcat【重点】

3. http协议【了解名词】
    请求
    响应

一 Web知识概述

JavaWeb：将编写好的java代码，发布到互联网，可以让所有用户访问到...

1.1 软件架构

• 网络中有很多的计算机，它们直接的信息交流，我们称之为：交互
• 在互联网交互的过程的有两个非常典型的交互方式——B/S 交互模型（架构）和 C/S 交互模型（架构）

C/S架构

Client/Server 客户端/服务器

访问服务器资源必须安装客户端软件

例如: QQ，绝地求生，LOL

B/S架构

Browser/Server 浏览器/服务器

访问服务器资源不需要专门安装客户端软件,而是直接通过浏览器访问服务器资源.

例如: 天猫、京东、知乎网站

1.2 Web服务器作用

• 开发者通过web服务器可以把本地==资源==发布到互联网

• 用户就可以通过浏览器访问这些资源

1.3 资源的分类

资源：计算机中数据文件

静态资源

• 对于同一个页面,不同用户看到的内容是一样的。
  • 例如：体育新闻、网站门户等，常见后缀：*.html、*.js、*.css

动态资源

• 用对于同一个页面,不同用户看到的内容可能不一样。
  • 例如：购物车、我的订单等，常见后缀：*.jsp、*.aspx、*.php

1.4 常见的Web服务器

* Tomcat: Apache组织开源免费的web服务器,支持JavaEE规范（Servlet/Jsp）.

* Jetty:Apache组织开源免费的小型web服务器,支持JavaEE规范.

* JBoss: RedHat红帽公司的开源免费的web服务器,支持JavaEE规范.

* Glass Fish:Sun公司开源免费的web服务器,支持JavaEE规范.

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

* WebLogic: Oracle公司收费的web服务器,支持JavaEE规范.

* WebSphere:IBM公司收费的web服务器,支持JavaEE规范.

JavaEE规范

​ 在Java中所有的服务器厂商都要实现一组Oracle公司规定的接口，这些接口是称为JavaEE规范。不同厂商的JavaWeb服务器都实现了这些接口，在JavaEE中一共有13种规范。实现的规范越多，功能越强。

二 Tomcat服务器【重点】

2.1 Tomcat使用

2.1.1 下载

Tomcat 官网下载地址：https://tomcat.apache.org/download-80.cgi

2.1.2 安装（强烈建议）

绿色免安装版，解压即用（注意：不要有中文路径）

2.1.3 目录结构

2.1.4 启动和关闭

==在tomcat黑窗口内部ctrl+c 二次，表示正常关闭==

2.1.5 启动报错问题【经验值】

① Java环境变量

现象: 黑窗口一闪而过(不到半秒)

解决:
配置好Java环境变量
JAVA_HOME
Path

② 8080端口被占用

现象：启动时报错（黑框口等了一会就关闭）

暴力：找到占用的端口号的对应进程，杀死进程

cmd命令：netstat -ano | findstr "8080"

进入到任务管理器，找到它，干掉它

温柔：修改Tomcat端口号

进入Tomcat安装目录/conf/server.xml 文件修改

==注意：如果是其他软件占用了8080，你可以直接修改这一个就行...==

==注意：如果你想启动多个tomcat的话，需要修改三个端口号==

端口号：个人指定范围：1024~65535之间，只要不与其他软件冲入即可

③ 访问测试

==在整个web阶段我们使用的就是tomcat默认端口：8080==

2.1.6 发布项目三种方式

① webapps 部署(最简单)

直接放置在 webapps 目录下

==这种方案(支持热更新)，一般在开发完毕后，来使用的》。。。。==

② server.xml部署（了解）

在tomcat/conf/server.xml中找到<Host>标签，添加<Context>标签

缺点

1.配置文件修改完毕后，需要重启后生效...

2.server.xml是tomcat的核心配置文件，如果稍有不慎操作失误，整个tomcat启动失败

3.这种方案作为了解即可

③ 独立xml部署(开发时使用)

在tomcat/conf/Catalina/localhost 目录下创建一个xml文件，添加<Context>标签

文件名就是虚拟路径

2.2 Web项目结构

1. 前端项目
        |-- myapp(项目名称)
            |-- css 目录
            |-- js  目录
            |-- html目录
            |-- img 目录
            |-- index.html
            
2. web项目
        |-- myapp（项目名称）
            |-- 静态资源（html、css、js、img）
            |-- WEB-INF 目录（浏览器无法直接访问内部的资源）
                |-- classes 目录（java的字节码文件）
                |-- lib     目录（当前项目所需要的第三方jar包）
                |-- web.xml 文件 （当前项目核心配置文件，servlet3.0可以省略）
            |-- index.html or index.jsp

2.3 Idea中使用Tomcat【重中之重.....】

2.3.1 配置Tomcat

再次点击，确定是否配置成功...

2.3.2 创建Web项目

2.3.2 发布Web项目

image

[图片上传失败...(image-88f02e-1587711470954)]

2.3.4 页面资源热更新

[图片上传失败...(image-3fde74-1587711470954)]

2.3.5 经验值分享

[图片上传失败...(image-128e65-1587711470954)]

三 Http协议【整体感知】

接下来web核心的11课程，都是http协议来讲解

3.1 Http协议概述

超文本传输协议（Hyper Text Transfer Protocol)是互联网上应用最为广泛的一种网络协议。

传输协议：在客户端和服务器端通信时，规范了传输数据的格式

1586761576583

3.1.1 chrome(谷歌)——按键f12

3.1.2 firefox(火狐)——按键f12

3.2 Http请求

3.2.1 浏览器查看Http请求协议

① get方式

② post方式

3.2.2 HTTP请求消息格式

① 请求行

* 格式
        请求方式 请求路径 协议/版本号
        
* 例如
        POST /day07_myapp/static/login.html HTTP/1.1
        GET /day07_myapp/static/login.html?username=jack&password=123 HTTP/1.1
        
* 请求方式区别
    get
        1.请求参数在地址栏显示（请求行）
        2.请求参数大小有限制
        3.数据不太安全
    post
        1.请求参数不在地址栏显示（请求体）
        2.请求参数大小没有限制
        3.数据相对安全

② 请求头

* 格式
        请求头名称：请求头的值
* 例如   
        Host: localhost:8080

常见请求头：

        ------------------------------------------（了解）
1. Host: localhost:8080         访问服务器的地址（域名+端口）
        

2. Connection: keep-alive       长连接（http1.1协议）
        

3. Cache-Control: max-age=0     设置缓存数据的存活时间，单位秒
        
        
4. Upgrade-Insecure-Requests:1   客户端支持https加密协议  
            
        ---------------------------------------（重点）

5. Referer: http://baidu.com    上一次请求的地址
        百度推广....    
        防盗链....
        
6. User-Agent:        客户端系统和浏览器版本
        User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) Chrome/63.0 Safari/537.36
        浏览器兼容性
            判断
                谷歌方式一
                IE方式二
                火狐方式三

③ 请求体（正文）

* 格式
        参数名=参数值&参数名=参数值...
* 例如
        username=jack&password=123
        
* 注意：
        get方式没有请求体，post方式才有

3.3 Http响应

3.3.1 浏览器查看Http响应协议

1586759633465

3.2.2 HTTP响应消息格式

① 响应行

* 格式
        协议/版本号 状态码
* 例如
        tomcat8：HTTP/1.1 200
        tomcat7：HTTP/1.1 200 OK
        
* 常见状态码
    --------------- 用户可以正常访问页面
    200 ：表示成功
    
    302 ：重定向
    
    304 ：从缓存中读取数据
    --------------- 用户无法正常访问页面
    404：请求资源未找到（not  found）
    
    405：请求的方法未找到（明天讲了servlet帅哥给大家演示....）
    
    500：服务器内部错误（java代码写错了.....）

② 响应头

* 格式
        响应头名称：响应头的值
* 例如
        Last-Modified: Mon, 13 Apr 2020 06:11:24 GMT

常见响应头：

1. Location：通常与状态码302一起使用，实现重定向操作
        Location:http://www.itcast.cn
        
2. Content-Type：服务器告诉客户端，返回响应体的数据类型和编码方式
        Content-Type:text/html;charset=utf-8
        
3. Content-Disposition：服务器告诉客户端，以什么样方式打开响应体
        * in-line（默认）：浏览器直接打开相应内容，展示给用户
        * attachment;filename=文件名：浏览器以附件的方式保存文件 【文件下载】
        
4. Refresh：在指定间隔时间后，跳转到某个页面
        Refresh:5;http://www.itcast.cn
        
5. Last-Modified：通常与状态码304一起使用，实现缓存机制
        Last-Modified: Mon, 13 Apr 2020 06:11:24 GMT

③ 响应体（正文）

* 服务器返回的数据，由浏览器解析后展示给用户
   用户看到页面所有的内容，都是在响应体中返回的