Java_Web基础--JDBC/HTML/Servelet/Web/JSP/jQuery(你必须要懂得基础)

古城微笑少年丶 2022-09-21 05:53 236阅读 0赞

风离紫竹--tryzq521@126.com

<table style="width:841px"> 
 <tbody> 
  <tr> 
   <td style="width:99.52437574316289%"> <h1>01_JDBC</h1> <strong>作者：</strong> 风离紫竹--tryzq521@126.com</td> 
  </tr> 
 </tbody> 
</table>

1.为什么需要JDBC技术？

帮助Java程序连接数据库

![Image 1][]

2.JDBC概述

①不同数据库之间存在实现上的差异

![Image 1][]

②JDBC提供访问数据库的统一标准

![Image 1][]

③面向接口编程

在程序开发过程中，根据接口中定义的方法对不同的实现类进行操作

\[1\]屏蔽不同实现类之间的差异。

\[2\]当底层实现类发生改变时，上层对实现类的调用不需要改变。

④数据库驱动：在程序中体现为导入第三方jar包

![Image 1][]

⑤不建议直接操作数据库驱动实现类

![Image 1][]

3.JDBC操作的步骤

![Image 1][]

4.获取数据库连接

①连接数据库服务器需要提供四个基本信息

\[1\]连接数据库的用户名

\[2\]连接数据库的密码

\[3\]要连接的目标数据库的URL地址

![Image 1][]

\[4\]数据库驱动全类名

②URL地址格式

\[1\]例子

<table style=""> 
 <tbody> 
  <tr> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:99.88109393579072%"> 
    <div>
      &lt;util:map id="dbProps"&gt; 
    </div> 
    <div>
      &nbsp; &nbsp; &lt;entry key="db.driver" value="com.mysql.jdbc.Driver"/&gt; 
    </div> 
    <div>
      &nbsp; &nbsp; &lt;entry key="db.jdbcurl" value=" 
     <strong><span style="color:rgb(79,0,154)">jdbc:mysql://localhost:3306/world</span></strong>"/&gt; 
    </div> 
    <div>
      &nbsp; &nbsp; &lt;entry key="db.username" value="myuser"/&gt; 
    </div> 
    <div>
      &nbsp; &nbsp; &lt;entry key="db.password" value="mypass"/&gt; 
    </div> 
    <div>
      &lt;/util:map&gt; 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

\[2\]格式

![Image 1][]

③注册JDBC驱动

<table style=""> 
 <tbody> 
  <tr> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:99.88109393579072%"> 
    <div>
      static { 
    </div> 
    <div>
      &nbsp; &nbsp; try { 
    </div> 
    <div>
      &nbsp; &nbsp; &nbsp; &nbsp; java.sql.DriverManager.registerDriver(new Driver()); 
    </div> 
    <div>
      &nbsp; &nbsp; } catch (SQLException E) { 
    </div> 
    <div>
      &nbsp; &nbsp; &nbsp; &nbsp; throw new RuntimeException("Can't register driver!"); 
    </div> 
    <div>
      &nbsp; &nbsp; } 
    </div> 
    <div>
      } 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

Class.forName()执行时会将全类名对应的类所在的.class字节码文件加载到内存中，当一个类被加载到内存中时会执行静态代码块中的内容，从而注册驱动。

④获取Connection对象

<table style=""> 
 <tbody> 
  <tr> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:99.87293519695044%"> 
    <div>
      public static Connection getConnection(String url, 
    </div> 
    <div style="margin-left:40px">
      String user, 
    </div> 
    <div style="margin-left:40px">
      String password)&nbsp;throws SQLException 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

注意：需要导入MySQL驱动的jar包——mysql-connector-java-5.1.7-bin.jar

●导入第三方jar包

\[1\]在Java工程根目录下创建lib目录

\[2\]将第三方jar包复制到lib目录下

\[3\]在jar文件上点右键→Build Path→Add To Build path

5.Statement接口

①代表：SQL语句指令

②对象获取：Statement java.sql.Connection.createStatement()

③功能：执行SQL语句

\[1\]增删改：int executeUpdate (String sql)

\[2\]查询：ResultSet executeQuery(String sql)

④缺陷

\[1\]拼SQL语句中的参数时非常繁琐，容易出错

\[2\]存在SQL注入问题

6.ResultSet接口

①代表：执行SQL语句查询数据库后的结果的集合

②对象获取：ResultSet executeQuery(String sql)

③结构

<table style=""> 
 <tbody> 
  <tr> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:99.88109393579072%"> 
    <ul> 
     <li>A <code>ResultSet</code> object maintains a cursor pointing to its current row of data<br> 一个ResultSet对象维护了一个指向数据中当前行的游标/指针。</li> 
     <li>Initially the cursor is positioned before the first row<br> 在刚开始的时候这个游标的位置是第一行的前面</li> 
    </ul> </td> 
  </tr> 
 </tbody> 
</table>

![Image 1][]

The `next` method moves the cursor to the next row  
next()方法将游标移动到下一行

![Image 1][]

*  and because it returns `false` when there are no more rows in the `ResultSet` object  
    当游标移动后，发现ResultSet对象中没有数据时，next()方法会返回false
 *  The `ResultSet` interface provides *getter* methods (`getBoolean`,`getLong`, and so on) for retrieving column values from the current row

ResultSet接口提供了很多重载的getXxx()方法，在当前行中查询列的值

![Image 1][]

*  Values can be retrieved using either the index number of the column or the name of the column

值可以通过列的索引或列名来获取

*  Columns are numbered from 1

索引值从1开始

![Image 1][]

7.PreparedStatement接口

①代表：预编译SQL语句

②对象获取：PreparedStatement prepareStatement (String sql)

注意：此时需要传入SQL语句字符串

③特点：支持在SQL语句中使用“?”作为占位符，用于动态传入参数的值

④传入占位符参数的具体值

parameterIndex表示参数的索引，x是具体的值。

⑤执行SQL语句

\[1\]增删改：executeUpdate()

\[2\]查询：executeQuery()

8.Dao

Data Access Object数据访问对象

通常在操作数据库时，将数据库操作封装到Dao类中

9.练习

①登录

检查用户名、密码是否正确

boolean UserDao. **login**(String userName,String userPwd);

true：表示登录成功

false：表示登录失败

②注册

\[1\]检查用户名是否被占用

boolean UserDao. **checkUserName**(String userName);

true：表示用户名被占用——不能注册

false：表示用户名没有被占用——可以注册

\[2\]在用户名可用的情况下保存用户信息

void UserDao. **saveUser**(String userName,String userPwd);

<table style="width:841px"> 
 <tbody> 
  <tr> 
   <td style="width:99.52437574316289%"> <h1>02_HTML</h1> <strong>作者：</strong> 风离紫竹--tryzq521@126.com</td> 
  </tr> 
 </tbody> 
</table>

1.网页：WebApplication的界面

![Image 1][]

Web2.0标准的思想将网页划分成三个组成部分

①结构：网页上要显示的数据，由HTML定义的

②表现：网页上数据的显示方式，由CSS定义的

③行为：网页对用户操作的响应，由JavaScript实现的

2.HTML概述

①含义

Hyper Text Markup Language

超文本标记语言

②超文本：网页上的超链接

③标记：标签

成对的标签：<p>这是一个段落</p>段落标签

单标签：<br/>换行标签

3.HelloWorld

![Image 1][]

4.HTML VS XML

①HTML是用于显示数据：数据最终是给人看的

②XML是用于保存或组织数据：数据最终是给程序看的

5.在Eclipse中使用HTML

①创建static web project

②在WebContent目录下创建HTML文件

③编辑

④查看结果：HTML文件上点右键→open with→Web Browser

<table style="width:841px"> 
 <tbody> 
  <tr> 
   <td style="width:99.52437574316289%"> <h1>03_Servlet</h1> <strong>作者：</strong> 风离紫竹--tryzq521@126.com</td> 
  </tr> 
 </tbody> 
</table>

1. **W**hy？为什么要使用Servlet？

![Image 1][]

目的：通过使用Servlet在Java程序中接收浏览器 **请求**，并给浏览器返回 **响应**数据。

2. **W**hat？什么是Servlet？

①含义：Server+let=Servlet服务器端的小程序

②从API角度：javax.servlet.Servlet接口及其实现类

![Image 1][]

3.Ho **w**？如何使用Servlet？

①使用Servlet接口

\[1\]使用接口的传统的方法

(1)创建实现类，让实现类实现接口

(2)创建实现类的对象

(3)调用实现类对象的方法

\[2\]Servlet接口

(1)创建实现类

(2)Servlet实现类的对象是交给“Servlet容器”来创建的，此时必须将Servlet实现类在动态Web工程的web.xml文件中注册才行

<table style=""> 
 <tbody> 
  <tr> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:99.88109393579072%"> 
    <div> 
     <span style="font-family:Consolas; font-size:18px; color:#3F5FBF"><span style="font-size:16pt">&lt;!-- 注册</span><span style="font-size:16pt"><u>Servlet</u></span><span style="font-size:16pt">。目的：让</span><span style="font-size:16pt"><u>Servlet</u></span><span style="font-size:16pt">容器创建</span><span style="font-size:16pt"><u>Servlet</u></span><span style="font-size:16pt">对象，并将浏览器请求的地址和</span><span style="font-size:16pt"><u>Servlet</u></span><span style="font-size:16pt">关联起来 --&gt;</span></span> 
    </div> 
    <div> 
     <span style="font-family:Consolas; font-size:18px; color:#3F5FBF"><span style="font-size:16pt">&lt;!-- 1.</span><span style="font-size:16pt"><u>Servlet</u></span><span style="font-size:16pt">实现类全类名的声明 --&gt;</span></span> 
    </div> 
    <div> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&lt;</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#3F7F7F"><span style="font-size:16pt">servlet</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&gt;</span></span> 
    </div> 
    <div> 
     <span style="font-family:Consolas; font-size:18px"><span style="font-size:16pt">&nbsp;&nbsp;&nbsp;&nbsp;</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#3F5FBF"><span style="font-size:16pt">&lt;!-- 给</span><span style="font-size:16pt"><u>Servlet</u></span><span style="font-size:16pt">指定一个简短的“友好名称”，便于引用 --&gt;</span></span> 
    </div> 
    <div> 
     <span style="font-family:Consolas; font-size:18px"><span style="font-size:16pt">&nbsp;&nbsp;&nbsp;&nbsp;</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&lt;</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#3F7F7F"><span style="font-size:16pt">servlet-name</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&gt;</span></span> 
     <span style="font-family:Consolas; font-size:18px"><span style="font-size:16pt">HelloWorldServlet</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&lt;/</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#3F7F7F"><span style="font-size:16pt">servlet-name</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&gt;</span></span> 
    </div> 
    <div> 
     <span style="font-family:Consolas; font-size:18px"><span style="font-size:16pt">&nbsp;&nbsp;&nbsp;&nbsp;</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&lt;</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#3F7F7F"><span style="font-size:16pt">servlet-class</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&gt;</span></span> 
     <span style="font-family:Consolas; font-size:18px"><span style="font-size:16pt">com.atguigu.servlet.HelloWorldServlet</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&lt;/</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#3F7F7F"><span style="font-size:16pt">servlet-class</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&gt;</span></span> 
    </div> 
    <div> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&lt;/</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#3F7F7F"><span style="font-size:16pt">servlet</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&gt;</span></span> 
    </div> 
    <div> 
     <span style="font-family:Consolas; font-size:18px; color:#010101"><span style="font-size:16pt"><br> </span></span> 
    </div> 
    <div> 
     <span style="font-family:Consolas; font-size:18px; color:#3F5FBF"><span style="font-size:16pt">&lt;!-- 2.访问</span><span style="font-size:16pt"><u>Servlet</u></span><span style="font-size:16pt">的</span><span style="font-size:16pt"><u>url</u></span><span style="font-size:16pt">地址和</span><span style="font-size:16pt"><u>Servlet</u></span><span style="font-size:16pt">建立关联关系 --&gt;</span></span> 
    </div> 
    <div> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&lt;</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#3F7F7F"><span style="font-size:16pt">servlet-mapping</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&gt;</span></span> 
    </div> 
    <div> 
     <span style="font-family:Consolas; font-size:18px"><span style="font-size:16pt">&nbsp;&nbsp;&nbsp;&nbsp;</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&lt;</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#3F7F7F"><span style="font-size:16pt">servlet-name</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&gt;</span></span> 
     <span style="font-family:Consolas; font-size:18px"><span style="font-size:16pt">HelloWorldServlet</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&lt;/</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#3F7F7F"><span style="font-size:16pt">servlet-name</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&gt;</span></span> 
    </div> 
    <div> 
     <span style="font-family:Consolas; font-size:18px"><span style="font-size:16pt">&nbsp;&nbsp;&nbsp;&nbsp;</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&lt;</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#3F7F7F"><span style="font-size:16pt">url-pattern</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&gt;</span></span> 
     <span style="font-family:Consolas; font-size:18px"><span style="font-size:16pt">/GoodUrl</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&lt;/</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#3F7F7F"><span style="font-size:16pt">url-pattern</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&gt;</span></span> 
    </div> 
    <div> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&lt;/</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#3F7F7F"><span style="font-size:16pt">servlet-mapping</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&gt;</span></span> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

(3)在服务器接收到浏览器请求后，会自动调用Servlet实现类对象的指定方法

②使用Eclipse自动生成Servlet

<table style="width:841px"> 
 <tbody> 
  <tr> 
   <td style="width:99.52437574316289%"> <h1>04_HTTP协议</h1> <strong>作者：</strong> 风离紫竹--tryzq521@126.com</td> 
  </tr> 
 </tbody> 
</table>

1.作用：定义浏览器和服务器之间交互时，请求和响应的数据格式。

2.请求的数据格式

![Image 1][]

①请求行：请求方式 URL地址 HTTP协议版本

②请求消息头：当前请求需要告诉服务器的相关信息

③请求体：POST请求发送的请求参数

![Image 1][]

④GET请求和POST请求的区别

<table style=""> 
 <tbody> 
  <tr> 
   <td style="border:1px solid rgb(211,211,211); padding:10px; margin:0px; width:34.720570749108205%"> &nbsp;</td> 
   <td style="border:1px solid rgb(211,211,211); padding:10px; margin:0px; width:20.689655172413794%"> GET</td> 
   <td style="border:1px solid rgb(211,211,211); padding:10px; margin:0px; width:44.470868014268724%"> POST</td> 
  </tr> 
  <tr> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:25%"> 请求参数 浏览器地址栏是否可见</td> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:25%"> 可见</td> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:50%"> 不可见</td> 
  </tr> 
  <tr> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:25%"> 请求参数的位置</td> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:25%"> 附着在URL地址后面</td> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:50%"> 请求体中</td> 
  </tr> 
  <tr> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:25%"> 发送请求参数数据容量</td> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:25%"> 有限制</td> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:50%"> 无限制</td> 
  </tr> 
 </tbody> 
</table>

3.响应的数据格式

![Image 1][]

①响应状态行：协议版本 响应状态码 响应状态说明

\[1\]响应状态码的作用：告诉浏览器，服务器对你的请求处理的结果

\[2\]常见的响应状态码

200：表示服务器成功响应请求

302：表示重定向

404：表示找不到资源

500/505：服务器内部错误

……

②响应消息头：服务器要告诉浏览器的关于当前响应数据的信息。告诉浏览器如何解析当前响应数据。

响应数据：商品

响应消息头：产品说明书

③响应体：真正要在浏览器窗口中显示的内容

![Image 1][]

\*如果是Android程序请求的响应，通常应该是Servlet返回的JSON数据，而不是一个页面。

④404错误产生的原因

\[1\]路径错误，目标资源确实不存在。

\[2\]访问了WEB-INF目录下的资源，而WEB-INF目录下的资源是不允许浏览器直接访问的。

\[3\]web.xml配置文件有错误，在Web应用启动时就在控制台抛出了异常，此时任何资源都不能访问。

\[4\]服务器端缓存造成的，清理服务器端缓存即可。

(1)停止服务器

![Image 1][]

(2)移除全部Web应用工程

![Image 1][]

<table style="width:841px"> 
 <tbody> 
  <tr> 
   <td style="width:99.52437574316289%"> <h1>05_Web应用中请求和响应的中文乱码问题</h1> <strong>作者：</strong> 风离紫竹--tryzq521@126.com</td> 
  </tr> 
 </tbody> 
</table>

1.请求

①GET请求：找到Tomcat配置文件中的server.xml，在第一个Connector标签内添加如下属性

URL是URI的一种，所以URIEncoding就是设置URL的 **解码**字符集。

\*编码和解码

编码：'a'→10101

解码：10101→'a'

乱码：编码和解码使用的字符集不同

\*在Tomcat的Eclipse镜像中做修改，并不会自动同步到Tomcat原始的解压目录下，如果有需要只能手动修改。

②POST请求：在request.getParameter()方法执行前执行如下代码

\*注意：上述操作一定要在request.getParameter()方法执行前执行，否则无效

2.响应

①针对调用response.getWriter();方法返回响应数据的方式

②解决方式：response.setContentType("text/html;charset=UTF-8");

\[1\]含义：设置响应体数据的解码字符集。Tomcat服务器非常智能，会自动根据“解码”字符集作为编码字符集进行编码。

\[2\]注意：这个操作需要在response.getWriter();方法调用之前执行，否则无效

<table style="width:841px"> 
 <tbody> 
  <tr> 
   <td style="width:99.52437574316289%"> <h1>06_路径问题</h1> <strong>作者：</strong> 风离紫竹--tryzq521@126.com</td> 
  </tr> 
 </tbody> 
</table>

1.相对路径是有问题的

如果转发到一个目标页面，再从目标页面通过相对路径点击超链接，那么就有可能发生问题访问不到资源。

原因是：转发时浏览器地址栏不变，导致到达目标页面时，相对路径的基准有可能是错误的。

2.URL地址的结构

![Image 1][]

3.使用绝对路径

①概念

\[1\]相对路径：没有使用“/”开头的路径

\[2\]绝对路径：使用“/”开头的路径

②事实：对于以“/”开头的绝对路径，浏览器和服务器解析的方式

\[1\]浏览器：会把开头的“/”看成是当前主机地址

\[2\]服务器：会把开头的“/”看成是当前Web应用

③编写绝对路径地址的步骤

\[1\]写开头的“/”

\[2\]判断当前地址是由谁解析的，或者也可以说这个地址是给谁看的

\[3\]如果是给浏览器看的，那么斜杠代表当前主机，在当前主机下面找Web应用

\[4\]如果是给服务器看的，那么斜杠代表当前Web应用，直接在Web应用下找资源

④路径的归类

\[1\]浏览器解析的

HTML标签内的地址

重定向的地址

\[2\]服务器解析的

请求的转发

web.xml中url-pattern的配置

<table style="width:841px"> 
 <tbody> 
  <tr> 
   <td style="width:99.52437574316289%"> <h1>07_JSP</h1> <strong>作者：</strong> 风离紫竹--tryzq521@126.com</td> 
  </tr> 
 </tbody> 
</table>

1.在页面上动态显示错误消息

①HTML

\[1\]长处：便于编写HTML标签

\[2\]短处：不能根据条件进行判断

②Servlet

\[1\]长处：能够动态的根据条件进行判断

\[2\]短处：不能很方便的编写HTML标签

2.JSP概述

①JSP含义：Java Server Page

JSP=HTML+Servlet

JSP就是一个穿着HTML衣服的Servlet

②JSP的HelloWorld

![Image 1][]

③JSP原理和本质\[不需要记\]

\[1\]传统的Java程序：xxx.java→编译→xxx.class→执行

\[2\]JSP：xxx.jsp→翻译→xxx\_jsp.java→编译→xxx\_jsp.class→执行

<table style=""> 
 <tbody> 
  <tr> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:99.88109393579072%"> 工作区\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\work\Catalina\localhost\工程名\org\apache\jsp</td> 
  </tr> 
 </tbody> 
</table>

\[3\]JSP本质：Servlet

(1)证据1：JSP文件翻译后得到的Java源文件中的类继承自javax.servlet.http.HttpServlet

(2)证据2：在全局的web.xml中存在JSP对应的Servlet的注册信息

(3)证据3：JSP翻译得到的类中有与Servlet相似的生命周期方法

3.JSP语法

①JSP模板元素：JSP页面上的HTML标签

②JSP表达式

\[1\]格式：<%=要输出的数据 %>

\[2\]作用：将数据输出到页面上

\[3\]本质：调用了out对象的print()方法，而重载的一系列print()方法中有一个接收Object类型数据的，所以任何数据类型都可以输出。

\[4\]限制：至少要确实是一个数据

③JSP脚本片段

\[1\]格式：<% Java代码 %>

\[2\]作用：执行Java代码

\[3\]本质：直接拿到\_jspService()方法中

\[4\]语法要求

(1)语句结尾必须加分号

(2)Java的方法中不允许写的代码不能写

\[5\]注意：JSP表达式和JSP脚本片段中的代码可以是不完整的，但所有脚本片段和表达式中的代码组合在一起后必须是完整的。

④JSP注释

<table style="width:841px"> 
 <tbody> 
  <tr> 
   <td style="width:99.52437574316289%"> <h1>08_会话控制</h1> <strong>作者：</strong> 风离紫竹--tryzq521@126.com</td> 
  </tr> 
 </tbody> 
</table>

1.保持登录等用户状态

HTTP协议是一个无状态的协议，每次发送请求都是建立独立的连接，上一次请求和这一次请求之间没有任何关系。需要借助会话控制技术识别用户状态。

结论： **要在整个会话过程中保持数据不丢失，只需要将数据保存到Session对象的属性域中即可**。

2.情景举例

一个咖啡厅要进行一次促销活动。顾客累计消费5杯咖啡就赠送一杯。具体应该如何操作呢？

①咖啡厅的服务员无法靠记忆识别每一个顾客——无状态。

②办会员卡：在顾客的卡片上记录消费的数量——Cookie。

③办会员卡：在顾客的卡片上只记录顾客的编号，根据编号在自己咖啡店的电脑中记录消费的数量——Session。

3.Cookie

①工作机制

\[1\]“办卡”：创建Cookie对象

\[2\]“发卡”：将Cookie数据返回给浏览器

(1)response.addCookie(cookie);

(2)响应消息头

<table style=""> 
 <tbody> 
  <tr> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:99.88109393579072%"> 
    <div>
      键 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;值 
    </div> 
    <div>
      Set-Cookie&nbsp; &nbsp; myCookieName=myCookieValue 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

\[3\]“带卡”：浏览器携带Cookie访问服务器

<table style=""> 
 <tbody> 
  <tr> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:99.88109393579072%"> 
    <div>
      键 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 值 
    </div> 
    <div>
      Cookie&nbsp; &nbsp; myCookieName=myCookieValue 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

\[4\]“读卡”：服务器从请求中读取Cookie的信息

②时效性

\[1\]根据时效性对Cookie进行分类

(1)会话级Cookie\[默认\]：被浏览器保存在内存中，浏览器关闭后释放内存，同时Cookie也会被释放。

(2)持久化Cookie：被浏览器保存在硬盘上，到预先指定的时间时就会被释放。只要还没有到时间就不受浏览器关闭的影响。

\[3\]cookie.setMaxAge(int age);

(1)age<0：将Cookie设置为会话级

(2)age==0：告诉浏览器删除Cookie

(3)age>0：将Cookie设置为持久化Cookie，并保持age秒

3.Session

①工作机制：request.getSession();

\[1\]请求中没有携带JSESSIONID的Cookie

(1)服务器创建一个新的Session对象

(2)创建一个新的Cookie，这个Cookie的name是JSESSIONID，value值是一个唯一值

(3)将JSESSIONID这个Cookie返回给浏览器

\[2\]请求中携带了JSESSIONID的Cookie，那么就会根据这个JSESSIONID的值查找对应的Session对象

(1)能够找到：将找到的Session对象返回给request.getSession()方法的调用者

(2)找不到：就创建新的Session对象，并返回新的JSESSIONID Cookie

\[3\]服务器端是以一个Map形式保存Session对象的

<table style=""> 
 <tbody> 
  <tr> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:50%"> KEY</td> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:50%"> VALUE</td> 
  </tr> 
  <tr> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:50%"> JSESSIONID值</td> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:50%"> Session对象</td> 
  </tr> 
  <tr> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:50%"> 0001</td> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:50%"> session0001</td> 
  </tr> 
  <tr> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:50%"> 0002</td> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:50%"> session0002</td> 
  </tr> 
  <tr> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:50%"> ……</td> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:50%"> ……</td> 
  </tr> 
 </tbody> 
</table>

根据JSESSIONID的值查找以前使用过的Session对象，从而保持会话状态。另外浏览器每次请求服务器时都会携带Cookie也是非常关键的一点。

\[4\]相关API

(1)isNew()：返回boolean值

true：表示当前Session是新创建的

false：表示当前Session不是新创建的

(2)getId()：返回当前Session对象的JSESSIONID值

②时效性管理

\[1\]Session管理的是“空闲”时间。

![Image 1][]

如果Session的空闲状态，超过预先设定的值，那么就会被服务器释放。

\[2\]相关API

(1)默认的最大空闲时间：30分钟

(2)读取：session.getMaxInactiveInterval();

(3)修改：session.setMaxInactiveInterval(int seconds);

(4)立即失效：session.invalidate();

<table style="width:841px"> 
 <tbody> 
  <tr> 
   <td style="width:99.52437574316289%"> <h1>09_Filter</h1> <strong>作者：</strong> 风离紫竹--tryzq521@126.com</td> 
  </tr> 
 </tbody> 
</table>

1.为什么要使用Filter？

在很多情况下，需要在请求到达目标资源之前进行统一的操作。

2.什么是Filter？

过滤器，对Web应用中的请求进行统一的过滤和处理的组件。

javax.servlet.Filter接口

3.如何使用Filter？

①拦截：通过在web.xml配置文件中声明url-pattern元素指定要拦截的目标资源的URL地址

②过滤：根据需要设定过滤条件

③放行：chain.doFilter(..);

4.HelloWorld

![Image 1][]

5.Filter的注册方式

<table style=""> 
 <tbody> 
  <tr> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:99.88109393579072%"> 
    <div> 
     <span style="font-family:Consolas; font-size:18px"><span style="font-size:16pt">&nbsp;&nbsp;&nbsp;&nbsp;</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#3F5FBF"><span style="font-size:16pt">&lt;!-- 注册一个Filter --&gt;</span></span> 
    </div> 
    <div> 
     <span style="font-family:Consolas; font-size:18px"><span style="font-size:16pt">&nbsp;&nbsp;&nbsp;&nbsp;</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&lt;</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#3F7F7F"><span style="font-size:16pt">filter</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&gt;</span></span> 
    </div> 
    <div> 
     <span style="font-family:Consolas; font-size:18px"><span style="font-size:16pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&lt;</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#3F7F7F"><span style="font-size:16pt">filter-name</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&gt;</span></span> 
     <span style="font-family:Consolas; font-size:18px"><span style="font-size:16pt">HelloWorldFilter</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&lt;/</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#3F7F7F"><span style="font-size:16pt">filter-name</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&gt;</span></span> 
    </div> 
    <div> 
     <span style="font-family:Consolas; font-size:18px"><span style="font-size:16pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&lt;</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#3F7F7F"><span style="font-size:16pt">filter-class</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&gt;</span></span> 
     <span style="font-family:Consolas; font-size:18px"><span style="font-size:16pt">com.atguigu.filter.HelloWorldFilter</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&lt;/</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#3F7F7F"><span style="font-size:16pt">filter-class</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&gt;</span></span> 
    </div> 
    <div> 
     <span style="font-family:Consolas; font-size:18px"><span style="font-size:16pt">&nbsp;&nbsp;&nbsp;&nbsp;</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&lt;/</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#3F7F7F"><span style="font-size:16pt">filter</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&gt;</span></span> 
    </div> 
    <div> 
     <span style="font-family:Consolas; font-size:18px"><span style="font-size:16pt">&nbsp;&nbsp;&nbsp;&nbsp;</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&lt;</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#3F7F7F"><span style="font-size:16pt">filter-mapping</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&gt;</span></span> 
    </div> 
    <div> 
     <span style="font-family:Consolas; font-size:18px"><span style="font-size:16pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&lt;</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#3F7F7F"><span style="font-size:16pt">filter-name</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&gt;</span></span> 
     <span style="font-family:Consolas; font-size:18px"><span style="font-size:16pt">HelloWorldFilter</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&lt;/</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#3F7F7F"><span style="font-size:16pt">filter-name</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&gt;</span></span> 
    </div> 
    <div> 
     <span style="font-family:Consolas; font-size:18px"><span style="font-size:16pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span> 
    </div> 
    <div> 
     <span style="font-family:Consolas; font-size:18px"><span style="font-size:16pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#3F5FBF"><span style="font-size:16pt">&lt;!-- ★指定要拦截的目标资源的URL地址 --&gt;</span></span> 
    </div> 
    <div> 
     <span style="font-family:Consolas; font-size:18px"><span style="font-size:16pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&lt;</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#3F7F7F"><span style="font-size:16pt">url-pattern</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&gt;</span></span> 
     <span style="font-family:Consolas; font-size:18px"><span style="font-size:16pt">/target.jsp</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&lt;/</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#3F7F7F"><span style="font-size:16pt">url-pattern</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&gt;</span></span> 
    </div> 
    <div> 
     <span style="font-family:Consolas; font-size:18px"><span style="font-size:16pt">&nbsp;&nbsp;&nbsp;&nbsp;</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&lt;/</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#3F7F7F"><span style="font-size:16pt">filter-mapping</span></span> 
     <span style="font-family:Consolas; font-size:18px; color:#008080"><span style="font-size:16pt">&gt;</span></span> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table style="width:841px"> 
 <tbody> 
  <tr> 
   <td style="width:99.52437574316289%"> <h1>11_JavaScript</h1> <strong>作者：</strong> 风离紫竹--tryzq521@126.com</td> 
  </tr> 
 </tbody> 
</table>

1.为什么要使用JavaScript

为了实现网页上的动态效果。

2.什么是JavaScript？

运行在浏览器上的一门弱类型的解释型脚本语言。

●强类型：

int a = 10;

a = "ss";

●弱类型：

var b = 100;

b = true;

b = "abc";

b = new Object();

●JavaScript引擎：浏览器运行JavaScript程序的内部模块，类似于运行Java程序的JVM。

●JavaScript宿主

○浏览器：运行在浏览器上的JavaScript就是我们通常实现网页特效的JavaScript语言

○服务器：运行在服务器上的JavaScript就是Node.js

3.HelloWorld

①基本语法

②绑定事件响应函数

③为什么要使用window.onload？

④document.getElementById()是干什么的？

4.JSON

①JavaScript中创建数组或对象的数据格式。

②格式描述

\[1\]最外层只能是\[\]或\{\}

\[2\]如果最外层是\[\]，那么称为JSON数组；如果最外层是\{\}，那么称为JSON对象。

\[3\]JSON对象的格式：一组键值对

<table style=""> 
 <tbody> 
  <tr> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:100%"> <span style="font-size:32px">{key<span style="color:rgb(255,0,0)">:</span>value<span style="color:rgb(255,0,0)"><strong>,</strong></span>key<span style="color:rgb(255,0,0)"><strong>:</strong></span>value<span style="color:rgb(255,0,0)"><strong>,</strong></span>...<span style="color:rgb(255,0,0)"><strong>,</strong></span>key<span style="color:rgb(255,0,0)"><strong>:</strong></span>value}</span></td> 
  </tr> 
 </tbody> 
</table>

\[4\]JSON数组的格式：一组值

\[5\]key的类型：只能是字符串，可以不加引号，即使不加引号也不会被识别为变量名，仍然是字符串。但建议使用引号明确它是字符串。

\[6\]value的类型：可以是基本数据类型，也可以是引用类型——JSON对象或JSON数组。

5.绑定事件响应函数

①操作步骤

\[1\]找到要绑定事件响应函数的控件

\[2\]声明事件响应函数

\[3\]将函数的引用赋值给控件对象的事件属性

②类比

<table style=""> 
 <tbody> 
  <tr> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:50%"> 
    <div style="text-align:center">
      地雷 
    </div> </td> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:50%"> 
    <div style="text-align:center">
      事件响应函数 
    </div> </td> 
  </tr> 
  <tr> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:50%"> 兵工厂生产地雷</td> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:50%"> 声明响应函数</td> 
  </tr> 
  <tr> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:50%"> 找到埋设地雷的位置</td> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:50%"> 找到绑定事件响应函数的控件</td> 
  </tr> 
  <tr> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:50%"> 埋设地雷</td> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:50%"> 将函数的引用绑定到控件上</td> 
  </tr> 
  <tr> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:50%"> 触发地雷的引信</td> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:50%"> 用户触发事件</td> 
  </tr> 
  <tr> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:50%"> 爆炸</td> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:50%"> 系统调用响应函数</td> 
  </tr> 
 </tbody> 
</table>

6.为什么要使用window.onload？

①本质：给window对象的onload事件绑定一个响应函数。

②目的：让响应函数中的操作，在整个窗口中的内容全部加载完成后再执行。

③分析原因

\[1\]浏览器在加载HTML文档内容时，是从上到下加载

\[2\]如果遇到script标签，则停下来执行script标签中的JavaScript代码

\[3\]执行JavaScript代码完成之后再继续加载script标签后面的HTML标签

\[4\]所以如果script标签在body标签的前面，那么script标签中的代码执行时就获取不到body标签内的元素对象

\[5\]所以将script标签放在body标签后面可以解决上述问题，但不符合习惯

\[6\]为了能够在符合习惯的head标签内编写JavaScript程序，就需要借助window对象的onload事件，在整个文档加载完成后再执行操作

7.DOM

①含义：Document Object Model 文档对象模型

文档：HTML或XML文件

②DOM是W3C组织制定的一套用来解析HTML或XML文本的技术标准。

③作用：便于以对象的形式操作HTML页面上的标签。

④节点

\[1\]类型上的关系

![Image 1][]

⑤树形结构

\[1\]父子关系：在树形结构中上下直接相连的节点之间

\[2\]兄弟关系：在数学结构中水平相连的节点之间

\[3\]祖先后代关系：在树形结构中上下直接或间接相连的节点之间

<table style="width:841px"> 
 <tbody> 
  <tr> 
   <td style="width:99.52437574316289%"> <h1>12_jQuery</h1> <strong>作者：</strong> 258406984@qq.com</td> 
  </tr> 
 </tbody> 
</table>

1.jQuery是一款JavaScript框架。作用是简化JavaScript开发。jQuery的口号：Write less，do more！

2.jQuery使用

①结论：使用jQuery的基本方法就是首先调用jQuery的核心函数，返回jQuery对象，然后使用jQuery对象完成功能。

②核心函数：$

\[1\]参数是函数：jQuery就会在整个文档加载完成后执行这个函数，作用相当于windon.onload

\[2\]参数是“选择器字符串”：根据这个选择器字符串在文档中查找对应的元素

3.选择器

①本质：字符串形式的表达式

②作用：用来在整个文档中查找想要的元素

③例子：\#id值，就表示根据id的值在文档中查找对应的元素。

PS：在HTML文档中，id属性的值是不允许重复的。

[Image 1]: