JavaWeb

JavaWeb

HTML和 CSS

1、B/S 软件的结构

JavaSE
C/S Client Server
B/S Browser Server
在这里插入图片描述

2、前端的开发流程

在这里插入图片描述

3、网页的组成部分

页面由三部分内容组成! 分别是内容(结构)、表现、行为。

  • 内容(结构),是我们在页面中可以看到的数据。我们称之为内容。一般内容 我们使用 html 技术来展示。
  • 表现,指的是这些内容在页面上的展示形式。比如说。布局,颜色,大小等等。一般使用 CSS 技术实现
  • 行为,指的是页面中元素与输入设备交互的响应。一般使用 javascript 技术实现

4、HTML 简介

Hyper Text Markup Language (超文本标记语言) 简写:HTML HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件, 通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画 面如何安排,图片如何显示等)

5、创建 HTML 文件

1、创建一个 web 工程(静态的 web 工程)
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
2、在工程下创建 html 页面
在这里插入图片描述
选择浏览器执行页面在这里插入图片描述
第一个 html 示例:

< !DOCTYPE html>
< html lang=“en”>
< head>
< meta charset=“UTF-8”>
< title>标题< /title>
< /head>
< body>
hello
< /body>
< /html>

:Java 文件是需要先编译,再由 java 虚拟机跑起来。但 HTML 文件它不需要编译,直接由浏览器进行解析执行。

6、HTML 文件的书写规范

在这里插入图片描述
Html 的代码注释 < !-- 这是 html 注释,可以在页面右键查看源代码中看到 -->

7、HTML 标签介绍

在这里插入图片描述
在这里插入图片描述
标签的语法:
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

8、常用标签介绍

font 字体标签(已过时)

需求 1:在网页上显示 我是字体标签 ,并修改字体为 宋体,颜色为红色。
在这里插入图片描述

特殊字符

需求 1:把 < br> 换行标签 变成文本 转换成字符显示在页面上
常用特殊字符表:
在这里插入图片描述
其他特殊字符表:在这里插入图片描述
在这里插入图片描述

标题标签

标题标签是 h1 到 h6
在这里插入图片描述

超链接 ( 重 点 ,必 须 掌 握 )

在网页中所有点击之后可以跳转的内容都是超连接
需求 1:普通的 超连接。
在这里插入图片描述

列表标签

无序列表 、 有序列表
需求 1:使用无序,列表方式,把东北 F4,赵四,刘能,小沈阳,宋小宝,展示出来
在这里插入图片描述

img 标签

img 标签可以在 html 页面上显示图片。
需求 1:使用 img 标签显示一张美女的照片。并修改宽高,和边框属性
在这里插入图片描述

表格标签( 重点,必须掌握 )

在这里插入图片描述

需求 1:做一个 带表头的 ,三行,三列的表格,并显示边框 需求 2:修改表格的宽度,高度,表格的对齐方式,单元格间距。
在这里插入图片描述

跨行跨列表格 ( 次重点,必须掌握 )

在这里插入图片描述
需求 1:新建一个五行,五列的表格,第一行,第一列的单元格要跨两列,第二行第一列的单元格跨两行,第四行第四 列的单元格跨两行两列。
在这里插入图片描述

了解 iframe 框架标签 (内嵌窗口)

在这里插入图片描述

表单标签 ( 重点 ,必须掌握 )

什么是表单?
表单就是 html 页面中,用来收集用户信息的所有元素集合.然后把这些信息发送给服务器.
在这里插入图片描述

需求 1:创建一个个人信息注册的表单界面。包含用户名,密码,确认密码。性别(单选),兴趣爱好(多选),国籍(下 拉列表)。
隐藏域,自我评价(多行文本域)。重置,提交

在这里插入图片描述
表单格式化:
在这里插入图片描述
在这里插入图片描述
表单提交细节:
在这里插入图片描述

其他标签

需求 1:div、span、p 标签的演示
在这里插入图片描述

9、CSS 技术

9.1、CSS 技术介绍

CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

9.2、CSS 语法规则:

在这里插入图片描述

选择器:浏览器根据“选择器”决定受 CSS 样式影响的 HTML 元素(标签)。
属性 (property) 是你要改变的样式名,并且每个属性都有一个值。属性和值被冒号分开,并 由花括号包围,这样就组成了一个完整的样式声明(declaration),例如:p {color: blue}
多个声明:如果要定义不止一个声明,则需要用分号将每个声明分开。虽然最后一条声明的 最后可以不加分号(但尽量在每条声明的末尾都加上分号)
例如:

p{
color:red;
font-size:30px;
}

注:一般每行只描述一个属性
CSS 注释:/*注释内容*/

9.3、CSS 和 HTML 的结合方式

9.3.1、第一种:

在标签的 style 属性上设置”key:value value;”,修改标签样式。

需求 1:分别定义两个 div、span 标签,分别修改每个 div 标签的样式为:边框 1 个像素,实线,红色。

在这里插入图片描述
在这里插入图片描述
问题:这种方式的缺点?
1.如果标签多了。样式多了。代码量非常庞大。
2.可读性非常差。
3.Css 代码没什么复用性可方言。

9.3.2、第二种:

在 head 标签中,使用 style 标签来定义各种自己需要的 css 样式。 格式如下:
在这里插入图片描述
需求 1:分别定义两个 div、span 标签,分别修改每个 div 标签的样式为:边框 1 个像素,实线,红色。
在这里插入图片描述
在这里插入图片描述
Css 注释 /* 这是 css 的代码注释 */
问题:这种方式的缺点。
1.只能在同一页面内复用代码,不能在多个页面中复用 css 代码。
2.维护起来不方便,实际的项目中会有成千上万的页面,要到每个页面中去修改。工作量太大了。

9.3.3、第三种:

把 css 样式写成一个单独的 css 文件,再通过 link 标签引入即可复用。

使用 html 的 <link rel=“stylesheet” type=“text/css” href=“./styles.css” /> 标签 导入 css 样 式文件。

1、css 文件内容:
在这里插入图片描述

html 文件代码:
在这里插入图片描述

9.4、CSS 选择器

9.4.1、标签名选择器

标签名选择器的格式是:

标签名{ 
	属性:值;
	 }

标签名选择器,可以决定哪些标签被动的使用这个样式。
在这里插入图片描述
需求 1:在所有 div 标签上修改字体颜色为蓝色,字体大小 30 个像素。边框为 1 像素黄色实线。 并且修改所有 span 标签的字体颜色为黄色,字体大小 20 个像素。边框为 5 像素蓝色虚线。

示例代码:
在这里插入图片描述

9.4.2、id 选择器

id 选择器的格式是:

#id 属性值{
 属性:值; 
 }

id 选择器,可以让我们通过 id 属性选择性的去使用这个样式。

需求 1:分别定义两个 div 标签,
第一个 div 标签定义 id 为 id001 ,然后根据 id 属性定义 css 样式修改字体颜色为蓝色, 字体大小 30 个像素。边框为 1 像素黄色实线。
第二个 div 标签定义 id 为 id002 ,然后根据 id 属性定义 css 样式 修改的字体颜色为红色,字体大小 20 个像 素。边框为 5 像素蓝色点线。

<div id=“id001”>div 标签 1</div>
<div id=“id002”>div 标签 2</div>

示例代码:
在这里插入图片描述

9.4.3、class 选择器(类选择器)

class 类型选择器的格式是:

 .class 属性值{
 		 属性:值;
 		  } 

class 类型选择器,可以通过 class 属性有效的选择性地去使用这个样式

需求 1:修改 class 属性值为 class01 的 span 或 div 标签,字体颜色为蓝色,字体大小 30 个像素。边框为 1 像素黄色实线。
需求 2:修改 class 属性值为 class02 的 div 标签,字体颜色为灰色,字体大小 26 个像素。边框为 1 像素红色实线。
在这里插入图片描述
在这里插入图片描述

9.4.4、组合选择器

组合选择器的格式是:

选择器 1,选择器 2,选择器 n{
	 属性:值; 
	 } 

组合选择器可以让多个选择器共用同一个 css 样式代码。
在这里插入图片描述
需求 1:修改 class= “class01” 的 div 标签 和 id= “id01” 所有的 span 标签,字体颜色为蓝色,字体大小 20 个像素。 边框为 1 像素黄色实线。
示例代码:
在这里插入图片描述

9.5、常用样式:

1、字体颜色
color:red;

颜色可以写颜色名如:black, blue, red, green 等

颜色也可以写 rgb 值和十六进制表示值:如 rgb(255,0,0),#00F6DE,如果写十六进制值必 须加#

2、宽度
width:19px;

宽度可以写像素值:19px;

也可以写百分比值:20%;

3、高度
height:20px;

高度可以写像素值:19px;

也可以写百分比值:20%;

4、背景颜色
background-color:#0F2D4C

5、字体样式:

color:#FF0000;字体颜色红色

font-size:20px; 字体大小

6、红色 1 像素实线边框
border:1px solid red;

7、DIV 居中
margin-left: auto;
margin-right: auto;

8、文本居中:
text-align: center;

9、超连接去下划线
text-decoration: none;

10、表格细线
table {
border: 1px solid black; /*设置边框*/
border-collapse: collapse; /*将边框合并*/ }
td,th {
border: 1px solid black; /*设置边框*/
}

11、列表去除修饰
ul {
list-style: none;
}

示例代码:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

JavaScript 语言入门

1、JavaScript 介绍

Javascript 语言诞生主要是完成页面的数据验证。因此它运行在客户端,需要运行浏览器来解析执行 JavaScript 代码。 JS 是 Netscape 网景公司的产品,最早取名为 LiveScript;为了吸引更多 java 程序员。更名为 JavaScript。 JS 是弱类型,Java 是强类型

特点:

  1. 交互性(它可以做的就是信息的动态交互)
  2. 安全性(不允许直接访问本地硬盘)
  3. 跨平台性(只要是可以解释 JS 的浏览器都可以执行,和平台无关)

2、JavaScript 和 html 代码的结合方式

2.1、第一种方式

只需要在 head 标签中,或者在 body 标签中, 使用 script 标签 来书写 JavaScript 代码
示例代码:
在这里插入图片描述

2.2、第二种方式

使用 script 标签引入 单独的 JavaScript 代码文件
文件目录:
在这里插入图片描述
html 代码内容:
在这里插入图片描述

3、变量

什么是变量?变量是可以存放某些值的内存的命名。
JavaScript 的变量类型:

数值类型: number
字符串类型: string
对象类型: object
布尔类型: boolean
函数类型: function

JavaScript 里特殊的值:

undefined 未定义,所有 js 变量未赋于初始值的时候,默认值都是
undefined. null 空值
NaN 全称是:Not a Number。非数字。非数值

JS 中的定义变量格式:

var 变量名;
var 变量名 = 值;

示例代码:
在这里插入图片描述

4、关系(比较)运算

等于: == 等于是简单的做字面值的比较
全等于: === 除了做字面值的比较之外,还会比较两个变量的数据类型

示例代码:
在这里插入图片描述

5、逻辑运算

且运算: &&
或运算: ||
取反运算: !

在 JavaScript 语言中,所有的变量,都可以做为一个 boolean 类型的变量去使用。
0 、null、 undefined、””(空串) 都认为是 false;
在这里插入图片描述
示例代码:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6、数组(重点)

6.1、数组定义方式

JS 中 数组的定义:
格式:

var 数组名 = []; // 空数组
var 数组名 = [1 , ’abc’ , true]; // 定义数组同时赋值元素

示例代码:
在这里插入图片描述

7、函数(重点)

7.1、函数的二种定义方式

第一种,可以使用 function 关键字来定义函数。
使用的格式如下:

function 函数名(形参列表){
函数体
}

在 JavaScript 语言中,如何定义带有返回值的函数?
只需要在函数体内直接使用 return 语句返回值即可!
示例代码:
在这里插入图片描述
第二种定义方式,格式如下:

var 函数名 = function(形参列表) { 函数体 }

示例代码:
在这里插入图片描述
注:在 Java 中函数允许重载。但是在 JS 中函数的重载会直接覆盖掉上一次的定义
在这里插入图片描述

7.2、函数的 arguments 隐形参数(只在 function 函数内)

就是在 function 函数中不需要定义,但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。
隐形参数特别像 java 基础的可变长参数一样。
public void fun( Object … args );
可变长参数其他是一个数组。

那么 js 中的隐形参数也跟 java 的可变长参数一样。操作类似数组。
示例代码:
在这里插入图片描述

8、JS 中的自定义对象(扩展内容)

  1. Object 形式的自定义对象
    对象的定义:

var 变量名 = new Object(); // 对象实例(空对象)
变量名.属性名 = 值; // 定义一个属性
变量名.函数名 = function(){} // 定义一个函数

对象的访问

变量名.属性 / 函数名();

示例代码:
在这里插入图片描述

  1. {}花括号形式的自定义对象
    对象的定义:

var 变量名 = { // 空对象
属性名:值, // 定义一个属性
属性名:值, // 定义一个属性
函数名:function(){} // 定义一个函数
};

对象的访问:

变量名.属性 / 函数名();

示例代码:
在这里插入图片描述

9、js 中的事件

什么是事件?事件是电脑输入设备与页面进行交互的响应。我们称之为事件
常用的事件:

onload 加载完成事件: 页面加载完成之后,常用于做页面 js 代码初始化操作
onclick 单击事件: 常用于按钮的点击响应操作。
onblur 失去焦点事件: 常用用于输入框失去焦点后验证其输入内容是否合法。
onchange 内容发生改变事件: 常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件: 常用于表单提交前,验证所有表单项是否合法。

事件的注册又分为静态注册和动态注册两种:
什么是事件的注册(绑定)?
其实就是告诉浏览器,当事件响应后要执行哪些操作代码,叫事件注册或事件绑定。

静态注册事件:通过 html 标签的事件属性直接赋于事件响应后的代码,这种方式我们叫静态注册。

动态注册事件:是指先通过 js 代码得到标签的 dom 对象,然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件 响应后的代码,叫动态注册
动态注册基本步骤:
1、获取标签对象
2、标签对象.事件名 = fucntion(){}

onload 加载完成事件
在这里插入图片描述
onclick 单击事件
在这里插入图片描述
在这里插入图片描述
onblur 失去焦点事件
在这里插入图片描述
onchange 内容发生改变事件
在这里插入图片描述
在这里插入图片描述
onsubmit 表单提交事件
在这里插入图片描述

10、DOM 模型

DOM 全称是 Document Object Model 文档对象模型
大白话,就是把文档中的标签,属性,文本,转换成为对象来管理。
那么 它们是如何实现把标签,属性,文本转换成为对象来管理呢。

10.1、Document 对象(重点)

在这里插入图片描述
Document 对象的理解:
第一点:Document 它管理了所有的 HTML 文档内容。
第二点:document 它是一种树结构的文档。有层级关系。
第三点:它让我们把所有的标签 都 对象化
第四点:我们可以通过 document 访问所有的标签对象。

什么是对象化??
我们java基础已经学过面向对象。请问什么是对象化?

举例: 有一个人有年龄:18 岁,性别:女,名字:张某某 我们要把这个人的信息对象化怎么办!

Class Person {
		private int age; 
		private String sex;
		private String name; 
}

那么 html 标签 要 对象化 怎么办?
在这里插入图片描述
模拟对象化,相当于:

class Dom{ 
		private String id; // id 属性 
		private String tagName; //表示标签名 
		private Dom parentNode; //父亲 
		private List<Dom> children; // 孩子结点 
		private String innerHTML; // 起始标签和结束标签中间的内容 
}

10.2、Document 对象中的方法介绍(重点)

document.getElementById(elementId)
通过标签的 id 属性查找标签 dom 对象,elementId 是标签的 id 属性值 document.getElementsByName(elementName)
通过标签的 name 属性查找标签 dom 对象,elementName 标签的 name 属性值 document.getElementsByTagName(tagname)
通过标签名查找标签 dom 对象。tagname 是标签名
document.createElement( tagName)
通过给定的标签名,创建一个标签对象。tagName 是要创建的标签名

document 对象的三个查询方法,如果有 id 属性,优先使用 getElementById 方法来进行查询
如果没有 id 属性,则优先使用 getElementsByName 方法来进行查询
如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName

以上三个方法,一定要在页面加载完成之后执行,才能查询到标签对象。

getElementById 方法示例代码:
在这里插入图片描述
在这里插入图片描述
getElementsByName 方法示例代码:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
getElementsByTagName 方法示例代码:
在这里插入图片描述
createElement 方法示例代码:
在这里插入图片描述

10.3、节点的常用属性和方法

节点就是标签对象
方法:
通过具体的元素节点调用
getElementsByTagName() 方法,
获取当前节点的指定标签名孩子节点

appendChild( oChildNode ) 方法,
可以添加一个子节点,oChildNode 是要添加的孩子节点

属性:
childNodes 属性,获取当前节点的所有子节点
firstChild 属性,获取当前节点的第一个子节点
lastChild 属性,获取当前节点的最后一个子节点
parentNode 属性,获取当前节点的父节点
nextSibling 属性,获取当前节点的下一个节点
previousSibling 属性,获取当前节点的上一个节点
className 用于获取或设置标签的 class 属性值
innerHTML 属性,表示获取/设置起始标签和结束标签中的内容
innerText 属性,表示获取/设置起始标签和结束标签中的文本

jQuery

1、jQuery 介绍

什么是 jQuery ?
jQuery,顾名思义,也就是 JavaScript 和查询(Query),它就是辅助 JavaScript 开发的 js 类库。
jQuery 核心思想!!!
它的核心思想是 write less,do more(写得更少,做得更多),所以它实现了很多浏览器的兼容问题。
jQuery 流行程度
jQuery 现在已经成为最流行的 JavaScript 库,在世界前 10000 个访问最多的网站中,有超过 55%在使用 jQuery。
jQuery 好处!!!
jQuery 是免费、开源的,jQuery 的语法设计可以使开发更加便捷,例如操作文档对象、选择 DOM 元素、 制作动画效果、事件处理、使用 Ajax 以及其他功能

2、jQuery 的初体验!!!

需求:使用 jQuery 给一个按钮绑定单击事件?
在这里插入图片描述
常见问题?
1、使用 jQuery 一定要引入 jQuery 库吗?
答案: 是,必须
2、jQuery 中的$到底是什么?
答案: 它是一个函数
3、怎么为按钮添加点击响应函数的?
答案:
1、使用 jQuery 查询到标签对象
2、使用标签对象.click( function(){} );

3、jQuery 核心函数

$ 是 jQuery 的核心函数,能完成 jQuery 的很多功能。$()就是调用$这个函数
1、传入参数为 [ 函数 ] 时:
表示页面加载完成之后。相当于 window.onload = function(){}
2、传入参数为 [ HTML 字符串 ] 时:
会对我们创建这个 html 标签对象
3、传入参数为 [ 选择器字符串 ] 时:
$(“#id 属性值”); id 选择器,根据 id 查询标签对象
$(“标签名”); 标签名选择器,根据指定的标签名查询标签对象
$(“.class 属性值”); 类型选择器,可以根据 class 属性查询标签对象
4、传入参数为 [ DOM 对象 ] 时:
会把这个 dom 对象转换为 jQuery 对象

4、jQuery 对象和 dom 对象区分

4.1、什么是 jQuery 对象,什么是 dom 对象

Dom 对象
1.通过 getElementById()查询出来的标签对象是 Dom 对象
2.通过 getElementsByName()查询出来的标签对象是 Dom 对象
3.通过 getElementsByTagName()查询出来的标签对象是 Dom 对象
4.通过 createElement() 方法创建的对象,是 Dom 对象
DOM 对象 Alert 出来的效果是:[object HTML 标签名 Element]

jQuery 对象
5.通过 JQuery 提供的 API 创建的对象,是 JQuery 对象
6.通过 JQuery 包装的 Dom 对象,也是 JQuery 对象
7.通过 JQuery 提供的 API 查询到的对象,是 JQuery 对象
jQuery 对象 Alert 出来的效果是:[object Object]

4.2、问题:jQuery 对象的本质是什么?

jQuery 对象是 dom 对象的数组 + jQuery 提供的一系列功能函数。

4.3、jQuery 对象和 Dom 对象使用区别

jQuery 对象不能使用 DOM 对象的属性和方法
DOM 对象也不能使用 jQuery 对象的属性和方法

4.4、Dom 对象和 jQuery 对象互转

1、dom 对象转化为 jQuery 对象(*重点)
1、先有 DOM 对象
2、$( DOM 对象 ) 就可以转换成为 jQuery 对象
2、jQuery 对象转为 dom 对象(*重点)
1、先有 jQuery 对象
2、jQuery 对象[下标]取出相应的 DOM 对象
在这里插入图片描述

5、jQuery 选择器(重点)

5.1、基本选择器(重点)

在这里插入图片描述

#ID 选择器:根据 id 查找标签对象
.class 选择器:根据 class 查找标签对象
element 选择器:根据标签名查找标签对象
* 选择器:表示任意的,所有的元素
selector1,selector2 组合选择器:合并选择器 1,选择器 2 的结果并返回

p.myClass

表示标签名必须是 p 标签,而且 class 类型还要是 myClass

5.2、层级选择器(重点)

在这里插入图片描述

ancestor descendant 后代选择器 :在给定的祖先元素下匹配所有的后代元素
parent > child 子元素选择器:在给定的父元素下匹配所有的子元素
prev + next 相邻元素选择器:匹配所有紧接在 prev 元素后的 next 元素
prev ~ sibings 之后的兄弟元素选择器:匹配 prev 元素之后的所有 siblings 元素

5.3、过滤选择器

基本过滤器:
在这里插入图片描述

:first 获取第一个元素
:last 获取最后个元素
:not(selector) 去除所有与给定选择器匹配的元素
:even 匹配所有索引值为偶数的元素,从 0 开始计数
:odd 匹配所有索引值为奇数的元素,从 0 开始计数
:eq(index) 匹配一个给定索引值的元素
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:header 匹配如 h1, h2, h3 之类的标题元素
:animated 匹配所有正在执行动画效果的元素

内容过滤器:
在这里插入图片描述

:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:parent 匹配含有子元素或者文本的元素
:has(selector) 匹配含有选择器所匹配的元素的元素

属性过滤器:
在这里插入图片描述

[attribute] 匹配包含给定属性的元素。
[attribute=value] 匹配给定的属性是某个特定值的元素
[attribute!=value] 匹配所有不含有指定的属性,或者属性不等于特定值的元素。
[attribute^=value] 匹配给定的属性是以某些值开始的元素
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
[attribute*=value] 匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN] 复合属性选择器,需要同时满足多个条件时使用。

表单过滤器:
在这里插入图片描述

:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有 文本输入框
:password 匹配所有的密码输入框
:radio 匹配所有的单选框
:checkbox 匹配所有的复选框
:submit 匹配所有提交按钮
:image 匹配所有 img 标签
:reset 匹配所有重置按钮
:button 匹配所有 input type=button <button>按钮
:file 匹配所有 input type=file 文件上传
:hidden 匹配所有不可见元素 display:none 或 input type=hidden

表单对象属性过滤器:
在这里插入图片描述

:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有选中的单选,复选,和下拉列表中选中的 option 标签对象
:selected 匹配所有选中的 option

6、jQuery 元素筛选

在这里插入图片描述

eq() 获取给定索引的元素 功能跟 :eq() 一样
first() 获取第一个元素 功能跟 :first 一样
last() 获取最后一个元素 功能跟 :last 一样
filter(exp) 留下匹配的元素
is(exp) 判断是否匹配给定的选择器,只要有一个匹配就返回,true
has(exp) 返回包含有匹配选择器的元素的元素 功能跟 :has 一样
not(exp) 删除匹配选择器的元素 功能跟 :not 一样
children(exp) 返回匹配给定选择器的子元素 功能跟 parent>child 一样
find(exp) 返回匹配给定选择器的后代元素 功能跟 ancestor descendant 一样
next() 返回当前元素的下一个兄弟元素 功能跟 prev + next 功能一样
nextAll() 返回当前元素后面所有的兄弟元素 功能跟 prev ~ siblings 功能一样
nextUntil() 返回当前元素到指定匹配的元素为止的后面元素
parent() 返回父元素
prev(exp) 返回当前元素的上一个兄弟元素
prevAll() 返回当前元素前面所有的兄弟元素
prevUnit(exp) 返回当前元素到指定匹配的元素为止的前面元素
siblings(exp) 返回所有兄弟元素
add() 把 add 匹配的选择器的元素添加到当前 jquery 对象中

7、jQuery 的属性操作

在这里插入图片描述

html() 它可以设置和获取起始标签和结束标签中的内容。 跟 dom 属性 innerHTML 一样。
text() 它可以设置和获取起始标签和结束标签中的文本。 跟 dom 属性 innerText 一样。
val() 它可以设置和获取表单项的 value 属性值。 跟 dom 属性 value 一样

val 方法同时设置多个表单项的选中状态:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
attr()
可以设置和获取属性的值,不推荐操作 checked、readOnly、selected、disabled 等等 attr 方法还可以操作非标准的属性。比如自定义属性:abc,bbj

prop()
可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled 等等

XML与Tomcat

XML

1、简介

xml 是可扩展的标记性语言。

2、xml 的作用?

xml 的主要作用有:
1、用来保存数据,而且这些数据具有自我描述性
2、它还可以做为项目或者模块的配置文件
3、还可以做为网络传输数据的格式(现在 JSON 为主)。

3、xml 语法

  1. 文档声明。 2. 元素(标签) 3. xml 属性 4. xml 注释 5. 文本区域(CDATA 区)
3.1、文档声明

1)我们先创建一个简单 XML 文件,用来描述图书信息。
在这里插入图片描述
文件名:
在这里插入图片描述
在这里插入图片描述
2)图书有 id 属性 表示唯一 标识,书名,有作者,价格的信息

<?xml version="1.0" encoding="UTF-8"?>
<!-- xml 声明 version 是版本的意思 encoding 是编码 -->
<books> <!-- 这是 xml 注释 -->
    <book id="SN123123413241"> <!-- book 标签描述一本图书 id 属性描述 的是图书 的编号 --> 
        <name>java 编程思想</name> <!-- name 标签描述 的是图书 的信息 --> 
        <author>华仔</author> <!-- author 单词是作者的意思 ,描述图书作者 --> 
        <price>9.9</price> <!-- price 单词是价格,描述的是图书 的价格 --> 
    </book> 
    <book id="SN12341235123"> <!-- book 标签描述一本图书 id 属性描述 的是图书 的编号 --> 
        <name>葵花宝典</name> <!-- name 标签描述 的是图书 的信息 --> 
        <author>班长</author> <!-- author 单词是作者的意思 ,描述图书作者 --> 
        <price>5.5</price><!-- price 单词是价格,描述的是图书 的价格 --> 
    </book> 
</books>

在浏览器中可以查看到文档
在这里插入图片描述

3.2、xml 注释

在这里插入图片描述

3.3、元素(标签)

咱们先回忆一下:
html 标签:
在这里插入图片描述
1)什么是 xml 元素
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
2)XML 命名规则
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
3)xml 中的元素(标签)也 分成 单标签和双标签:
在这里插入图片描述
在这里插入图片描述

3.4、xml 属性

xml 的标签属性和 html 的标签属性是非常类似的,属性可以提供元素的额外信息
在标签上可以书写属性:
一个标签上可以书写多个属性。每个属性的值必须使用 引号 引起来。 规则和标签的书写规则一致
在这里插入图片描述

3.5、语法规则:
3.5.1)所有 XML 元素都须有关闭标签(也就是闭合)

在这里插入图片描述

3.5.2)XML 标签对大小写敏感

在这里插入图片描述

3.5.3)XML 必须正确地嵌套

在这里插入图片描述

3.5.4)XML 文档必须有根元素

根元素就是顶级元素,
没有父标签的元素,叫顶级元素。
根元素是没有父标签的顶级元素,而且是唯一一个才行
在这里插入图片描述

3.5.5)XML 的属性值须加引号

在这里插入图片描述

3.5.6)XML 中的特殊字符

在这里插入图片描述

3.5.7)文本区域(CDATA 区)

在这里插入图片描述
在这里插入图片描述

4、xml 解析技术介绍

xml 可扩展的标记语言。
不管是 html 文件还是 xml 文件它们都是标记型文档,都可以使用 w3c 组织制定的 dom 技术来解析。
在这里插入图片描述
document 对象表示的是整个文档(可以是 html 文档,也可以是 xml 文档)
早期 JDK 为我们提供了两种 xml 解析技术 DOM 和 Sax 简介(已经过时,但我们需要知道这两种技术
dom 解析技术是 W3C 组织制定的,而所有的编程语言都对这个解析技术使用了自己语言的特点进行实现。 Java 对 dom 技术解析标记也做了实现。

sun 公司在 JDK5 版本对 dom 解析技术进行升级:SAX( Simple API for XML ) SAX 解析,它跟 W3C 制定的解析不太一样。它是以类似事件机制通过回调告诉用户当前正在解析的内容。 它是一行一行的读取 xml 文件进行解析的。不会创建大量的 dom 对象。 所以它在解析 xml 的时候,在内存的使用上。和性能上。都优于 Dom 解析。

第三方的解析:
jdom 在 dom 基础上进行了封装 、
dom4j 又对 jdom 进行了封装。
pull 主要用在 Android 手机开发,是在跟 sax 非常类似都是事件机制解析 xml 文件。

这个 Dom4j 它是第三方的解析技术。我们需要使用第三方给我们提供好的类库才可以解析 xml 文件。

5、dom4j 解析技术(重点)

由于 dom4j 它不是 sun 公司的技术,而属于第三方公司的技术,我们需要使用 dom4j 就需要到 dom4j 官网下载 dom4j 的 jar 包。

dom4j 目录的介绍:
在这里插入图片描述
如何查 Dom4j 的文档
在这里插入图片描述
Dom4j 快速入门
在这里插入图片描述
lib 目录
在这里插入图片描述
src 目录是第三方类库的源码目录:
在这里插入图片描述

dom4j 编程步骤:

第一步: 先加载 xml 文件创建 Document 对象
第二步:通过 Document 对象拿到根元素对象
第三步:通过根元素.elelemts(标签名); 可以返回一个集合,这个集合里放着。所有你指定的标签名的元素对象
第四步:找到你想要修改、删除的子元素,进行相应在的操作
第五步,保存到硬盘上

获取 document 对象

创建一个 lib 目录,并添加 dom4j 的 jar 包。并添加到类路径。
在这里插入图片描述
需要解析的 books.xml 文件内容
在这里插入图片描述
解析获取 Document 对象的代码
第一步,先创建 SaxReader 对象。这个对象,用于读取 xml 文件,并创建 Document

    /**
     * dom4j 获取 Documet 对象
     */
    @Test
    public void getDocument() throws DocumentException {
        // 要创建一个 Document 对象,需要我们先创建一个 SAXReader 对象
        SAXReader reader = new SAXReader(); // 这个对象用于读取 xml 文件,然后返回一个 Document。
        Document document = reader.read("src/books.xml"); // 打印到控制台,看看是否创建成功
        System.out.println(document); 
    }
遍历 标签 获取所有标签中的内容(重点)

需要分四步操作:
第一步,通过创建 SAXReader 对象。来读取 xml 文件,获取 Document 对象
第二步,通过 Document 对象。拿到 XML 的根元素对象
第三步,通过根元素对象。获取所有的 book 标签对象
第四步,遍历每个 book 标签对象。然后获取到 book 标签对象内的每一个元素,再通过 getText() 方法拿到起始标签和结 束标签之间的文本内容

 /**
     * 读取 xml 文件中的内容
     */
    @Test
    public void readXML() throws DocumentException {
        // 需要分四步操作:
        // 第一步,通过创建 SAXReader 对象。来读取 xml 文件,获取 Document 对象
        // 第二步,通过 Document 对象。拿到 XML 的根元素对象
        // 第三步,通过根元素对象。获取所有的 book 标签对象
        // 第四步,遍历每个 book 标签对象。然后获取到 book 标签对象内的每一个元素,再通过 getText() 方法拿到
        //起始标签和结束标签之间的文本内容
        // 第一步,通过创建 SAXReader 对象。来读取 xml 文件,获取 Document 对象
        SAXReader reader = new SAXReader();
        Document document = reader.read("src/books.xml");
        // 第二步,通过 Document 对象。拿到 XML 的根元素对象
        Element root = document.getRootElement();
        // 打印测试
        // Element.asXML() 它将当前元素转换成为 String 对象
        // System.out.println( root.asXML() );
        // 第三步,通过根元素对象。获取所有的 book 标签对象
        // Element.elements(标签名)它可以拿到当前元素下的指定的子元素的集合
        List<Element> books = root.elements("book");
        // 第四小,遍历每个 book 标签对象。然后获取到 book 标签对象内的每一个元素,
        for (Element book : books) {
            // 测试
            // System.out.println(book.asXML());
            // 拿到 book 下面的 name 元素对象
            Element nameElement = book.element("name");
            // 拿到 book 下面的 price 元素对象
            Element priceElement = book.element("price");
            // 拿到 book 下面的 author 元素对象
            Element authorElement = book.element("author");
            // 再通过 getText() 方法拿到起始标签和结束标签之间的文本内容
            System.out.println("书名" + nameElement.getText() + " , 价格:" 
                    + priceElement.getText() + ", 作者:" + authorElement.getText()); 
        }
    }

Tomcat

1.JavaWeb 的概念

a)什么是 JavaWeb
JavaWeb 是指,所有通过 Java 语言编写可以通过浏览器访问的程序的总称,叫 JavaWeb。
JavaWeb 是基于请求和响应来开发的。
b)什么是请求
请求是指客户端给服务器发送数据,叫请求 Request。
c)什么是响应
响应是指服务器给客户端回传数据,叫响应 Response。
d)请求和响应的关系
请求和响应是成对出现的,有请求就有响应。
在这里插入图片描述

2.Web 资源的分类

web 资源按实现的技术和呈现的效果的不同,又分为静态资源和动态资源两种
静态资源: html、css、js、txt、mp4 视频 , jpg 图片
动态资源: jsp 页面、Servlet 程序

3.常用的 Web 服务器

Tomcat:由 Apache 组织提供的一种 Web 服务器,提供对 jsp 和 Servlet 的支持。它是一种轻量级的 javaWeb 容器(服务 器),也是当前应用最广的 JavaWeb 服务器(免费)。
Jboss:是一个遵从 JavaEE 规范的、开放源代码的、纯 Java 的 EJB 服务器,它支持所有的 JavaEE 规范(免费)。
GlassFish: 由 Oracle 公司开发的一款 JavaWeb 服务器,是一款强健的商业服务器,达到产品级质量(应用很少)。
Resin:是 CAUCHO 公司的产品,是一个非常流行的服务器,对 servlet 和 JSP 提供了良好的支持, 性能也比较优良,resin 自身采用 JAVA 语言开发(收费,应用比较多)。
WebLogic:是 Oracle 公司的产品,是目前应用最广泛的 Web 服务器,支持 JavaEE 规范, 而且不断的完善以适应新的开发要求,适合大型项目(收费,用的不多,适合大公司)。

4.Tomcat 服务器和 Servlet 版本的对应关系

在这里插入图片描述

5.Tomcat 的使用

a)安装
找到你需要用的 Tomcat 版本对应的 zip 压缩包,解压到需要安装的目录即可。
b)目录介绍
bin 专门用来存放 Tomcat 服务器的可执行程序
conf 专门用来存放 Tocmat 服务器的配置文件
lib 专门用来存放 Tomcat 服务器的 jar 包
logs 专门用来存放 Tomcat 服务器运行时输出的日记信息
temp 专门用来存放 Tomcdat 运行时产生的临时数据
webapps 专门用来存放部署的 Web 工程。
work 是 Tomcat 工作时的目录,用来存放 Tomcat 运行时 jsp 翻译为 Servlet 的源码,和 Session 钝化的目录。
c)如何启动 Tomcat 服务器
找到 Tomcat 目录下的 bin 目录下的 startup.bat 文件,双击,就可以启动 Tomcat 服务器。
如何测试 Tomcat 服务器启动成功???
打开浏览器,在浏览器地址栏中输入以下地址测试:
1、http://localhost:8080
2、http://127.0.0.1:8080
3、http://真实 ip:8080
当出现如下界面,说明 Tomcat 服务器启动成功!!!
在这里插入图片描述
常见的启动失败的情况有,双击 startup.bat 文件,就会出现一个小黑窗口一闪而来。 这个时候,失败的原因基本上都是因为没有配置好 JAVA_HOME 环境变量
配置 JAVA_HOME 环境变量:
在这里插入图片描述
常见的 JAVA_HOME 配置错误有以下几种情况:
一:JAVA_HOME 必须全大写。
二:JAVA_HOME 中间必须是下划线,不是减号-
三:JAVA_HOME 配置的路径只需要配置到 jdk 的安装目录即可。不需要带上 bin 目录。

另一种启动 tomcat 服务器的方式
1、打开命令行
2、cd 到 你的 Tomcat 的 bin 目录下
在这里插入图片描述
3、敲入启动命令: catalina run

d)Tomcat 的停止
1、点击 tomcat 服务器窗口的 x 关闭按钮
2、把 Tomcat 服务器窗口置为当前窗口,然后按快捷键 Ctrl+C
3、找到 Tomcat 的 bin 目录下的 shutdown.bat 双击,就可以停止 Tomcat 服务器
e)如何修改 Tomcat 的端口号
Mysql 默认的端口号是:3306
Tomcat 默认的端口号是:8080
找到 Tomcat 目录下的 conf 目录,找到 server.xml 配置文件
在这里插入图片描述
平时上百度:http://www.baidu.com:80
HTTP 协议默认的端口号是:80

f) 如何部暑 web 工程到 Tomcat 中
第一种部署方法:只需要把 web 工程的目录拷贝到 Tomcat 的 webapps 目录下 即可。
1、在 webapps 目录下创建一个 book 工程
在这里插入图片描述
2、把自己的项目拷贝到里面:
3、如何访问 Tomcat 下的 web 工程
只需要在浏览器中输入访问地址格式如下:
http://ip:port/工程名/目录下/文件名

第二种部署方法:
找到 Tomcat 下的 conf 目录\Catalina\localhost\ 下,创建如下的配置文件
在这里插入图片描述
abc.xml 配置文件内容如下
在这里插入图片描述
访问这个工程的路径如下:http://ip:port/abc/ 就表示访问 E:\book 目录

g)手托 html 页面到浏览器和在浏览器中输入 http://ip:端 口号/工程名/访问的区别
手托 html 页面的原理:
在这里插入图片描述
输入访问地址访问的原因:
在这里插入图片描述
h)ROOT 的工程的访问,以及 默认 index.html 页面的访 问
当我们在浏览器地址栏中输入访问地址如下:
http://ip:port/ ====>>>> 没有工程名的时候,默认访问的是 ROOT 工程。
当我们在浏览器地址栏中输入的访问地址如下:
http://ip:port/工程名/ ====>>>> 没有资源名,默认访问 index.html 页面

6.IDEA 整合 Tomcat 服务器

操作的菜单如下:File | Settings | Build, Execution, Deployment | Application Servers
在这里插入图片描述
配置你的 Tomcat 安装目录:
在这里插入图片描述
就可以通过创建一个 Model 查看是不是配置成功!!!
在这里插入图片描述

7.IDEA 中动态 web 工程的操作

a)IDEA 中如何创建动态 web 工程
1、创建一个新模块:
在这里插入图片描述
2、选择你要创建什么类型的模块:
在这里插入图片描述
3、输入你的模块名,点击【Finish】完成创建。
在这里插入图片描述
4、创建成功如下图:
在这里插入图片描述

b)Web 工程的目录介绍
在这里插入图片描述
c)如何给动态 web 工程添加额外 jar 包
1、可以打开项目结构菜单操作界面,添加一个自己的类库:
在这里插入图片描述
2、添加你你类库需要的 jar 包文件。
在这里插入图片描述
3、选择你添加的类库,给哪个模块使用:
在这里插入图片描述
4、选择 Artifacts 选项,将类库,添加到打包部署中:
在这里插入图片描述

d)如何在 IDEA 中部署工程到 Tomcat 上运行
1、建议修改 web 工程对应的 Tomcat 运行实例名称:
在这里插入图片描述
2、确认你的 Tomcat 实例中有你要部署运行的 web 工程模块:
在这里插入图片描述
3、你还可以修改你的 Tomcat 实例启动后默认的访问地址:
在这里插入图片描述
4、在 IDEA 中如何运行,和停止 Tomcat 实例。
4.1、正常启动 Tomcat 实例:
在这里插入图片描述
4.2、Debug 方式启动 Tomcat 运行实例:
在这里插入图片描述
4.3、停止 Tomcat 运行实例:
在这里插入图片描述
4.4、重启 Tomcat 运行实例:
在这里插入图片描述
e)修改工程访问路径
在这里插入图片描述
f) 修改运行的端口号
在这里插入图片描述
g)修改运行使用的浏览器
在这里插入图片描述
h)配置资源热部署
在这里插入图片描述

Servlet

1.Servlet 技术

a)什么是 Servlet

1、Servlet 是 JavaEE 规范之一。规范就是接口
2、Servlet 就 JavaWeb 三大组件之一。三大组件分别是:Servlet 程序、Filter 过滤器、Listener 监听器。
3、Servlet 是运行在服务器上的一个 java 小程序,它可以接收客户端发送过来的请求,并响应数据给客户端。

b)手动实现 Servlet 程序

1、编写一个类去实现 Servlet 接口
2、实现 service 方法,处理请求,并响应数据
3、到 web.xml 中去配置 servlet 程序的访问地址

public class HelloServlet implements Servlet {

    /**
     * service 方法是专门用来处理请求和响应的
     * @param servletRequest
     * @param servletResponse
     * @throws ServletException
     * @throws IOException
     */
    @Override
    public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
        System.out.println("Hello Servlet 被访问了");
    }

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_4_0.xsd" version="4.0">
    <!-- servlet 标签给 Tomcat 配置 Servlet 程序 -->
    <servlet>
        <!--servlet-name 标签 Servlet 程序起一个别名(一般是类名) -->
        <servlet-name>HelloServlet</servlet-name>
        <!--servlet-class 是 Servlet 程序的全类名-->
        <servlet-class>com.jie.servlet.HelloServlet</servlet-class>
    </servlet>
    <!--servlet-mapping 标签给 servlet 程序配置访问地址-->
    <servlet-mapping>
        <!--servlet-name 标签的作用是告诉服务器,我当前配置的地址给哪个 Servlet 程序使用-->
        <servlet-name>HelloServlet</servlet-name>
        <!--url-pattern 标签配置访问地址 <br/>
        / 斜杠在服务器解析的时候,表示地址为:http://ip:port/工程路径 <br/>
        /hello 表示地址为:http://ip:port/工程路径/hello <br/> -->
        <url-pattern>/hello</url-pattern>
    </servlet-mapping>
</web-app>

c)url 地址到 Servlet 程序的访问

在这里插入图片描述

d)Servlet 的生命周期

1、执行 Servlet 构造器方法
2、执行 init 初始化方法
第一、二步,是在第一次访问,的时候创建 Servlet 程序会调用。
3、执行 service 方法
第三步,每次访问都会调用。
4、执行 destroy 销毁方法
第四步,在 web 工程停止的时候调用。

e)GET 和 POST 请求的分发处理

public class HelloServlet implements Servlet {

    /**
     * service 方法是专门用来处理请求和响应的
     * @param servletRequest
     * @param servletResponse
     * @throws ServletException
     * @throws IOException
     */
    @Override
    public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
        System.out.println("3 service === Hello Servlet 被访问了");
        // 类型转换(因为它有 getMethod()方法)
        HttpServletRequest httpServletRequest = (HttpServletRequest) servletRequest;
        // 获取请求的方式
        String method = httpServletRequest.getMethod();
        if ("GET".equals(method)) {
            doGet();
        } else if ("POST".equals(method)) {
            doPost();
        }
    }
    /*** 做 get 请求的操作 */
    public void doGet(){
        System.out.println("get 请求");
        System.out.println("get 请求");
    }
    /*** 做 post 请求的操作 */
    public void doPost(){
        System.out.println("post 请求");
        System.out.println("post 请求");
    }

f) 通过继承 HttpServlet 实现 Servlet 程序

一般在实际项目开发中,都是使用继承 HttpServlet 类的方式去实现 Servlet 程序。
1、编写一个类去继承 HttpServlet 类
2、根据业务需要重写 doGet 或 doPost 方法
3、到 web.xml 中的配置 Servlet 程序的访问地址

Servlet 类的代码:

public class HelloServlet2 extends HttpServlet {
    /**
     * doGet()在 get 请求的时候调用
     * @param req
     * @param resp
     * @throws ServletException
     * @throws IOException
     */
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("HelloServlet2 的 doGet 方法");
    }

    /**
     * doPost()在 post 请求的时候调用
     * @param req
     * @param resp
     * @throws ServletException
     * @throws IOException
     */
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("HelloServlet2 的 doPost 方法");
    }
}

web.xml 中的配置:


<servlet>
    <servlet-name>HelloServlet2</servlet-name>
    <servlet-class>com.atguigu.servlet.HelloServlet2</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>HelloServlet2</servlet-name>
<url-pattern>/hello2</url-pattern>
</servlet-mapping>

g)使用 IDEA 创建 Servlet 程序

菜单:new ->Servlet 程序
在这里插入图片描述
配置 Servlet 的信息:
在这里插入图片描述

h)Servlet 类的继承体系

在这里插入图片描述

2.ServletConfig 类

ServletConfig 类从类名上来看,就知道是 Servlet 程序的配置信息类。
Servlet 程序和 ServletConfig 对象都是由 Tomcat 负责创建,我们负责使用。
Servlet 程序默认是第一次访问的时候创建,ServletConfig 是每个 Servlet 程序创建时,就创建一个对应的 ServletConfig 对 象

a)ServletConfig 类的三大作用

1、可以获取 Servlet 程序的别名 servlet-name 的值
2、获取初始化参数 init-param
3、获取 ServletContext 对象
web.xml 中的配置:

<!-- servlet 标签给 Tomcat 配置 Servlet 程序 -->
<servlet>
    <!--servlet-name 标签 Servlet 程序起一个别名(一般是类名) -->
    <servlet-name>HelloServlet</servlet-name>
    <!--servlet-class 是 Servlet 程序的全类名-->
    <servlet-class>com.atguigu.servlet.HelloServlet</servlet-class>
    <!--init-param 是初始化参数-->
    <init-param> 
        <!--是参数名--> 
        <param-name>username</param-name> 
        <!--是参数值--> 
        <param-value>root</param-value> 
    </init-param> 
    <!--init-param 是初始化参数--> 
    <init-param> 
        <!--是参数名--> 
        <param-name>url</param-name> 
        <!--是参数值--> 
        <param-value>jdbc:mysql://localhost:3306/test</param-value> 
    </init-param> 
</servlet> 
        <!--servlet-mapping 标签给 servlet 程序配置访问地址--> 
<servlet-mapping> 
<!--servlet-name 标签的作用是告诉服务器,我当前配置的地址给哪个 Servlet 程序使用--> 
<servlet-name>HelloServlet</servlet-name> 
<!--url-pattern 标签配置访问地址 <br/> 
/ 斜杠在服务器解析的时候,表示地址为:http://ip:port/工程路径 <br/> 
/hello 表示地址为:http://ip:port/工程路径/hello <br/> --> 
<url-pattern>/hello</url-pattern> 
</servlet-mapping>

Servlet 中的代码:

 @Override
    public void init(ServletConfig servletConfig) throws ServletException {
        System.out.println("2 init 初始化方法");
        // 1、可以获取 Servlet 程序的别名 servlet-name 的值
        System.out.println("HelloServlet 程序的别名是:" + servletConfig.getServletName());
        // 2、获取初始化参数 init-param
        System.out.println("初始化参数 username 的值是;" + servletConfig.getInitParameter("username"));
        System.out.println("初始化参数 url 的值是;" + servletConfig.getInitParameter("url"));
        // 3、获取 ServletContext 对象
        System.out.println(servletConfig.getServletContext());
    }

注意点:
在这里插入图片描述

3.ServletContext 类

a)什么是 ServletContext?

1、ServletContext 是一个接口,它表示 Servlet 上下文对象
2、一个 web 工程,只有一个 ServletContext 对象实例。
3、ServletContext 对象是一个域对象。
4、ServletContext 是在 web 工程部署启动的时候创建。在 web 工程停止的时候销毁
什么是域对象?
域对象,是可以像 Map 一样存取数据的对象,叫域对象。
这里的域指的是存取数据的操作范围,整个 web 工程。

存数据取数据删除 数据
Mapput()get()remove()
域对象setAttribute()getAttribute()removeAttribute();

b)ServletContext 类的四个作用

1、获取 web.xml 中配置的上下文参数 context-param
2、获取当前的工程路径,格式: /工程路径
3、获取工程部署后在服务器硬盘上的绝对路径
4、像 Map 一样存取数据

ServletContext 演示代码:

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 1、获取 web.xml 中配置的上下文参数 context-param
        ServletContext context = getServletConfig().getServletContext();
        String username = context.getInitParameter("username");
        System.out.println("context-param 参数 username 的值是:" + username);
        System.out.println("context-param 参数 password 的值是:" + context.getInitParameter("password"));
        // 2、获取当前的工程路径,格式: /工程路径
        System.out.println( "当前工程路径:" + context.getContextPath() );
        // 3、获取工程部署后在服务器硬盘上的绝对路径
        /**
         * / 斜杠被服务器解析地址为:http://ip:port/工程名/ 映射到 IDEA 代码的 web 目录<br/>
         */
        System.out.println("工程部署的路径是:" + context.getRealPath("/"));
        System.out.println("工程下 css 目录的绝对路径是:" + context.getRealPath("/css"));
        System.out.println("工程下 imgs 目录 1.jpg 的绝对路径是:" + context.getRealPath("/imgs/1.jpg")); 
    }

web.xml 中的配置:


<!--context-param 是上下文参数(它属于整个 web 工程)-->
<context-param>
    <param-name>username</param-name>
    <param-value>context</param-value>
</context-param>
<!--context-param 是上下文参数(它属于整个 web 工程)-->
<context-param>
<param-name>password</param-name>
<param-value>root</param-value>
</context-param>

ServletContext 像 Map 一样存取数据:
ContextServlet1 代码:

public class ContextServlet1 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 获取 ServletContext 对象
        ServletContext context = getServletContext();
        System.out.println(context);
        System.out.println("保存之前: Context1 获取 key1 的值是:"+ context.getAttribute("key1"));
        context.setAttribute("key1", "value1");
        System.out.println("Context1 中获取域数据 key1 的值是:"+ context.getAttribute("key1"));

    }
}

ContextServlet2 代码:

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        ServletContext context = getServletContext();
        System.out.println(context);
        System.out.println("Context2 中获取域数据 key1 的值是:"+ context.getAttribute("key1"));
    }

4.HTTP 协议

a)什么是 HTTP 协议

什么是协议?
协议是指双方,或多方,相互约定好,大家都需要遵守的规则,叫协议。
所谓 HTTP 协议,就是指,客户端和服务器之间通信时,发送的数据,需要遵守的规则,叫 HTTP 协议。
HTTP 协议中的数据又叫报文。

b)请求的 HTTP 协议格式

客户端给服务器发送数据叫请求。
服务器给客户端回传数据叫响应。
请求又分为 GET 请求,和 POST 请求两种

i. GET 请求

1、请求行
(1) 请求的方式 GET
(2) 请求的资源路径[+?+请求参数]
(3) 请求的协议的版本号 HTTP/1.1
2、请求头
key : value 组成 不同的键值对,表示不同的含义。
在这里插入图片描述

ii. POST 请求

1、请求行
(1) 请求的方式 POST
(2) 请求的资源路径[+?+请求参数]
(3) 请求的协议的版本号 HTTP/1.1
2、请求头

  1. key : value 不同的请求头,有不同的含义
    空行

3、请求体 ===>>> 就是发送给服务器的数据
在这里插入图片描述

iii. 常用请求头的说明

Accept: 表示客户端可以接收的数据类型
Accpet-Languege: 表示客户端可以接收的语言类型
User-Agent: 表示客户端浏览器的信息
Host: 表示请求时的服务器 ip 和端口号

iv. 哪些是 GET 请求,哪些是 POST 请求

GET 请求有哪些:
1、form 标签 method=get
2、a 标签
3、link 标签引入 css
4、Script 标签引入 js 文件
5、img 标签引入图片
6、iframe 引入 html 页面
7、在浏览器地址栏中输入地址后敲回车
POST 请求有哪些:
8、form 标签 method=post

c)响应的 HTTP 协议格式

1、响应行
(1) 响应的协议和版本号
(2) 响应状态码
(3) 响应状态描述符
2、响应头
(1) key : value 不同的响应头,有其不同含义
空行
3、响应体 ---->>> 就是回传给客户端的数据
在这里插入图片描述

d)常用的响应码说明

200 表示请求成功
302 表示请求重定向
404 表示请求服务器已经收到了,但是你要的数据不存在(请求地址错误)
500 表示服务器已经收到请求,但是服务器内部错误(代码错误)

e)MIME 类型说明

MIME 是 HTTP 协议中数据类型。
MIME 的英文全称是"Multipurpose Internet Mail Extensions" 多功能 Internet 邮件扩充服务。MIME 类型的格式是“大类型/小 类型”,并与某一种文件的扩展名相对应。
常见的 MIME 类型:
在这里插入图片描述

在这里插入图片描述
谷歌浏览器如何查看 HTTP 协议:
在这里插入图片描述
火狐浏览器如何查看 HTTP 协议:
在这里插入图片描述
HTTP Request Header 请求头
在这里插入图片描述
在这里插入图片描述
HTTP Responses Header 响应头
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5、HttpServletRequest 类

a)HttpServletRequest 类有什么作用

每次只要有请求进入 Tomcat 服务器,Tomcat 服务器就会把请求过来的 HTTP 协议信息解析好封装到 Request 对象中。 然后传递到 service 方法(doGet 和 doPost)中给我们使用。我们可以通过 HttpServletRequest 对象,获取到所有请求的 信息。

b)HttpServletRequest 类的常用方法

i. getRequestURI() 获取请求的资源路径
ii. getRequestURL() 获取请求的统一资源定位符(绝对路径)
iii. getRemoteHost() 获取客户端的 ip 地址
iv. getHeader() 获取请求头
v. getParameter() 获取请求的参数
vi. getParameterValues() 获取请求的参数(多个值的时候使用)
vii. getMethod() 获取请求的方式 GET 或 POST
viii. setAttribute(key, value); 设置域数据
ix. getAttribute(key); 获取域数据
x. getRequestDispatcher() 获取请求转发对象
常用 API 示例代码:

public class RequestAPIServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // i.getRequestURI() 获取请求的资源路径
        System.out.println("URI => " + req.getRequestURI());
        // ii.getRequestURL() 获取请求的统一资源定位符(绝对路径)
        System.out.println("URL => " + req.getRequestURL());
        // iii.getRemoteHost() 获取客户端的 ip 地址
        /**
         * 在 IDEA 中,使用 localhost 访问时,得到的客户端 ip 地址是 ===>>> 127.0.0.1<br/>
         * 在 IDEA 中,使用 127.0.0.1 访问时,得到的客户端 ip 地址是 ===>>> 127.0.0.1<br/>
         * 在 IDEA 中,使用 真实 ip 访问时,得到的客户端 ip 地址是 ===>>> 真实的客户端 ip 地址<br/>
         */
        System.out.println("客户端 ip 地址 => " + req.getRemoteHost());
        // iv.getHeader() 获取请求头
        System.out.println("请求头 User-Agent ==>> " + req.getHeader("User-Agent"));
        // vii.getMethod() 获取请求的方式 GET 或 POST
        System.out.println( "请求的方式 ==>> " + req.getMethod() );
    }
}

c)如何获取请求参数

表单:
在这里插入图片描述
Java 代码:

public class ParameterServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 获取请求参数
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        String[] hobby = req.getParameterValues("hobby");
        System.out.println("用户名:" + username);
        System.out.println("密码:" + password);
        System.out.println("兴趣爱好:" + Arrays.asList(hobby));
    }
}

doGet 请求的中文乱码解决:

// 获取请求参数 
String username = req.getParameter("username"); 
//1 先以 iso8859-1 进行编码 
//2 再以 utf-8 进行解码 
username = new String(username.getBytes("iso-8859-1"), "UTF-8");

d)POST 请求的中文乱码解决

@Override 
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
// 设置请求体的字符集为 UTF-8,从而解决 post 请求的中文乱码问题 req.setCharacterEncoding("UTF-8"); 
System.out.println("-------------doPost------------"); 
// 获取请求参数 
String username = req.getParameter("username"); 
String password = req.getParameter("password"); 
String[] hobby = req.getParameterValues("hobby"); 
System.out.println("用户名:" + username); 
System.out.println("密码:" + password); 
System.out.println("兴趣爱好:" + Arrays.asList(hobby)); }

e)请求的转发

什么是请求的转发?
请求转发是指,服务器收到请求后,从一次资源跳转到另一个资源的操作叫请求转发。
在这里插入图片描述
Servlet1 代码:

public class Servlet1 extends HttpServlet { 
	@Override 
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
	// 获取请求的参数(办事的材料)查看 
	String username = req.getParameter("username"); 
	System.out.println("在 Servlet1(柜台 1)中查看参数(材料):" + username); 
	// 给材料 盖一个章,并传递到 Servlet2(柜台 2)去查看 
	req.setAttribute("key1","柜台 1 的章"); 
	// 问路:Servlet2(柜台 2)怎么走 
	/**
	* 请求转发必须要以斜杠打头,/ 斜杠表示地址为:http://ip:port/工程名/ , 映射到 IDEA 代码的 web 目录 <br/> *
	*/ 
	 RequestDispatcher requestDispatcher = req.getRequestDispatcher("/servlet2"); 
	 // RequestDispatcher requestDispatcher = req.getRequestDispatcher("http://www.baidu.com"); 
	 // 走向 Sevlet2(柜台 2) 
	 requestDispatcher.forward(req,resp);
	} 
}

Servlet2 代码:

public class Servlet2 extends HttpServlet { 
	@Override 
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
	// 获取请求的参数(办事的材料)查看 
	String username = req.getParameter("username"); 
	System.out.println("在 Servlet2(柜台 2)中查看参数(材料):" + username); 
	// 查看 柜台 1 是否有盖章 
	Object key1 = req.getAttribute("key1"); 
	System.out.println("柜台 1 是否有章:" + key1); 
	// 处理自己的业务 
	System.out.println("Servlet2 处理自己的业务 "); 
	} 
}

f) base 标签的作用

在这里插入图片描述
在这里插入图片描述

g)Web 中的相对路径和绝对路径

在 javaWeb 中,路径分为相对路径和绝对路径两种:
相对路径是:
. 表示当前目录
..表示上一级目录
资源名 表示当前目录/资源名
绝对路径:
http://ip:port/工程路径/资源路径
在实际开发中,路径都使用绝对路径,而不简单的使用相对路径。
1、绝对路径
2、base+相对

h)web 中 / 斜杠的不同意义

在 web 中 / 斜杠 是一种绝对路径。
/ 斜杠 如果被浏览器解析,得到的地址是:http://ip:port/

<a href=“/”>斜杠</a>

/ 斜杠 如果被服务器解析,得到的地址是:http://ip:port/工程路径
在这里插入图片描述
特殊情况: response.sendRediect(“/”); 把斜杠发送给浏览器解析。得到 http://ip:port/

6、HttpServletResponse 类

a)HttpServletResponse 类的作用

HttpServletResponse 类和 HttpServletRequest 类一样。每次请求进来,Tomcat 服务器都会创建一个 Response 对象传 递给 Servlet 程序去使用。HttpServletRequest 表示请求过来的信息,HttpServletResponse 表示所有响应的信息, 我们如果需要设置返回给客户端的信息,都可以通过 HttpServletResponse 对象来进行设置

b)两个输出流的说明

字节流 getOutputStream(); 常用于下载(传递二进制数据)
字符流 getWriter(); 常用于回传字符串(常用)
两个流同时只能使用一个。 使用了字节流,就不能再使用字符流,反之亦然,否则就会报错。

c)如何往客户端回传数据

要求 : 往客户端回传 字符串 数据。

public class ResponseIOServlet extends HttpServlet { 
	@Override 
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
	// 要求 : 往客户端回传 字符串 数据。 
	PrintWriter writer = resp.getWriter(); 
	writer.write("response's content!!!"); 
	} 
}

d)响应的乱码解决

解决响应中文乱码方案一(不推荐使用)

// 设置服务器字符集为 UTF-8 
resp.setCharacterEncoding("UTF-8"); 
// 通过响应头,设置浏览器也使用 UTF-8 字符集 
resp.setHeader("Content-Type", "text/html; charset=UTF-8");

解决响应中文乱码方案二(推荐):

// 它会同时设置服务器和客户端都使用 UTF-8 字符集,还设置了响应头 
// 此方法一定要在获取流对象之前调用才有效 
resp.setContentType("text/html; charset=UTF-8");

e)请求重定向

请求重定向,是指客户端给服务器发请求,然后服务器告诉客户端说。我给你一些地址。你去新地址访问。叫请求 重定向(因为之前的地址可能已经被废弃)。
在这里插入图片描述
请求重定向的第一种方案:
// 设置响应状态码 302 ,表示重定向,(已搬迁)
resp.setStatus(302);
// 设置响应头,说明 新的地址在哪里
resp.setHeader(“Location”, “http://localhost:8080”);

请求重定向的第二种方案(推荐使用):
resp.sendRedirect(“http://localhost:8080”);

jsp

1.什么是 jsp,它有什么用?

jsp 的全换是 java server pages。Java 的服务器页面。
jsp 的主要作用是代替 Servlet 程序回传 html 页面的数据。
因为 Servlet 程序回传 html 页面数据是一件非常繁锁的事情。开发成本和维护成本都极高。
Servlet 回传 html 页面数据的代码:

public class PringHtml extends HttpServlet { 
	@Override 
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
	// 通过响应的回传流回传 html 页面数据 
	resp.setContentType("text/html; charset=UTF-8"); 
	PrintWriter writer = resp.getWriter(); 
	writer.write("<!DOCTYPE html>\r\n");
	writer.write(" <html lang=\"en\">\r\n"); 
	writer.write(" <head>\r\n"); 
	writer.write(" <meta charset=\"UTF-8\">\r\n"); 
	writer.write(" <title>Title</title>\r\n"); 
	writer.write(" </head>\r\n"); 
	writer.write(" <body>\r\n"); 
	writer.write(" 这是 html 页面数据 \r\n"); 
	writer.write(" </body>\r\n"); 
	writer.write("</html>\r\n"); 
	writer.write("\r\n"); 
	} 
}

jsp 回传一个简单 html 页面的代码:
在这里插入图片描述
jsp 的小结:
1、如何创建 jsp 的页面?
在这里插入图片描述
输入文件名敲回车即可!!
在这里插入图片描述
2、jsp 如何访问:
jsp 页面和 html 页面一样,都是存放在 web 目录下。访问也跟访问 html 页面一样。
比如:
在 web 目录下有如下的文件:
web 目录
a.html 页面 访问地址是 =======>>>>>> http://ip:port/工程路径/a.html
b.jsp 页面 访问地址是 =======>>>>>> http://ip:port/工程路径/b.jsp

2.jsp 的本质是什么。

jsp 页面本质上是一个 Servlet 程序。
当我们第一次访问 jsp 页面的时候。Tomcat 服务器会帮我们把 jsp 页面翻译成为一个 java 源文件。并且对它进行编译成 为.class 字节码程序。我们打开 java 源文件不难发现其里面的内容是:
在这里插入图片描述
我们跟踪源代码发现,HttpJspBase 类。它直接地继承了 HttpServlet 类。也就是说。jsp 翻译出来的 java 类,它间接了继 承了 HttpServlet 类。也就是说,翻译出来的是一个 Servlet 程序
在这里插入图片描述
总结:通过翻译的 java 源代码我们就可以得到结果:jsp 就是 Servlet 程序。

大家也可以去观察翻译出来的 Servlet 程序的源代码,不难发现。其底层实现,也是通过输出流。把 html 页面数据回传 给客户端。

	 public void _jspService(final javax.servlet.http.HttpServletRequest request, final javax.servlet.http.HttpServletResponse response)
            throws java.io.IOException, javax.servlet.ServletException {
        final java.lang.String _jspx_method = request.getMethod();
        if (!"GET".equals(_jspx_method) && !"POST".equals(_jspx_method) && !"HEAD".equals(_jspx_method) &&
                !javax.servlet.DispatcherType.ERROR.equals(request.getDispatcherType())) {
            response.sendError(HttpServletResponse.SC_METHOD_NOT_ALLOWED, "JSPs only permit GET POST or HEAD");
            return;
        }
        final javax.servlet.jsp.PageContext pageContext;
        javax.servlet.http.HttpSession session = null;
        final javax.servlet.ServletContext application;
        final javax.servlet.ServletConfig config;
        javax.servlet.jsp.JspWriter out = null;
        final java.lang.Object page = this;
        javax.servlet.jsp.JspWriter _jspx_out = null;
        javax.servlet.jsp.PageContext _jspx_page_context = null;
        try {
            response.setContentType("text/html;charset=UTF-8");
            pageContext = _jspxFactory.getPageContext(this, request, response,
                    null, true, 8192, true);
            _jspx_page_context = pageContext;
            application = pageContext.getServletContext();
            config = pageContext.getServletConfig();
            session = pageContext.getSession();
            out = pageContext.getOut();
            _jspx_out = out;
            out.write("\r\n");
            out.write("\r\n");
            out.write("<html>\r\n");
            out.write("<head>\r\n");
            out.write(" <title>Title</title>\r\n");
            out.write("</head>\r\n");
            out.write("<body>\r\n");
            out.write(" a.jsp 页面\r\n");
            out.write("</body>\r\n");
            out.write("</html>\r\n");
        } catch (java.lang.Throwable t) {
            if (!(t instanceof javax.servlet.jsp.SkipPageException)) {
                out = _jspx_out;
                if (out != null && out.getBufferSize() != 0)
                    try {
                        if (response.isCommitted()) {
                            out.flush();
                        } else {
                            out.clearBuffer();
                        }
                    } catch (java.io.IOException e) {
                    }
                if (_jspx_page_context != null) _jspx_page_context.handlePageException(t);
                else throw new ServletException(t);
            }
        } finally {
            _jspxFactory.releasePageContext(_jspx_page_context);
        }
    }

3.jsp 的三种语法

a)jsp 头部的 page 指令

jsp 的 page 指令可以修改 jsp 页面中一些重要的属性,或者行为。
在这里插入图片描述
i. language 属性 表示 jsp 翻译后是什么语言文件。暂时只支持 java。
ii. contentType 属性 表示 jsp 返回的数据类型是什么。也是源码中 response.setContentType()参数值
iii. pageEncoding 属性 表示当前 jsp 页面文件本身的字符集。
iv. import 属性 跟 java 源代码中一样。用于导包,导类。
====================两个属性是给 out 输出流使用=========================
v. autoFlush 属性 设置当 out 输出流缓冲区满了之后,是否自动刷新冲级区。默认值是 true。
vi. buffer 属性 设置 out 缓冲区的大小。默认是 8kb
====================两个属性是给 out 输出流使用=========================
vii. errorPage 属性 设置当 jsp 页面运行时出错,自动跳转去的错误页面路径。
<!-- errorPage 表示错误后自动跳转去的路径 <br/> 这个路径一般都是以斜杠打头,它表示请求地址为 http://ip:port/工程路径/
映射到代码的 Web 目录 -->
viii. isErrorPage 属性 设置当前 jsp 页面是否是错误信息页面。默认是 false。如果是 true 可以 获取异常信息。
ix. session 属性 设置访问当前 jsp 页面,是否会创建 HttpSession 对象。默认是 true。
x. extends 属性 设置 jsp 翻译出来的 java 类默认继承谁。

b)jsp 中的常用脚本

i. 声明脚本(极少使用)

声明脚本的格式是: <%! 声明 java 代码 %>
作用:可以给 jsp 翻译出来的 java 类定义属性和方法甚至是静态代码块。内部类等。
1、声明类属性
2、声明 static 静态代码块
3、声明类方法
4、声明内部类
代码示例:

<%--1、声明类属性--%> 
<%! 
private Integer id; 
private String name; 
private static Map<String,Object> map; 
%> 
<%--2、声明 static 静态代码块--%> 
<%! 
static { 
map = new HashMap<String,Object>(); 
map.put("key1", "value1"); 
map.put("key2", "value2"); 
map.put("key3", "value3"); 
} 
%> 
<%--3、声明类方法--%> 
<%! 
public int abc(){ 
return 12; 
} 
%>
<%--4、声明内部类--%> 
<%! 
public static class A { 
private Integer id = 12; 
private String abc = "abc"; 
} 
%>

声明脚本代码翻译对照:
在这里插入图片描述

ii. 表达式脚本(常用)

表达式脚本的格式是:<%=表达式%>
表达式脚本的作用是:的 jsp 页面上输出数据

表达式脚本的特点:
1、所有的表达式脚本都会被翻译到_jspService() 方法中
2、表达式脚本都会被翻译成为 out.print()输出到页面上
3、由于表达式脚本翻译的内容都在_jspService() 方法中,所以_jspService()方法中的对象都可以直接使用。
4、表达式脚本中的表达式不能以分号结束。

  1. 输出整型
  2. 输出浮点型
  3. 输出字符串
  4. 输出对象

示例代码:

<%=12 %> <br> 
<%=12.12 %> <br> 
<%="我是字符串" %> <br> 
<%=map%> <br> 
<%=request.getParameter("username")%>

翻译对照:
在这里插入图片描述

iii. 代码脚本

代码脚本的格式是:
<% java 语句 %>
代码脚本的作用是:可以在 jsp 页面中,编写我们自己需要的功能(写的是 java 语句)。

代码脚本的特点是:
1、代码脚本翻译之后都在_jspService 方法中
2、代码脚本由于翻译到_jspService()方法中,所以在_jspService()方法中的现有对象都可以直接使用。
3、还可以由多个代码脚本块组合完成一个完整的 java 语句。
4、代码脚本还可以和表达式脚本一起组合使用,在 jsp 页面上输出数据

  1. 代码脚本----if 语句
  2. 代码脚本----for 循环语句
  3. 翻译后 java 文件中_jspService 方法内的代码都可以写

示例代码:

<%--练习:--%> 
<%--1.代码脚本----if 语句--%> 
<%
	int i = 13 ; 
	if (i == 12) { 
	%> 
		<h1>国哥好帅</h1> 
		<% 
		} else { 
		%> 
		<h1>国哥又骗人了!</h1> 
		<% 
			} 
		%> 
		<br> 
		<%--2.代码脚本----for 循环语句--%> 
		<table border="1" cellspacing="0"> 
		<% 
		for (int j = 0; j < 10; j++) { 
		%> 
		<tr>
			<td><%=j + 1%></td> 
		</tr> 
		<% 
			} 
		%>
		</table> 
		<%--3.翻译后 java 文件中_jspService 方法内的代码都可以写--%> 
		<% 
			String username = request.getParameter("username"); 
			System.out.println("用户名的请求参数值是:" + username);
		 %>

翻译之后的对比:
在这里插入图片描述

c)jsp 中的三种注释

i. html 注释
<!-- 这是 html 注释 -->
html 注释会被翻译到 java 源代码中。在_jspService 方法里,以 out.writer 输出到客户端。

ii. java 注释

<% 
// 单行 java 注释 
/* 多行 java 注释 */
 %>

java 注释会被翻译到 java 源代码中

iii. jsp 注释
<%-- 这是 jsp 注释 --%>
jsp 注释可以注掉,jsp 页面中所有代码。

4.jsp 九大内置对象

jsp 中的内置对象,是指 Tomcat 在翻译 jsp 页面成为 Servlet 源代码后,内部提供的九大对象,叫内置对象。
在这里插入图片描述
在这里插入图片描述

5.jsp 四大域对象

四个域对象分别是:
pageContext (PageContextImpl 类) 当前 jsp 页面范围内有效
request (HttpServletRequest 类)、 一次请求内有效
session (HttpSession 类)、 一个会话范围内有效(打开浏览器访问服务器,直到关闭浏览器)
application (ServletContext 类) 整个 web 工程范围内都有效(只要 web 工程不停止,数据都在)
域对象是可以像 Map 一样存取数据的对象。四个域对象功能一样。不同的是它们对数据的存取范围。
虽然四个域对象都可以存取数据。在使用上它们是有优先顺序的。
四个域在使用的时候,优先顺序分别是,他们从小到大的范围的顺序。
pageContext ====>>> request ====>>> session ====>>> application
scope.jsp 页面

<body> 
<h1>scope.jsp 页面</h1> 
<% 
// 往四个域中都分别保存了数据 
pageContext.setAttribute("key", "pageContext"); 
request.setAttribute("key", "request"); 
session.setAttribute("key", "session"); 
application.setAttribute("key", "application"); 
%>
pageContext 域是否有值:<%=pageContext.getAttribute("key")%> <br> 
request 域是否有值:<%=request.getAttribute("key")%> <br> 
session 域是否有值:<%=session.getAttribute("key")%> <br> 
application 域是否有值:<%=application.getAttribute("key")%> <br> 
<% 
request.getRequestDispatcher("/scope2.jsp").forward(request,response); 
%> 
</body>

scope2.jsp 页面

<body> 
<h1>scope2.jsp 页面</h1> 
pageContext 域是否有值:<%=pageContext.getAttribute("key")%> <br> 
request 域是否有值:<%=request.getAttribute("key")%> <br> 
session 域是否有值:<%=session.getAttribute("key")%> <br> 
application 域是否有值:<%=application.getAttribute("key")%> <br> 
</body>

6.jsp 中的 out 输出和 response.getWriter 输出的区 别

response 中表示响应,我们经常用于设置返回给客户端的内容(输出)
out 也是给用户做输出使用的
在这里插入图片描述
由于 jsp 翻译之后,底层源代码都是使用 out 来进行输出,所以一般情况下。我们在 jsp 页面中统一使用 out 来进行输出。避 免打乱页面输出内容的顺序。
out.write() 输出字符串没有问题
out.print() 输出任意数据都没有问题(都转换成为字符串后调用的 write 输出)
深入源码,浅出结论:在 jsp 页面中,可以统一使用 out.print()来进行输出

7.jsp 的常用标签

a)jsp 静态包含

示例说明:

<%--
	<%@ include file=""%> 就是静态包含 
	file 属性指定你要包含的 jsp 页面的路径 
	地址中第一个斜杠 / 表示为 http://ip:port/工程路径/ 映射到代码的 web 目录 

	静态包含的特点: 
		1、静态包含不会翻译被包含的 jsp 页面。 
		2、静态包含其实是把被包含的 jsp 页面的代码拷贝到包含的位置执行输出。
--%> 
<%@ include file="/include/footer.jsp"%>

b)jsp 动态包含

示例说明:

<%--
	<jsp:include page=""></jsp:include> 这是动态包含 
	page 属性是指定你要包含的 jsp 页面的路径 
	动态包含也可以像静态包含一样。把被包含的内容执行输出到包含位置 

	动态包含的特点: 
		1、动态包含会把包含的 jsp 页面也翻译成为 java 代码 
		2、动态包含底层代码使用如下代码去调用被包含的 jsp 页面执行输出。 
		JspRuntimeLibrary.include(request, response, "/include/footer.jsp", out, false); 
		3、动态包含,还可以传递参数 
		--%> 
		<jsp:include page="/include/footer.jsp"> 
		<jsp:param name="username" value="bbj"/> 
		<jsp:param name="password" value="root"/> 
		</jsp:include>

动态包含的底层原理:
在这里插入图片描述

c)jsp 标签-转发

示例说明:

<%--
<jsp:forward page="">
</jsp:forward> 是请求转发标签,它的功能就是请求转发 page 属性设置请求转发的路径 
--%> 
<jsp:forward page="/scope2.jsp"></jsp:forward>

8、什么是 Listener 监听器?

1、Listener 监听器它是 JavaWeb 的三大组件之一。JavaWeb 的三大组件分别是:Servlet 程序、Filter 过滤器、Listener 监 听器。
2、Listener 它是 JavaEE 的规范,就是接口
3、监听器的作用是,监听某种事物的变化。然后通过回调函数,反馈给客户(程序)去做一些相应的处理。

8.1、ServletContextListener 监听器

ServletContextListener 它可以监听 ServletContext 对象的创建和销毁。
ServletContext 对象在 web 工程启动的时候创建,在 web 工程停止的时候销毁。
监听到创建和销毁之后都会分别调用 ServletContextListener 监听器的方法反馈。
两个方法分别是:

public interface ServletContextListener extends EventListener { 
/**
* 在 ServletContext 对象创建之后马上调用,做初始化 
*/ 
public void contextInitialized(ServletContextEvent sce); 
/**
* 在 ServletContext 对象销毁之后调用 
* */ 
public void contextDestroyed(ServletContextEvent sce); }

如何使用 ServletContextListener 监听器监听 ServletContext 对象。
使用步骤如下:
1、编写一个类去实现 ServletContextListener
2、实现其两个回调方法
3、到 web.xml 中去配置监听器
监听器实现类:

public class MyServletContextListenerImpl implements ServletContextListener { 
	@Override 
	public void contextInitialized(ServletContextEvent sce) { 
		System.out.println("ServletContext 对象被创建了"); 
	}
	@Override 
	public void contextDestroyed(ServletContextEvent sce) { 
		System.out.println("ServletContext 对象被销毁了"); 
	} 
}

web.xml 中的配置:

<!--配置监听器--> 
<listener> 
<listener-class>com.atguigu.listener.MyServletContextListenerImpl</listener-class> 
</listener>

EL 表达式与JSTL 标签库

a)什么是 EL 表达式,EL 表达式的作用?

EL 表达式的全称是:Expression Language。是表达式语言。
EL 表达式的什么作用:EL 表达式主要是代替 jsp 页面中的表达式脚本在 jsp 页面中进行数据的输出。
因为 EL 表达式在输出数据的时候,要比 jsp 的表达式脚本要简洁很多。

<body> 
<% 
request.setAttribute("key","值"); 
%>
表达式脚本输出 key 的值是: 
<%=request.getAttribute("key1")==null?"":request.getAttribute("key1")%><br/> 
EL 表达式输出 key 的值是:${key1} 
</body>

EL 表达式的格式是:${表达式}
EL 表达式在输出 null 值的时候,输出的是空串。jsp 表达式脚本输出 null 值的时候,输出的是 null 字符串。

b)EL 表达式搜索域数据的顺序

EL 表达式主要是在 jsp 页面中输出数据。
主要是输出域对象中的数据。
当四个域中都有相同的 key 的数据的时候,EL 表达式会按照四个域的从小到大的顺序去进行搜索,找到就输出。

<body> 
<% 
//往四个域中都保存了相同的 key 的数据。 
request.setAttribute("key", "request");
session.setAttribute("key", "session"); 
application.setAttribute("key", "application"); 
pageContext.setAttribute("key", "pageContext"); 
%>
${ key } 
</body>

c)EL 表达式输出 Bean 的普通属性,数组属性。List 集 合属性,map 集合属性

i. 需求——输出 Person 类中普通属性,数组属性。list 集合属性和 map 集合属性。
Person 类

public class Person { 
// i.需求——输出 Person 类中普通属性,数组属性。list 集合属性和 map 集合属性。 
private String name; 
private String[] phones; 
private List<String> cities; 
private Map<String,Object> map; 
public int getAge() { 
return 18; 
}

输出的代码:

<body> 
<% 
	Person person = new Person(); 
	person.setName("国哥好帅!"); 
	person.setPhones(new String[]{"18610541354","18688886666","18699998888"}); 
	List<String> cities = new ArrayList<String>(); 
	cities.add("北京"); 
	cities.add("上海"); 
	cities.add("深圳"); 
	person.setCities(cities); 
	Map<String,Object>map = new HashMap<>(); 
	map.put("key1","value1"); 
	map.put("key2","value2"); 
	map.put("key3","value3"); 
	person.setMap(map);
pageContext.setAttribute("p", person); 
%>
	输出 Person:${ p }<br/> 
	输出 Person 的 name 属性:${p.name} <br> 
	输出 Person 的 pnones 数组属性值:${p.phones[2]} <br> 
	输出 Person 的 cities 集合中的元素值:${p.cities} <br> 
	输出 PersonList 集合中个别元素值:${p.cities[2]} <br> 
	输出 PersonMap 集合: ${p.map} <br> 
	输出 PersonMap 集合中某个 key 的值: ${p.map.key3} <br> 
	输出 Person 的 age 属性:${p.age} <br> 
</body>

d)EL 表达式——运算

语法:${ 运算表达式 } , EL 表达式支持如下运算符:
1)关系运算

关系运算符说 明范 例结果
== 或 eq等于${ 5 == 5 } 或 ${ 5 eq 5 }true
!= 或 ne不等于${ 5 !=5 } 或 ${ 5 ne 5 }false
< 或 lt小于${ 3 < 5 } 或 ${ 3 lt 5 }true
> 或 gt大于${ 2 > 10 } 或 ${ 2 gt 10 }false
<= 或 le小于等于${ 5 <= 12 } 或 ${ 5 le 12 }true
>= 或 ge大于等于${ 3 >= 5 } 或 ${ 3 ge 5 }false

2)逻辑运算

逻辑运算符说 明范 例结果
&& 或 and与运算${ 12 == 12 && 12 < 11 } 或 ${ 12 == 12 and 12 < 11 }false
|| 或 or或运算${ 12 == 12 || 12 < 11 } 或 ${ 12 == 12 or 12 < 11 }true
! 或 not取反运算${ !true } 或 ${not true }false

3)算数运算

算数运算符说 明范 例结果
+加法${ 12 + 18 }30
-减法${ 18 - 8 }10
*乘法${ 12 * 12 }144
/ 或 div除法${ 144 / 12 } 或 ${ 144 div 12 }12
% 或 mod取模${ 144 % 10 } 或 ${ 144 mod 10 }4

i. empty 运算
empty 运算可以判断一个数据是否为空,如果为空,则输出 true,不为空输出 false。
以下几种情况为空:
1、值为 null 值的时候,为空
2、值为空串的时候,为空
3、值是 Object 类型数组,长度为零的时候
4、list 集合,元素个数为零
5、map 集合,元素个数为零

<body> 
	<% 
	// 1、值为 null 值的时候,为空 
	request.setAttribute("emptyNull", null); 
	// 2、值为空串的时候,为空 
	request.setAttribute("emptyStr", ""); 
	// 3、值是 Object 类型数组,长度为零的时候 
	request.setAttribute("emptyArr", new Object[]{}); 
	// 4、list 集合,元素个数为零 
	List<String> list = new ArrayList<>(); 
	// list.add("abc"); 
	request.setAttribute("emptyList", list); 
	// 5、map 集合,元素个数为零 
	Map<String,Object> map = new HashMap<String, Object>(); 
	// map.put("key1", "value1"); 
	request.setAttribute("emptyMap", map); 
	%>
	${ empty emptyNull } <br/> 
	${ empty emptyStr } <br/> 
	${ empty emptyArr } <br/> 
	${ empty emptyList } <br/> 
	${ empty emptyMap } <br/> 
	</body>

ii. 三元运算
表达式 1?表达式 2:表达式 3
如果表达式 1 的值为真,返回表达式 2 的值,如果表达式 1 的值为假,返回表达式 3 的值。
示例:

${ 12 != 12 ? "国哥帅呆":"国哥又骗人啦" }

iii. “.”点运算 和 [] 中括号运算符
.点运算,可以输出 Bean 对象中某个属性的值。
[]中括号运算,可以输出有序集合中某个元素的值。
并且[]中括号运算,还可以输出 map 集合中 key 里含有特殊字符的 key 的值。

<body> 
<% 
Map<String,Object> map = new HashMap<String, Object>(); 
map.put("a.a.a", "aaaValue"); 
map.put("b+b+b", "bbbValue"); 
map.put("c-c-c", "cccValue"); 
request.setAttribute("map", map); 
%> 
${ map['a.a.a'] } <br> 
${ map["b+b+b"] } <br> 
${ map['c-c-c'] } <br> 
</body>

e)EL 表达式的 11 个隐含对象

EL 个达式中 11 个隐含对象,是 EL 表达式中自己定义的,可以直接使用。

变量类型作用
pageContextPageContextImpl它可以获取 jsp 中的九大内置对象
pageScopeMap<String,Object>它可以获取 pageContext 域中的数据
requestScopeMap<String,Object>它可以获取 Request 域中的数据
sessionScopeMap<String,Object>它可以获取 Session 域中的数据
applicationScopeMap<String,Object>它可以获取 ServletContext 域中的数据
paramMap<String,String>它可以获取请求参数的值
paramValuesMap<String,String[]>它也可以获取请求参数的值,获取多个值的时候使用。
headerMap<String,String>它可以获取请求头的信息
headerValuesMap<String,String[]>它可以获取请求头的信息,它可以获取多个值的情况
cookieMap<String,Cookie>它可以获取当前请求的 Cookie 信息
initParamMap<String,String>它可以获取在 web.xml 中配置的<context-param>上下文参数

i. EL 获取四个特定域中的属性
pageScope ====== pageContext 域
requestScope ====== Request 域
sessionScope ====== Session 域
applicationScope ====== ServletContext 域

<body> 
<% 
pageContext.setAttribute("key1", "pageContext1"); 
pageContext.setAttribute("key2", "pageContext2"); 
request.setAttribute("key2", "request"); 
session.setAttribute("key2", "session"); 
application.setAttribute("key2", "application"); 
%>
${ applicationScope.key2 } 
</body>

ii. pageContext 对象的使用

  1. 协议:
  2. 服务器 ip:
  3. 服务器端口:
  4. 获取工程路径:
  5. 获取请求方法:
  6. 获取客户端 ip 地址:
  7. 获取会话的 id 编号:
<body> 
<%-- 
request.getScheme() 它可以获取请求的协议 
request.getServerName() 获取请求的服务器 ip 或域名 
request.getServerPort() 获取请求的服务器端口号 
getContextPath() 获取当前工程路径 
request.getMethod() 获取请求的方式(GET 或 POST) 
request.getRemoteHost() 获取客户端的 ip 地址 
session.getId() 获取会话的唯一标识 
--%> 
<% 
pageContext.setAttribute("req", request); 
%>
<%=request.getScheme() %> <br>
1.协议: ${ req.scheme }<br> 
2.服务器 ip:${ pageContext.request.serverName }<br> 
3.服务器端口:${ pageContext.request.serverPort }<br> 
4.获取工程路径:${ pageContext.request.contextPath }<br> 
5.获取请求方法:${ pageContext.request.method }<br> 
6.获取客户端 ip 地址:${ pageContext.request.remoteHost }<br> 
7.获取会话的 id 编号:${ pageContext.session.id }<br> </body>

iii. EL 表达式其他隐含对象的使用
param Map<String,String> 它可以获取请求参数的值
paramValues Map<String,String[]> 它也可以获取请求参数的值,获取多个值的时候使用。
示例代码:

输出请求参数 username 的值:${ param.username } <br> 
输出请求参数 password 的值:${ param.password } <br> 
输出请求参数 username 的值:${ paramValues.username[0] } <br> 
输出请求参数 hobby 的值:${ paramValues.hobby[0] } <br> 
输出请求参数 hobby 的值:${ paramValues.hobby[1] } <br>

请求地址:
http://localhost:8080/09_EL_JSTL/other_el_obj.jsp?username=wzg168&password=666666&hobby=java&hobby=cpp

header Map<String,String> 它可以获取请求头的信息
headerValues Map<String,String[]> 它可以获取请求头的信息,它可以获取多个值的情况
示例代码:

输出请求头【User-Agent】的值:${ header['User-Agent'] } <br> 
输出请求头【Connection】的值:${ header.Connection } <br> 
输出请求头【User-Agent】的值:${ headerValues['User-Agent'][0] } <br>

cookie Map<String,Cookie> 它可以获取当前请求的 Cookie 信息
示例代码:

获取 Cookie 的名称:${ cookie.JSESSIONID.name } <br> 
获取 Cookie 的值:${ cookie.JSESSIONID.value } <br>

initParam Map<String,String> 它可以获取在 web.xml 中配置的上下文参数
web.xml 中的配置:

<context-param> 
<param-name>username</param-name> 
<param-value>root</param-value> 
</context-param> 
<context-param> 
<param-name>url</param-name> 
<param-value>jdbc:mysql:///test</param-value> 
</context-param>

示例代码:

输出&lt;Context-param&gt;username 的值:${ initParam.username } <br> 
输出&lt;Context-param&gt;url 的值:${ initParam.url } <br>

JSTL 标签库介绍

JSTL 标签库 全称是指 JSP Standard Tag Library JSP 标准标签库。是一个不断完善的开放源代码的 JSP 标 签库。
EL 表达式主要是为了替换 jsp 中的表达式脚本,而标签库则是为了替换代码脚本。这样使得整个 jsp 页面 变得更佳简洁

JSTL 由五个不同功能的标签库组成。

功能范围URI前缀
核心标签库–重点http://java.sun.com/jsp/jstl/corec
格式化http://java.sun.com/jsp/jstl/fmtfmt
函数http://java.sun.com/jsp/jstl/functionsfn
数据库(不使用)http://java.sun.com/jsp/jstl/sqlsql
XML(不使用)http://java.sun.com/jsp/jstl/xmlx

在 jsp 标签库中使用 taglib 指令引入标签库

CORE 标签库 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
XML 标签库
<%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml" %> 
FMT 标签库 
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> 
SQL 标签库 
<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %> 
FUNCTIONS 标签库 
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

f) JSTL 标签库的使用步骤

1、先导入 jstl 标签库的 jar 包。
taglibs-standard-impl-1.2.1.jar
taglibs-standard-spec-1.2.1.jar
2、第二步,使用 taglib 指令引入标签库

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

g)core 核心库使用

i. <c:set />(使用很少)
作用:set 标签可以往域中保存数据

<%-- 
i.<c:set /> 作用:set 标签可以往域中保存数据 
域对象.setAttribute(key,value); 
scope 属性设置保存到哪个域 
page 表示 PageContext 域(默认值) 
request 表示 Request 域 
session 表示 Session 域 application 表示 ServletContextvar 属性设置 key 是多少 
value 属性设置值 
--%> 
保存之前:${ sessionScope.abc } <br> 
<c:set scope="session" var="abc" value="abcValue"/> 
保存之后:${ sessionScope.abc } <br>

ii. <c:if />
if 标签用来做 if 判断

<%--ii.
<c:if /> 
if 标签用来做 if 判断。 
test 属性表示判断的条件(使用 EL 表达式输出) 
--%> 
<c:if test="${ 12 == 12 }"> 
<h1>12 等于 12</h1> 
</c:if> 
<c:if test="${ 12 != 12 }"> 
<h1>12 不等于 12</h1> 
</c:if>

iii. <c:choose> <c:when> <c:otherwise>标签
作用:多路判断。跟 switch … case … default 非常接近

<%-- 
iii.<c:choose> <c:when> <c:otherwise>标签 
作用:多路判断。跟 switch ... case .... default 非常接近 
choose 标签开始选择判断 
when 标签表示每一种判断情况 
test 属性表示当前这种判断情况的值 
otherwise 标签表示剩下的情况 
<c:choose> <c:when> <c:otherwise>标签使用时需要注意的点: 
1、标签里不能使用 html 注释,要使用 jsp 注释 
2、when 标签的父标签一定要是 choose 标签 
--%> 
<% 
request.setAttribute("height", 180); 
%>
<c:choose> 
<%-- 这是 html 注释 --%> 
<c:when test="${ requestScope.height > 190 }"> 
<h2>小巨人</h2> 
</c:when> <c:when test="${ requestScope.height > 180 }"> 
<h2>很高</h2> 
</c:when> <c:when test="${ requestScope.height > 170 }"> 
<h2>还可以</h2> 
</c:when>
<c:otherwise> 
<c:choose> 
<c:when test="${requestScope.height > 160}"> 
<h3>大于 160</h3> 
</c:when> <c:when test="${requestScope.height > 150}"> 
<h3>大于 150</h3> 
</c:when> 
<c:when test="${requestScope.height > 140}"> 
<h3>大于 140</h3> 
</c:when> 
<c:otherwise> 其他小于 140 </c:otherwise> 
</c:choose> 
</c:otherwise> 
</c:choose>

iv. <c:forEach />
作用:遍历输出使用

  1. 遍历 1 到 10,输出
    示例代码:
<%--1.遍历 110,输出 
begin 属性设置开始的索引 
end 属性设置结束的索引 
var 属性表示循环的变量(也是当前正在遍历到的数据) 
for (int i = 1; i < 10; i++) 
--%> 
<table border="1"> 
<c:forEach begin="1" end="10" var="i"> 
<tr>
<td>第${i}</td> 
</tr> 
</c:forEach> 
</table>
  1. 遍历 Object 数组
    示例代码:
<%-- 2.遍历 Object 数组 
for (Object item: arr) 
items 表示遍历的数据源(遍历的集合) 
var 表示当前遍历到的数据 
--%> 
<% 
request.setAttribute("arr", new String[]{"18610541354","18688886666","18699998888"}); 
%>
<c:forEach items="${ requestScope.arr }" var="item"> 
${ item } <br> 
</c:forEach>
  1. 遍历 Map 集合
    示例代码:
<% 
Map<String,Object> map = new HashMap<String, Object>(); 
map.put("key1", "value1"); 
map.put("key2", "value2"); 
map.put("key3", "value3"); 
// for ( Map.Entry<String,Object> entry : map.entrySet()) { 
// } 
request.setAttribute("map", map); 
%>
<c:forEach items="${ requestScope.map }" var="entry"> 
<h1>${entry.key} = ${entry.value}</h1> 
</c:forEach>
  1. 遍历 List 集合—list 中存放 Student 类,有属性:编号,用户名,密码,年龄, 电话信息
    Student 类:
public class Student { 
//4.编号,用户名,密码,年龄,电话信息 
private Integer id; 
private String username; 
private String password; 
private Integer age; 
private String phone;

示例代码:

<%--4.遍历 List 集合---list 中存放 Student 类,有属性:编号,用户名,密码,年龄,电话信息--%> 
<% 
List<Student> studentList = new ArrayList<Student>(); 
for (int i = 1; i <= 10; i++) { 
studentList.add(new Student(i,"username"+i ,"pass"+i,18+i,"phone"+i)); 
}
request.setAttribute("stus", studentList); 
%>
<table> 
<tr>
<th>编号</th> 
<th>用户名</th> 
<th>密码</th> 
<th>年龄</th> 
<th>电话</th> 
<th>操作</th> 
</tr> 
<%--
items 表示遍历的集合 
var 表示遍历到的数据 
begin 表示遍历的开始索引值 
end 表示结束的索引值 
step 属性表示遍历的步长值 
varStatus 属性表示当前遍历到的数据的状态 
forint i = 1; i < 10; i+=2--%> 
<c:forEach begin="2" end="7" step="2" varStatus="status" items="${requestScope.stus}" var="stu"> 
<tr>
<td>${stu.id}</td> 
<td>${stu.username}</td> 
<td>${stu.password}</td> 
<td>${stu.age}</td> 
<td>${stu.phone}</td> 
<td>${status.step}</td> 
</tr> 
</c:forEach> 
</table>

Cookie 和 Session

Cookie

a)什么是 Cookie?

1、Cookie 翻译过来是饼干的意思。
2、Cookie 是服务器通知客户端保存键值对的一种技术。
3、客户端有了 Cookie 后,每次请求都发送给服务器。
4、每个 Cookie 的大小不能超过 4kb

b)如何创建 Cookie

在这里插入图片描述
Servlet 程序中的代码:

protected void createCookie(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
//1 创建 Cookie 对象
Cookie cookie = new Cookie("key4", "value4"); 
//2 通知客户端保存 
Cookie resp.addCookie(cookie); 
//1 创建 Cookie 对象 
Cookie cookie1 = new Cookie("key5", "value5"); 
//2 通知客户端保存 
Cookie resp.addCookie(cookie1); 
resp.getWriter().write("Cookie 创建成功"); 
}

c)服务器如何获取 Cookie

服务器获取客户端的 Cookie 只需要一行代码:req.getCookies():Cookie[]
在这里插入图片描述
Cookie 的工具类:

public class CookieUtils { 
/**
* 查找指定名称的 Cookie 对象 
* @param name 
* @param cookies 
* @return 
*/ 
public static Cookie findCookie(String name , Cookie[] cookies){ 
	if (name == null || cookies == null || cookies.length == 0) { 
		return null; 
	}
	for (Cookie cookie : cookies) { 
		if (name.equals(cookie.getName())) { 
			return cookie;
		} 
	}
		return null; 
	} 
}

Servlet 程序中的代码:

protected void getCookie(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
	Cookie[] cookies = req.getCookies(); 
	for (Cookie cookie : cookies) { 
		// getName 方法返回 Cookie 的 key(名) 
		// getValue 方法返回 Cookie 的 value 值 				
		resp.getWriter().write("Cookie[" + cookie.getName() + "=" + cookie.getValue() + "] <br/>"); 
		}
		Cookie iWantCookie = CookieUtils.findCookie("key1", cookies); 
		// for (Cookie cookie : cookies) { 
			// if ("key2".equals(cookie.getName())) { 
			// iWantCookie = cookie; 
			// break; 
			// } 
		// } 
		// 如果不等于 null,说明赋过值,也就是找到了需要的 Cookie 
			if (iWantCookie != null) { 
				resp.getWriter().write("找到了需要的 Cookie"); 
			} 
		}

d)Cookie 值的修改

方案一:
1、先创建一个要修改的同名(指的就是 key)的 Cookie 对象
2、在构造器,同时赋于新的 Cookie 值。
3、调用 response.addCookie( Cookie );

// 方案一: 
// 1、先创建一个要修改的同名的 Cookie 对象 
// 2、在构造器,同时赋于新的 Cookie 值。
Cookie cookie = new Cookie("key1","newValue1"); 
// 3、调用 response.addCookie( Cookie ); 通知 客户端 保存修改 
resp.addCookie(cookie);

方案二:
1、先查找到需要修改的 Cookie 对象
2、调用 setValue()方法赋于新的 Cookie 值。
3、调用 response.addCookie()通知客户端保存修改

// 方案二: 
// 1、先查找到需要修改的 Cookie 对象 
Cookie cookie = CookieUtils.findCookie("key2", req.getCookies()); 
if (cookie != null) { 
	// 2、调用 setValue()方法赋于新的 Cookie 值。 
	cookie.setValue("newValue2"); 
	// 3、调用 response.addCookie()通知客户端保存修改 
	resp.addCookie(cookie); 
}

e)浏览器查看 Cookie:

谷歌浏览器如何查看 Cookie:
在这里插入图片描述
火狐浏览器如何查看 Cookie:
在这里插入图片描述

f) Cookie 生命控制

Cookie 的生命控制指的是如何管理 Cookie 什么时候被销毁(删除)
setMaxAge()
正数,表示在指定的秒数后过期
负数,表示浏览器一关,Cookie 就会被删除(默认值是-1)
零,表示马上删除 Cookie

/**
* 设置存活 1 个小时的 Cooie 
* @param req 
* @param resp 
* @throws ServletException 
* @throws IOException 
*/ 
protected void life3600(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
	Cookie cookie = new Cookie("life3600", "life3600"); 
	cookie.setMaxAge(60 * 60); 
	// 设置 Cookie 一小时之后被删除。无效 
	resp.addCookie(cookie); 
	resp.getWriter().write("已经创建了一个存活一小时的 Cookie"); 
}
	/**
	* 马上删除一个 Cookie 
	* @param req 
	* @param resp 
	* @throws ServletException 
	* @throws IOException 
	*/ 
	protected void deleteNow(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// 先找到你要删除的 Cookie 对象 
		Cookie cookie = CookieUtils.findCookie("key4", req.getCookies()); 
		if (cookie != null) { 
		// 调用 setMaxAge(0); 
		cookie.setMaxAge(0); 
		// 表示马上删除,都不需要等待浏览器关闭 
		// 调用 response.addCookie(cookie); 
		resp.addCookie(cookie); 
		resp.getWriter().write("key4 的 Cookie 已经被删除"); 
		} 
	}
	/**
	* 默认的会话级别的 Cookie 
	* @param req 
	* @param resp 
	* @throws ServletException 
	* @throws IOException 
	*/ 
	protected void defaultLife(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
	Cookie cookie = new Cookie("defalutLife","defaultLife"); 
	cookie.setMaxAge(-1);
	//设置存活时间 
	resp.addCookie(cookie); 
	}

g)Cookie 有效路径 Path 的设置

Cookie 的 path 属性可以有效的过滤哪些 Cookie 可以发送给服务器。哪些不发。
path 属性是通过请求的地址来进行有效的过滤。
CookieA path=/工程路径
CookieB path=/工程路径/abc
请求地址如下:
http://ip:port/工程路径/a.html
CookieA 发送
CookieB 不发送
http://ip:port/工程路径/abc/a.html
CookieA 发送
CookieB 发送

protected void testPath(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
	Cookie cookie = new Cookie("path1", "path1"); 
	// getContextPath() ===>>>> 得到工程路径 
	cookie.setPath( req.getContextPath() + "/abc" ); 
	// ===>>>> /工程路径/abc 
	resp.addCookie(cookie); 
	resp.getWriter().write("创建了一个带有 Path 路径的 Cookie"); 
}

h) Cookie 练习—免输入用户名登录

在这里插入图片描述
login.jsp 页面

<form action="http://localhost:8080/13_cookie_session/loginServlet" method="get"> 
用户名:<input type="text" name="username" value="${cookie.username.value}"> <br> 
密码:<input type="password" name="password"> <br> 
<input type="submit" value="登录"> 
</form>

LoginServlet 程序:

@Override 
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
	String username = req.getParameter("username"); 
	String password = req.getParameter("password");
	if ("wzg168".equals(username) && "123456".equals(password)) { 
	//登录 成功 
	Cookie cookie = new Cookie("username", username); 
	cookie.setMaxAge(60 * 60 * 24 * 7);
	//当前 Cookie 一周内有效 
	resp.addCookie(cookie); 
	System.out.println("登录 成功"); 
	} else { 
	// 登录 失败 
	System.out.println("登录 失败"); 
	} 
}

Session

i) 什么是 Session 会话?

1、Session 就一个接口(HttpSession)。
2、Session 就是会话。它是用来维护一个客户端和服务器之间关联的一种技术。
3、每个客户端都有自己的一个 Session 会话。
4、Session 会话中,我们经常用来保存用户登录之后的信息。

j) 如何创建 Session 和获取(id 号,是否为新)

如何创建和获取 Session。它们的 API 是一样的。
request.getSession()
第一次调用是:创建 Session 会话
之后调用都是:获取前面创建好的 Session 会话对象。

isNew(); 判断到底是不是刚创建出来的(新的)
true 表示刚创建
false 表示获取之前创建

每个会话都有一个身份证号。也就是 ID 值。而且这个 ID 是唯一的。
getId() 得到 Session 的会话 id 值。

k)Session 域数据的存取

/**
* 往 Session 中保存数据 
* @param req
* @param resp 
* @throws ServletException 
* @throws IOException 
*/ 
protected void setAttribute(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
	req.getSession().setAttribute("key1", "value1"); 
	resp.getWriter().write("已经往 Session 中保存了数据"); 
}
/**
* 获取 Session 域中的数据 
* @param req 
* @param resp 
* @throws ServletException 
* @throws IOException 
*/ 
protected void getAttribute(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
	Object attribute = req.getSession().getAttribute("key1"); 
	resp.getWriter().write("从 Session 中获取出 key1 的数据是:" + attribute); 
}

l) Session 生命周期控制

public void setMaxInactiveInterval(int interval) 设置 Session 的超时时间(以秒为单位),超过指定的时长,Session 就会被销毁。
值为正数的时候,设定 Session 的超时时长。
负数表示永不超时(极少使用)

public int getMaxInactiveInterval()获取 Session 的超时时间
public void invalidate() 让当前 Session 会话马上超时无效。

Session 默认的超时时长是多少!
Session 默认的超时时间长为 30 分钟。
因为在 Tomcat 服务器的配置文件 web.xml中默认有以下的配置,它就表示配置了当前 Tomcat 服务器下所有的 Session 超时配置默认时长为:30 分钟。

<session-config>
<session-timeout>30</session-timeout>
</session-config>

如果说。你希望你的 web 工程,默认的 Session 的超时时长为其他时长。你可以在你自己的 web.xml 配置文件中做 以上相同的配置。就可以修改你的 web 工程所有 Seession 的默认超时时长。

<!--表示当前 web 工程。创建出来 的所有 Session 默认是 20 分钟 超时时长--> 
<session-config> 
	<session-timeout>20</session-timeout> 
</session-config>

如果你想只修改个别 Session 的超时时长。就可以使用上面的 API。setMaxInactiveInterval(int interval)来进行单独的设 置。

session.setMaxInactiveInterval(int interval)单独设置超时时长。

Session 超时的概念介绍:
在这里插入图片描述
示例代码:

protected void life3(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
	// 先获取 Session 对象 
	HttpSession session = req.getSession(); 
	// 设置当前 Session3 秒后超时 
	session.setMaxInactiveInterval(3); 
	resp.getWriter().write("当前 Session 已经设置为 3 秒后超时"); 
}

Session 马上被超时示例:

protected void deleteNow(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
// 先获取 Session 对象 
	HttpSession session = req.getSession(); 
// 让 Session 会话马上超时 
	session.invalidate(); 
	resp.getWriter().write("Session 已经设置为超时(无效)"); 
}

m) 浏览器和 Session 之间关联的技术内幕

Session 技术,底层其实是基于 Cookie 技术来实现的。
在这里插入图片描述

Filter 过滤器

1、Filter 什么是过滤器

1、Filter 过滤器它是 JavaWeb 的三大组件之一。三大组件分别是:Servlet 程序、Listener 监听器、Filter 过滤器
2、Filter 过滤器它是 JavaEE 的规范。也就是接口
3、Filter 过滤器它的作用是:拦截请求,过滤响应。
拦截请求常见的应用场景有:
1、权限检查
2、日记操作
3、事务管理 ……等等

2、Filter 的初体验

要求:在你的 web 工程下,有一个 admin 目录。这个 admin 目录下的所有资源(html 页面、jpg 图片、jsp 文件、等等)都必 须是用户登录之后才允许访问。

思考:根据之前我们学过内容。我们知道,用户登录之后都会把用户登录的信息保存到 Session 域中。所以要检查用户是否 登录,可以判断 Session 中否包含有用户登录的信息即可!!!

<% 
	Object user = session.getAttribute("user"); 
	// 如果等于 null,说明还没有登录 
	if (user == null) { 
	request.getRequestDispatcher("/login.jsp").forward(request,response); 
	return; 
} 
%>

Filter 的工作流程图:
在这里插入图片描述
Filter 的代码:

public class AdminFilter implements Filter { 
	/**
	* doFilter 方法,专门用于拦截请求。可以做权限检查 
	*/ 
	@Override 
	public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException { 
	HttpServletRequest httpServletRequest = (HttpServletRequest) servletRequest; 
	HttpSession session = httpServletRequest.getSession(); 
	Object user = session.getAttribute("user"); 
	// 如果等于 null,说明还没有登录 
		if (user == null) { 
		servletRequest.getRequestDispatcher("/login.jsp").forward(servletRequest,servletResponse); 
		return; 
		} else { 
		// 让程序继续往下访问用户的目标资源 
		filterChain.doFilter(servletRequest,servletResponse); 
		} 
	} 
}

web.xml 中的配置:

<!--filter 标签用于配置一个 Filter 过滤器--> 
<filter> 
	<!--给 filter 起一个别名--> 
	<filter-name>AdminFilter</filter-name> 
	<!--配置 filter 的全类名--> 
	<filter-class>com.atguigu.filter.AdminFilter</filter-class> 
</filter>
<!--filter-mapping 配置 Filter 过滤器的拦截路径--> 
<filter-mapping> 
	<!--filter-name 表示当前的拦截路径给哪个 filter 使用--> 
	<filter-name>AdminFilter</filter-name> 
	<!--url-pattern 配置拦截路径 
	/ 表示请求地址为:http://ip:port/工程路径/ 映射到 IDEA 的 web 目录 
	/admin/* 表示请求地址为:http://ip:port/工程路径/admin/* --> 
	<url-pattern>/admin/*</url-pattern> 
</filter-mapping>

Filter 过滤器的使用步骤:
1、编写一个类去实现 Filter 接口
2、实现过滤方法 doFilter()
3、到 web.xml 中去配置 Filter 的拦截路径
完整的用户登录
login.jsp 页面 == 登录表单

这是登录页面。login.jsp 页面 <br> 
<form action="http://localhost:8080/15_filter/loginServlet" method="get"> 
	用户名:<input type="text" name="username"/> <br> 
	密 码:<input type="password" name="password"/> <br> 
	<input type="submit" /> 
</form>

LoginServlet 程序

public class LoginServlet extends HttpServlet { 
@Override 
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
	resp.setContentType("text/html; charset=UTF-8"); 
	String username = req.getParameter("username"); 
	String password = req.getParameter("password"); 
	if ("wzg168".equals(username) && "123456".equals(password)) { 
		req.getSession().setAttribute("user",username); 
		resp.getWriter().write("登录 成功!!!"); 
		} else { 
		req.getRequestDispatcher("/login.jsp").forward(req,resp); 
		} 
	} 
}

3、Filter 的生命周期

Filter 的生命周期包含几个方法
1、构造器方法
2、init 初始化方法
第 1,2 步,在 web 工程启动的时候执行(Filter 已经创建)
3、doFilter 过滤方法
第 3 步,每次拦截到请求,就会执行
4、destroy 销毁
第 4 步,停止 web 工程的时候,就会执行(停止 web 工程,也会销毁 Filter 过滤器)

4、FilterConfig 类

FilterConfig 类见名知义,它是 Filter 过滤器的配置文件类。
Tomcat 每次创建 Filter 的时候,也会同时创建一个 FilterConfig 类,这里包含了 Filter 配置文件的配置信息。

FilterConfig 类的作用是获取 filter 过滤器的配置内容
1、获取 Filter 的名称 filter-name 的内容
2、获取在 Filter 中配置的 init-param 初始化参数
3、获取 ServletContext 对象
java 代码:

@Override 
public void init(FilterConfig filterConfig) throws ServletException { 
	System.out.println("2.Filter 的 init(FilterConfig filterConfig)初始化"); 
	// 1、获取 Filter 的名称 filter-name 的内容 
	System.out.println("filter-name 的值是:" + filterConfig.getFilterName()); 
	// 2、获取在 web.xml 中配置的 init-param 初始化参数 
	System.out.println("初始化参数 username 的值是:" + 
	filterConfig.getInitParameter("username")); 
	System.out.println("初始化参数 url 的值是:" + 
	filterConfig.getInitParameter("url")); 
	// 3、获取 ServletContext 对象 
	System.out.println(filterConfig.getServletContext()); 
	}

web.xml 配置:

<!--filter 标签用于配置一个 Filter 过滤器--> 
<filter> 
	<!--给 filter 起一个别名--> 
	<filter-name>AdminFilter</filter-name> 
	<!--配置 filter 的全类名-->
	<filter-class>com.atguigu.filter.AdminFilter</filter-class> 
	<init-param> 
		<param-name>username</param-name> 
		<param-value>root</param-value> 
	</init-param> 
	<init-param> 
		<param-name>url</param-name> 
		<param-value>jdbc:mysql://localhost3306/test</param-value> 
	</init-param> 
</filter>

5、FilterChain 过滤器链

Filter 过滤器
Chain 链,链条
FilterChain 就是过滤器链(多个过滤器如何一起工作)

在这里插入图片描述

6、Filter 的拦截路径

–精确匹配

<url-pattern>/target.jsp</url-pattern>

以上配置的路径,表示请求地址必须为:http://ip:port/工程路径/target.jsp

–目录匹配

<url-pattern>/admin/*</url-pattern>

以上配置的路径,表示请求地址必须为:http://ip:port/工程路径/admin/*

–后缀名匹配

<url-pattern>*.html</url-pattern>

以上配置的路径,表示请求地址必须以.html 结尾才会拦截到

<url-pattern>*.do</url-pattern>

以上配置的路径,表示请求地址必须以.do 结尾才会拦截到

<url-pattern>*.action</url-pattern>

以上配置的路径,表示请求地址必须以.action 结尾才会拦截到

Filter 过滤器它只关心请求的地址是否匹配,不关心请求的资源是否存在!!!

JSON和AJAX 请求

1、什么是 JSON?

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。JSON 采用完全独立于语言的文本格式,而且很多语言都提供了对 json 的支持(包括 C, C++, C#, Java, JavaScript, Perl, Python 等)。 这样就使得 JSON 成为理想的数据交换格式。
json 是一种轻量级的数据交换格式。
轻量级指的是跟 xml 做比较。
数据交换指的是客户端和服务器之间业务数据的传递格式

1.1、JSON 在 JavaScript 中的使用。

1.1.1、json 的定义

json 是由键值对组成,并且由花括号(大括号)包围。每个键由引号引起来,键和值之间使用冒号进行分隔, 多组键值对之间进行逗号进行分隔。
json 定义示例:

var jsonObj = {
	"key1": 12,
	"key2": "abc",
	"key3": true,
	"key4": [11, "arr", false],
	"key5": {
		"key5_1": 551,
		"key5_2": "key5_2_value"
	},
	"key6": [{
		"key6_1_1": 6611,
		"key6_1_2": "key6_1_2_value"
	}, {
		"key6_2_1": 6621,
		"key6_2_2": "key6_2_2_value"
	}]
};
1.1.2、json 的访问

json 本身是一个对象。
json 中的 key 我们可以理解为是对象中的一个属性。
json 中的 key 访问就跟访问对象的属性一样: json 对象.key
json 访问示例:

alert(typeof(jsonObj));// object json 就是一个对象 
alert(jsonObj.key1); //12 
alert(jsonObj.key2); // abc 
alert(jsonObj.key3); // true 
alert(jsonObj.key4);// 得到数组[11,"arr",false] 
// json 中 数组值的遍历 
for(var i = 0; i < jsonObj.key4.length; i++) { 
	alert(jsonObj.key4[i]); 
}
	alert(jsonObj.key5.key5_1);//551 
	alert(jsonObj.key5.key5_2);//key5_2_value 
	alert( jsonObj.key6 );// 得到 json 数组 // 取出来每一个元素都是 json 对象 var 
	jsonItem = jsonObj.key6[0]; 
	// alert( jsonItem.key6_1_1 ); //6611 
	alert( jsonItem.key6_1_2 ); //key6_1_2_value
1.1.3、json 的两个常用方法

json 的存在有两种形式。
一种是:对象的形式存在,我们叫它 json 对象。
一种是:字符串的形式存在,我们叫它 json 字符串。
一般我们要操作 json 中的数据的时候,需要 json 对象的格式。
一般我们要在客户端和服务器之间进行数据交换的时候,使用 json 字符串。
JSON.stringify() 把 json 对象转换成为 json 字符串
JSON.parse() 把 json 字符串转换成为 json 对象
示例代码:

// 把 json 对象转换成为 json 字符串 
var jsonObjString = JSON.stringify(jsonObj); 
// 特别像 Java 中对象的 toString 
alert(jsonObjString) 
// 把 json 字符串。转换成为 json 对象 
var jsonObj2 = JSON.parse(jsonObjString); 
alert(jsonObj2.key1);// 12 
alert(jsonObj2.key2);// abc

1.2、JSON 在 java 中的使用

1.2.1、javaBean 和 json 的互转
@Test 
public void test1(){ 
	Person person = new Person(1,"国哥好帅!"); 
	// 创建 Gson 对象实例 
	Gson gson = new Gson(); 
	// toJson 方法可以把 java 对象转换成为 json 字符串 
	String personJsonString = gson.toJson(person); 
	System.out.println(personJsonString); 
	// fromJson 把 json 字符串转换回 Java 对象 
	// 第一个参数是 json 字符串 
	// 第二个参数是转换回去的 Java 对象类型 
	Person person1 = gson.fromJson(personJsonString, Person.class); 
	System.out.println(person1); 
}
1.2.2、List 和 json 的互转
// 1.2.2、List 和 json 的互转 
@Test 
public void test2() { 
	List<Person> personList = new ArrayList<>(); 
	personList.add(new Person(1, "国哥")); 
	personList.add(new Person(2, "康师傅")); 
	Gson gson = new Gson(); 
	// 把 List 转换为 json 字符串 
	String personListJsonString = gson.toJson(personList); 
	System.out.println(personListJsonString);
	List<Person> list = gson.fromJson(personListJsonString, new PersonListType().getType()); 
	System.out.println(list); 
	Person person = list.get(0); 
	System.out.println(person); 
}
1.2.3、map 和 json 的互转
// 1.2.3、map 和 json 的互转 
@Test 
public void test3(){ 
	Map<Integer,Person> personMap = new HashMap<>(); 
	personMap.put(1, new Person(1, "国哥好帅")); 
	personMap.put(2, new Person(2, "康师傅也好帅")); 
	Gson gson = new Gson(); 
	// 把 map 集合转换成为 json 字符串 
	String personMapJsonString = gson.toJson(personMap); 
	System.out.println(personMapJsonString); 
	// Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new PersonMapType().getType()); 
	Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new TypeToken<HashMap<Integer,Person>>(){}.getType()); 
	System.out.println(personMap2); 
	Person p = personMap2.get(1); 
	System.out.println(p); 
}

2.1、什么是 AJAX 请求

AJAX 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发 技术。

ajax 是一种浏览器通过 js 异步发起请求,局部更新页面的技术。
Ajax 请求的局部更新,浏览器地址栏不会发生变化
局部更新不会舍弃原来页面的内容

2.2、原生 AJAX 请求的示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
	<head> 
		<meta http-equiv="pragma" content="no-cache" /> 
		<meta http-equiv="cache-control" content="no-cache" /> 
		<meta http-equiv="Expires" content="0" /> 
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
		<title>Insert title here</title> 
		<script type="text/javascript"> 
		// 在这里使用 javaScript 语言发起 Ajax 请求,访问服务器 AjaxServlet 中 javaScriptAjax 
		function ajaxRequest() { 
		// 1、我们首先要创建 XMLHttpRequest 
		var xmlhttprequest = new XMLHttpRequest(); 
		// 2、调用 open 方法设置请求参数
		xmlhttprequest.open("GET","http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAj ax",true)
		// 4、在 send 方法前绑定 onreadystatechange 事件,处理请求完成后的操作。 
		xmlhttprequest.onreadystatechange = function(){ 
		if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) { 
		var jsonObj = JSON.parse(xmlhttprequest.responseText); 
		// 把响应的数据显示在页面上 
		document.getElementById("div01").innerHTML = "编号:" + jsonObj.id + " , 姓名:" + jsonObj.name; 
		} 
	} 
	// 3、调用 send 方法发送请求 
	xmlhttprequest.send();
	} 
	</script> 
	</head> 
	<body> 
	<button onclick="ajaxRequest()">ajax request</button> 
	<div id="div01"> </div> 
	</body> 
	</html>

2.3、jQuery 中的 AJAX 请求

$.ajax 方法
url 表示请求的地址
type 表示请求的类型 GET 或 POST 请求
data 表示发送给服务器的数据
格式有两种:
一:name=value&name=value
二:{key:value}
success 请求成功,响应的回调函数
dataType 响应的数据类型
常用的数据类型有:
text 表示纯文本
xml 表示 xml 数据
json 表示 json 对象

$("#ajaxBtn").click(function(){ 
	$.ajax({ 
	url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet", 
	// data:"action=jQueryAjax", 
	data:{action:"jQueryAjax"}, 
	type:"GET", 
	success:function (data) { 
	// alert("服务器返回的数据是:" + data); 
	// var jsonObj = JSON.parse(data); 
	$("#msg").html("编号:" + data.id + " , 姓名:" + data.name); 
	},
	dataType : "json" 
	}); 
});

$.get 方法和$.post 方法
url 请求的 url 地址
data 发送的数据
callback 成功的回调函数
type 返回的数据类型

// ajax--get 请求 
$("#getBtn").click(function(){ 
	$.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGet",function (data) { 
	$("#msg").html(" get 编号:" + data.id + " , 姓名:" + data.name); },"json"); }); 
	// ajax--post 请求 
	$("#postBtn").click(function(){ 
	$.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function (data) { 
	$("#msg").html(" post 编号:" + data.id + " , 姓名:" + data.name);
	},"json"); 
});

$.getJSON 方法
url 请求的 url 地址
data 发送给服务器的数据
callback 成功的回调函数

// ajax--getJson 请求 
$("#getJSONBtn").click(function(){ 
	$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGetJSON",function (data) { 
		$("#msg").html(" getJSON 编号:" + data.id + " , 姓名:" + data.name); 
	}); 
});

表单序列化 serialize()
serialize()可以把表单中所有表单项的内容都获取到,并以 name=value&name=value 的形式进行拼接。

// ajax 请求 
$("#submit").click(function(){ 
	// 把参数序列化 
	$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&" + 
	$("#form01").serialize(),function (data) { 
		$("#msg").html(" Serialize 编号:" + data.id + " , 姓名:" + data.name); }); });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值