JavaWeb学习笔记

最新推荐文章于 2024-05-23 20:56:45 发布

明々天

最新推荐文章于 2024-05-23 20:56:45 发布

阅读量631

点赞数

分类专栏： Java 文章标签：学习 html 前端

本文链接：https://blog.csdn.net/qq_63494746/article/details/129257544

版权

Java 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JavaWeb学习笔记

文章目录

JavaWeb学习笔记

1、HTML和CSS

初识html

<!DOCTYPE html><!--约束，声明-->
<html lang="zh_CN"><!--html标签表示html的开始，lang="zh_CN"表示中文，html标签中一般分为head和body-->

<head><!--表示头部信息，一般包含：title标签，css样式，js代码-->
  <meta charset="UTF-8"><!--表示当前页面使用UTF-8字符集-->
  <title>标题</title><!--表示标题-->
</head>

<body><!--body标签是整个html页面显示的主体内容-->
  hello
</body>

</html>

1、html常用标签

1、font字体标签

可规定文本的字体、字体尺寸、字体颜色。

<font color="red" face="宋体" size="7">字体标签</font>

2、特殊字符

字符实体

3、标题标签

标题标签是h1-h6.

h1对齐属性

<h1 align="left">这是标题 1</h1>

4、超链接

<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com" target="_self">百度</a><!--在同一窗口打开-->
<a href="http://www.baidu.com" target="_blank">百度</a><!--在新的窗口打开-->

5、列表标签

type属性可以修改列表项前面的符号。

<ul type="none"><!--无序列表-->
    <li>赵四</li>
    <li>刘能</li>
    <li>小沈阳</li>
    <li>宋小宝</li>
</ul>
<ol><!--有序列表-->
    <li>赵四</li>
    <li>刘能</li>
    <li>小沈阳</li>
    <li>宋小宝</li>
</ol>

6、img标签

在web中路径分为相对路径和绝对路径两种：

相对路径
- . 表示当前文件所在的目录
- .. 表示当前文件所在的上一级目录
- 文件名表示当前文件所在目录的文件，相当于 ./文件名 ./ 可以省略。
绝对路径：
- 格式是：http://ip:port/工程名/资源路径

<img src="../imgs/1.jpg" width="100" height="120" border="20" alt="找不到" />

7、table标签

th:是表头标签。td是单元格标签。tr是行标签。

cellspacing:是调整边框之间的空隙宽度。

border:是边框宽度。

<!--表格居中-->
<table align="center" border="1" width="300" height="300" cellspacing="0">
    <tr>
        <!--单元格内容居中-->
        <th align="center">1.1</th>
        <th>1.2</th>
    </tr>
    <tr>
    	<td>2.1</td>
        <td>2.2</td>
    </tr>
</table>

8、表格的跨行跨列

<table align="center" border="1" width="300" height="300" cellspacing="0">
    <tr>
        <td colspan="2">1.1</td>
        <td>1.3</td>
        <td>1.4</td>
        <td>1.5</td>
    </tr>
    <tr>
        <td rowspan="2">2.1</td>
        <td>2.2</td>
        <td>2.3</td>
        <td>2.4</td>
        <td>2.5</td>
    </tr>
    <tr>
        <td>3.2</td>
        <td>3.3</td>
        <td>3.4</td>
        <td>3.5</td>
    </tr>
    <tr>
        <td>4.1</td>
        <td>4.2</td>
        <td>4.3</td>
        <td colspan="2" rowspan="2">4.4</td>
    </tr>
    <tr>
        <td>5.1</td>
        <td>5.2</td>
        <td>5.3</td>
    </tr>
</table>

9、了解iframe框架标签（内嵌窗口）

iframe可以在页面里开个区域，加载单独的页面。

<iframe src="3.标题标签.html" width="500" height="400" name="abc"></iframe>
<!--iframe和a标签组合使用的步骤：
		1 在iframe标签上使用name属性
		2 在a标签的target属性上设置iframe的name的属性值
-->
<br/>

<!--实现效果，点击列表，改变小窗口的页面-->
<ul>
    <li><a href="0.标签语法.html" target="abc">0.标签语法.html</a></li>
    <li><a href="1.font标签.html" target="abc">1.font标签.html</a></li>
    <li><a href="2.特殊字符.html" target="abc">2.特殊字符.html</a></li>
</ul>

10、表单标签

输入框，密码输入框，单选框，复选框，下拉栏，多行文本输入框，重置按钮，提交按钮，按钮，文件上传域，隐藏域(当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域)

action：设置提交的服务器地址。

method：设置提交的方式GET(默认值)或POST。

表单没发给服务器的三种情况：
1. 表单项没有name属性值；
2. 单选、复选(下拉列表中的option标签) 都需要添加value属性；
3. 表单项不在form标签中。

get和post的选择：请看文档。

<form action="http://www.baidu.com" method="get">
    <input type="hidden" name="action" value="login"/>
    <h1 align="center">用户注册</h1>
    <table align="center">
        <tr>
            <td>用户名称：</td>
            <td><input type="text" name="username" value="默认值"/></td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td><input type="password" name="password" value="abc"/></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex" value="boy"/>男
                <input type="radio" name="sex" value="girl" checked="checked"/>女
            </td>
        </tr>
        <tr>
            <td>兴趣爱好：</td>
            <td>
                <input name="hobby" type="checkbox" value="java" checked="checked"/>Java
    			<input name="hobby" type="checkbox" value="js"/>JavaScript
    			<input name="hobby" type="checkbox" value="cpp"/>C++
            </td>
        </tr>
        <tr>
            <td>国籍：</td>
            <td>
                <!--下拉框想要多选，需要添加属性multiple="multiple"-->
                <select name="county">
    				<option value="none">--请选择国籍--</option>
    				<option value="cn" selected="selected">中国</option>
            		<option value="us">英国</option>
            		<option value="usa">美国</option>
    			</select>
            </td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td>
                <textarea name="desc" rows="10" cols="20">我才是默认值</textarea>
            </td>
        </tr>
        <tr>
            <td><input type="reset"/></td>
            <td><input type="submit"/></td>
        </tr>
    </table>
  
    <input type="button" value="按钮"/>
    <input type="file"/>
    <input type="hidden" name="abc" value="abcValue"/>
</form>

11、div,span,p标签

2、CSS

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

1、CSS语法规则

CSS语法规则

CSS注释：/*注释内容*/

2、CSS和HTML的结合方式

第一种

在标签的style属性上设置"key:value value"，修改标签样式。

<div style="border: 1px solid red;">div标签1</div>

第二种

在 head 标签中，使用 style标签来定义自己需要的 css 样式。

<head>
    <style type="text/css">
        div{
            brder: 1px solid red;
        }
    </style>
</head>
<body>
    <div>div标签1</div>
    <div>div标签2</div>
</body>

第三种

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

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

div{
    brder: 1px solid red;
}
span{
    brder: 1px solid red;
}

<head>
    <link rel="stylesheet" type="text/css" href="./styles.css" />
</head>
<body>
    <div>div标签1</div>
    <div>div标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
</body>

3、CSS选择器

1、标签名选择器

<head>
    <style type="text/css">
        div{
            brder: 1px solid yellow;
            color: blue;
            font-size: 30px;
        }
        span{
            brder: 5px dashed blue;
            color: yellow;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div>div标签1</div>
    <div>div标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
</body>

2、id选择器

<head>
    <style type="text/css">
        #id001{
            color: blue;
            font-size: 30px;
            border: 1px solid yellow;
        }
    </style>
</head>
<body>
    <div id="id001">div标签1</div>
</body>

3、class类型选择器

<head>
    <style type="text/css">
        .class01{
            color: blue;
            font-size: 30px;
            border: 1px solid yellow;
        }
    </style>
</head>
<body>
    <div class="class01">div标签1</div>
</body>

4、组合选择器

<head>
    <style type="text/css">
        .class01,#id01{
            color: blue;
            font-size: 30px;
            border: 1px solid yellow;
        }
    </style>
</head>
<body>
    <div class="class01">div标签1</div>
    <span id="id01">spna标签</span>
</body>

4、常用样式

颜色，宽度，高度，背景颜色，字体样式，边框，

DIV居中margin-left:auto;margin-right:auto，

文本居中text-align:center，

超链接去下划线text-decoration:none，

表格细线：

table{
    border:1px solid black;
    border-collapse:collapse;/*将边框合并*/
}
td,th{
    border:1px solid black;
}

列表去除修饰list-style:none

2、JavaScript

JavaScript语言主要是文成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。JS是弱类型。

特点：

交互性（它可以做的就是信息的动态交互）；
安全性（不允许直接访问本地磁盘）；
跨平台性（只要是可以解释JS的浏览器都可以执行，和平台无关）。

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

第一种方式

只需要 head 标签中，或者在 body 标签中，使用 script 标签来书写 JavaScript 代码。

<head>
   <script type="text/javascript">
   	//alert 是警告框函数，参数就是提示信息的内容
       alert("hello");
   </script>
</head>
<body>
   
</body>

第二种方式

使用 script 标签引入单独的 JavaScript 代码文件。

alert("hello");

<head>
    <script type="text/javascript" src="1.js"></script>
    <script type="text/javascript">
        alert("hello");
    </script>
</head>
<body>
    
</body>

在同一个标签里两种方式只能二选一，但可以再写一个。

2、JavaScript变量

1、javaScript 的变量类型

数值类型：number；
字符串类型：string；
对象类型：object；
布尔类型：boolean;
函数类型：function。

2、JavaScript里特殊的值

undefined 未定义，所有js变量未赋予初始值的时候，默认值都是 undefined

null 空值，

NAN 全称是：Not a Number。非数字，非数值。

3、JS中的定义变量格式

var 变量名;

var 变量名 = 值;

4、关系（比较）运算

等于：== 等于是简单的做字面值的比较。

全等于：=== 除了做字面值的比较之外，还会比较两个变量的数据类型。

5、逻辑运算

且&&，或||，取反！

0,null,undefined,""都认为是 false。

3、数组

1、数组定义方式

var 数组名 = [];//空数组

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

js数组会因为越界的下标值，自动的给数组扩容，中间的值都是undefined

4、函数

1、函数的两种定义方式

第一种，可以使用 function 关键字来定义函数

function fun1(){
    alert("无参函数");
}
function fun2(a,b){
    alert("有参函数");
}
function fun3(num1,num2){
    var result = num1 + num2;
    return result;
}

第二种定义方法

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

var fun3 = function(num1,num2){
    return num1 + num2;
}

alert(fun3(10,50));

在JS中没有函数重载的概念，在JS中的函数重载会直接覆盖掉上一次的定义。

2、函数的 arguments 隐形参数（只在function函数内）

就是在function函数中不需要定义，但却可以直接用来获取所有参数的变量。

js中的隐形参数和 Java 中的可变长参数操作一样。

function fun(){

    for(var i=0;i<arguments.length;i++){
        alert(arguments[i]);
    }
}

fun(1,"ad",true);

5、JS中的自定义对象

Object形式的自定义对象

var obj = new Object();
obj.name = "华仔";
obj.age = 18;
obj.fun = function(){
    alert("姓名:" = this.name + "年龄：" + this.age);
}

obj.fun();

{}或括号形式的自定义对象

var obj = {
    name:"华仔",
    age:18,
    fun:function(){
        alert("姓名:" = this.name + "年龄：" + this.age);
    }
}

6、事件

事件就是电脑输入设备与页面进行交互的响应。

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

1、静态注册事件和动态注册事件

静态注册事件：通过html标签的事件属性直接赋予事件响应后的代码。
动态注册事件：是指先通过 js 代码得到标签的 dom 对象，然后再通过 dom对象.事件名=function(){} 这种形式赋予事件响应后的代码。

2、onload:加载完成事件

<head>
    <script type="text/javascript">
        function onloadFun(){
            ....
        }
    </script>
</head>
<!--静态注册事件-->
<body onload="onloadFun();">
    
</body>

<head>
    <script type="text/javascript">
        //动态注册事件
        window.onload = function(){
            ....
        }
    </script>
</head>
<body>
    
</body>

3、onclick:单击事件

<head>
    <script type="text/javascript">
        //动态注册事件
        window.onload = function(){
            //获得dom对象
            var btnObj = document.getElementById("btn01");
            //通过标签对象.事件名 = function(){}
            btnObj.onclick = function(){
                alert("动态注册onclick");
            }
        }
    </script>
</head>
<body>
    <button id="btn01">按钮</button>
</body>

4、onblur:失去焦点事件

<head>
    <script type="text/javascript">
        //动态注册事件
        window.onload = function(){
            var obj = documnent.getElementById("user");
            obj.onblur = function(){
                console.log("动态注册失去焦点事件");
            }
        }
    </script>
</head>
<body>
    用户名：<input id="user" type="text">
</body>

5、onchange:内容发生改变事件

<head>
    <script type="text/javascript">
        //动态注册事件
        window.onload = function(){
            var obj = documnent.getElementById("sel01");
            obj.onchange = function(){
                alert("有变化");
            }
        }
    </script>
</head>
<body>
    请选择：
    <select id="sel01">
        <option>--人--</option>
        <option>男的</option>
        <option>女的</option>
        <option>中间</option>
    </select>
</body>

6、onsubmit:表单提交事件

7、DOM 模型

DOM 全称是 Document Object Model 文档对象模型。

就是把文档中的标签，属性，文本，转换成为对象来管理。

1、Document对象

Document对象的理解：

Document 它管理了所有的html文档内容；
document 它是一种树结构的文档。有层级关系；
它让我们把所有的标签都对象化；
我们可以通过 document 访问所有的标签对象。

2、Document方法

document方法

<!--两种常用的验证提示效果-->
<head>
    <script type="text/javascript">
        function onclickFun(){
            var usernameObj = document.getElementById("username");
            var usernameText = usernameObj.value;
            var patt = /^\w{5,12}$/;
            
            var usernameSpanObj = document.getElementById("usernameSpan");
            
            if(patt.test(usernameText)){
                //alert("用户名合法");
                //usernameSpanObj.innerHTML = "用户名合法";
                usernameSpanObj.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">";
            }else{
                //alert("用户名不合法");
                //usernameSpanObj.innerHTML = "用户名不合法";
                usernameSpanObj.innerHTML = "<img src=\"wrong.png\" width=\"18\" height=\"18\">";
            }
        }
    </script>
</head>
<body>
    用户名：<input id="username" type="text" value="123">
    <span id="usernameSpan" style="color:red;"></span>
    <button onclick="onclickFun()">校验</button>
</body>

//多选框全选
function checkAll(){
    var hobbies = document.getElementsByName("hobby");
    for(var i = 0;i< hobbies.length; i++){
        //元素顺序按照页面从上到下编号
        hobbies[i].checked = true;
    }
}

function checkAll(){
    //按照指定标签名获取对象
	var inputs = document.getElementsByTagName("input");
    for(var i = 0;i< hobbies.length; i++){
        inputs[i].checked = true;
    }
}

document方法要等到页面加载完成后，才能调用。

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

节点简单理解就是标签对象。

方法

getElementByTagName() 获取当前节点的指定标签名孩子节点。
appendChild(oChildNode) 可以添加一个子节点，oChildNode是要添加的孩子节点。

属性

节点属性

<head>
    <script type="text/javascript">
        window.onload = function(){
            var divObj = document.createElement("div");
            divObj.innerHTML = "1234";
            //body得等页面加载完后，才能获取。
            document.body.appendChild(divObj);
        }
    </script>
</head>
<body>

</body>

3、jQuery

在线文档：jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)

jQuery是 JavaScript的一个库。

作用：操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。

<head>
    <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        
        $(function(){//表示页面加载完成之后
           var $btnObj = $("#btnId");//表示按照id查询标签对象 
           $btnObj.click(function(){//绑定单击事件
               alert("hello");
           });
        });
        
    </script>
</head>
<body>
	<button id="btnId">Hello</button>
</body>

1、jQuery核心函数

$ 是 jQuery 的核心函数，能完成 jQuery的很多功能。

传入参数为【函数】时：

表示页面加载完成之后，相当于 window.onload = function(){}
传入参数为【html字符串】时：

会帮我们创建这个 html 标签对象。$("html字符串").append(body);
传入参数为【选择器字符串】时：

$("#id属性值"); id选择器。

$("标签名"); 标签选择器。

$(".class属性值"); 类型选择器。
传入参数为【DOM对象】时：

会把这个 dom 对象转换为 jQuery 对象。

2、jQuery 对象和 dom 对象区分

1、What？

jQuery和dom对象区别

DOM对象 Alert 出来的效果是：[object HTML标签名Element]

jQuery 对象 Alert 出来的效果是：[object object]

2、jQuery对象的本质是什么？

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

3、两者的使用区别

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

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

4、dom和jQuery对象互相转换

1、dom 对象转化为 jQuery 对象

$(DOM对象)

2、jQuery 对象转化为 dom 对象

jQuery 对象[下标]取出相应的 DOM 对象。

3、jQuery 选择器

1、基本选择器

除了id选择器、标签选择器、class选择器，还有组合选择器。*是全选

组合选择器：

p.myClass的意思是要是

标签，并且还得是class属性值为myClass的。

$(function(){
   $("#btn1").click(function(){
       //css()方法 可以设置和获取样式
       $("#one").css("background-color","#bbffaa");
   });
});

2、层级选择器

1、祖先底下所有后代

层级所有后代

2、parent > child 直接儿子

直接儿子

3、prev + next 紧跟关系

跟随关系

4、prev ~ siblings 同辈关系

同辈关系

3、过滤选择器

1、基本过滤选择器

1、:first

获取第一个元素。

过滤器first

2、:last

获取最后一个元素。

last

3、:not(selector)

去除所有匹配的元素。

not

4、:even

匹配所有索引值为偶数的元素，从 0 开始计数。

even

5、:odd

匹配所有索引值为奇数的元素，从 0 开始计数。

odd

6、:eq(index)

匹配一个给定索引值的元素。

7、:gt(index)

匹配所有大于给定索引值的元素。

8、:lt(index)

匹配所有小于给定索引值的元素。

9、:header

匹配如 h1, h2, h3之类的标题元素。

header

10、:animated

匹配所有正在执行动画效果的元素。

animate

2、内容过滤选择器

1、:contains(text)

匹配包含给定文本的元素.

contain

2、:empty

匹配所有不包含子元素或者文本的空元素。
empty

3、:parent

匹配含有子元素或者文本的元素。

parent

4、has(selector)

匹配含有选择器所匹配的元素的元素。

has

3、属性过滤选择器

1、[attribute]

匹配包含给定属性的元素。

attribute

2、[attribute=value]

匹配给定的属性是某个特定值的元素。

attribute2

3、[attribute!=value]

匹配所有不含有指定的属性，或者属性不等于特定值的元素。

attribute3

4、[attribute^=value]

匹配给定的属性是以某些值开始的元素。

attribute4

5、[attribute$=value]

匹配给定的属性是以某些值结尾的元素。

attribute5

6、[attribute*=value]

匹配给定的属性是以包含某些值的元素。

attribute6

7、 [attrSel1][attrSel2][attrSelN]

复合属性选择器，需要同时满足多个条件时使用。

attribute7

4、表单过滤选择器

1、:input

匹配所有 input, textarea, select 和 button 元素。

2、:text

匹配所有的单行文本框。

3、:password

匹配所有密码框。

4、:radio

匹配所有单选按钮。

5、:checkbox

匹配所有复选框。

6、:submit

匹配所有提交按钮，理论上只匹配 type=“submit” 的input或者button。

但是现在的很多浏览器，button元素默认的type即为submit，所以很多情况下，不设置type的button也会成为筛选结果。为了防止歧义或者误操作，建议所有的button在使用时都添加type属性。

7、:image

匹配所有图像域。

图像域

8、:reset

匹配所有重置按钮。

9、:button

匹配所有按钮。

button

10、:file

匹配所有文件域。

文件域

11、:hidden

匹配所有不可见元素，或者type为hidden的元素。

hidden1

hidden2

表单对象属性：

12、:enabled

匹配所有可用元素。

enabled

13、:disabled

匹配所有不可用元素。

disabled

14、:checked

匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 :selected。

checked

15、:selected

匹配所有选中的option元素。
selected

4、jQuery元素筛选

1、过滤

1、eq(index|-index)

获取当前链式操作中第N个jQuery对象，返回jQuery对象。

正向选取，0代表第一个，1代表第二个。

反向选取，-1为倒数第一个。

sxeq

2、first()

获取第一个元素。

$('li').first()

3、last()

获取最后个元素。

$('li').last()

4、filter(expr|obj|ele|fn)

筛选出与指定表达式匹配的元素集合。

这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

filter参数列表

filter1

filter2

5、is(expr|obj|ele|fn)

根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。

is1

is2

6、has(expr|ele)

保留包含特定后代的元素，去掉那些不含有指定后代的元素。

has2

7、not(expr|ele|fn)

从匹配元素的集合中删除与指定表达式匹配的元素.
not

2、查找

1、children([expr])

返回匹配给定选择器的子元素。

children

2、find(expr|obj|ele)

返回匹配给定选择器的后代元素。

find

3、next([expr])

返回当前元素的下一个兄弟元素。

4、nextAll([expr])

查找当前元素之后所有的兄弟元素。

nextall

5、nextUntil([exp|ele][,fil])

查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。

如果提供的jQuery代表了一组DOM元素，.nextUntil()方法也能让我们找遍所有元素所在的DOM树，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个新jQuery对象里包含了下面所有找到的同辈元素，但不包括那个选择器匹配到的元素。

如果没有选择器匹配到，或者没有提供参数，那么跟在后面的所有同辈元素都会被选中。这就跟用没有提供参数的 .nextAll()效果一样。

nextUtil参数

nextutil

6、parent([expr])

返回父元素。

parent2

7、prev([expr])

返回当前元素的上一个兄弟元素。
prev

8、prevAll([expr])

查找当前元素之前所有的同辈元素

prevAll

9、prevUntil([exp|ele][,fil])

查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。【但不包含匹配的元素】

prevutil

10、siblings([expr])

返回所有兄弟元素。

siblings

3、串联

1、add()

把add匹配的选择器的元素添加到当前的jquery对象中。

add

5、jQuery 的属性操作

1、HTML代码/文本/值

html()：它可以设置和获取起始标签和结束标签中的内容【会执行html代码】。类似innerHTML

text()：它可以设置和获取起始标签和结束标签中的文本【不会执行，纯文本】。类似innerText

val()：它可以设置和获取表单项的value属性值。类似 value

//批量操作单选
$(":radio").val(["radio2"]);
//批量操作复选框的选中状态
$(":checkbox").val(["checkbox2","checkbox3"]);
//批量操作下拉多选
$("#multiple").val(["mul2","mul3","mul4"]);
//批量操作下拉单选
$("#single").val(["sin2"]);

//也可以组合在一起,一次性操作
$(":radio,:checkbox,#multiple").val(["radio2","checkbox1","mul2","mul3"]);

2、其他属性

attr()：可以设置和获取属性的值【不推荐操作checked,readOnly,selected,disabled等等】

attr 方法还可以操作非标准的属性。比如自定义属性

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

$(function(){
    //attr
    $(":checkbox:first").attr("name");//获取
    $(":checkbox:first").attr("name","abc");//设置
    
    //prop
    $(":checkbox").prop("checked",true);
});

6、DOM的增删改

1、内部插入

appendTo()：a.appendTo(b) 把 a 插入到 b 子元素末尾【尾插法】

prependTo()：a.prependTo(b)把 a 插入到 b 所有元素前面【头插法】

2、外部插入

insertAfter()：a.insertAfter(b) 得到 ba

insertBefore()：a.insertBefore(b) 得到ab

3、替换

replaceWith()：a.replaceWith(b) 用 b 替换掉 a

replaceAll()：a.replaceAll(b) 用 a 替换掉所有的 b

4、删除

remove()：a.remove() 删除 a 标签

empty()：a.empty() 清空 a 标签内的内容

7、CSS样式操作

addClass()：添加

removeClass()：删除【啥参数都不写，会删除所有样式】

toggleClass()：有就删除，没有就添加样式

offset()：获取和设置元素的坐标

/*前面的div是修饰，意思是该样式只能div标签才能使用*/
div.redDiv{
    background-color:red;
}

//当要添加多个CSS样式时，用空格隔开
$divEle.addClass('redDiv blueBorder');

$divEle.offset({
    top:100,
    left:50
});

8、jQuery 动画

1、基本动画

show()：将隐藏的元素显示

hide()：将可见的元素隐藏

toggle()：可见就隐藏，不可见就显示

以上的动画方法都可以添加参数。

第一个参数是动画执行的时长，以毫秒为单位；
第二个参数是动画的回调函数【动画完成后自动调用的函数】。

//会疯狂调用自己
var abc = function(){
    $("#div1").toggle(2000,abc);
}
abc();

2、淡入淡出动画

fadeln()：淡入(慢慢可见)

fadeOut()：淡出(慢慢消失)

fadeTo()：在指定时长内慢慢的将透明度修改到指定的值。【0-1】

fadeToggle()：淡入/淡出切换

$("#div1").fadeTo(2000,0.5,function(){
    alert("fadeTo");
});

9、jQuery 事件操作

他们分别是什么时候触发：

jQuery 的页面加载完成之后是浏览器的内核解析完页面的标签创建好 DOM 对象之后就会马上执行
原生 js 的页面加载完成之后，除了要等浏览器内核解析完标签创建好 DOM 对象，还要等标签显示时需要的内容加载完成。

他们触发的顺序：

jQuery 页面加载完成之后先执行；
原生 js 的页面加载完成之后。

他们执行的次数：

原生 js 的页面加载完成之后，只会执行最后一次的赋值函数。
jQuery 的页面加载完成之后是全部把注册的 function 函数，依次顺序全部执行。

1、jQuery 中其他的事件处理方法

click()：它可以绑定单击事件，也可以触发单击事件。

mouseover()：鼠标移入事件

mouseout()：鼠标移出事件

bind()：可以给元素一次性绑定一个或多个事件

one()：使用和bind一样。但是 one 方法绑定的每个事件只会响应一次。

unbind()：跟bind 方法相反的效果。是解除事件绑定。

live()：使用和bind一样。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出来的也有效。

$("h5").bind("click mouseover",function(){
    console.log("这里是为我所统帅的战场");
});

$("h5").bind();
$("h5").bind("click mouseover");

2、事件的冒泡

什么是事件的冒泡？

事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。

怎么阻止事件冒泡？

在事件函数体内， return false; 可以阻止事件的冒泡传递。

3、JavaScript 事件对象

事件对象，是封装有触发的事件信息的一个 JavaScript 对象。

如何获取 JavaScript 事件对象？

在给元素绑定事件的时候，在事件的 function(event) 参数列表中添加一个参数，这个参数名，我们习惯称为 event 。这个 event 就是 JavaScript 传递事件处理函数的事件对象。

//1.原生JavaScript 获取 事件对象
window.onload = function(){
    document.getElementById("areaDiv").onclick = function(event){
        console.log(event);
    }
}
//2.jQuery 代码获取事件对象
$(function(){
   $("#areaDiv").click(function(event){
      console.log(event);
   });
});
//3.使用 bind 同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件？
$("#areaDiv").bind("mouseover mouseout",function(event){
    if(event.type == "mouseover"){
        console.log("鼠标移入");
    }else if(event.type == "mouseout"){
        console.log("鼠标移出");
    }
});

Z、jQuery的小操作

//val()可以获取和设置输入框的值，无参数是获取。
$(":text:disabled").val("12345");

//each()是jQuery的遍历方法
//在遍历的function函数中，有个this对象，就是当前遍历的dom对象
$checkboxes.each(function(){
    alert(this.value);
});

//confirm是 JavaScript 提供的一个确认提示框函数，参数就是提示信息
//当用户点击确定，就返回true，当用户点击取消就返回false
if(confirm("你确定要删除吗？")){
    ...
}else{
    ...
}


//return false：可以阻止元素的默认行为
$("a").click(function(){
    //正常点击链接，应该会产生跳转
    //为了不报错
    //return false：可以阻止元素的默认行为
    return false;
});
    
//点击事件，调用已有的函数方法deleteFun(),直接使用函数名，因为绑定要的是个function函数
//不要加(),也不要在function(){}里调用函数,因为deleteFun()里的this会出问题
//在function(){}里调用函数相当于套了两层function,此时this指向很有问题
$("a").click( deleteFun )

4、XML

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

xml 的主要作用有：

用来保存数据，而且这些数据具有自我描述性；
它还可以作为项目或者模块的配置文件；
还可以作为网络传输数据的格式（JSON 现在为主）。

1、xml 语法

1、文档声明

<?xml version="1.0" encoding="utf-8" ?>
<!--
	<?xml version="1.0" encoding="utf-8" ?>
	以上内容就是xml 文件的声明
	version 表示xml的版本
	encoding表示xml文件本身的编码
-->
<books>
	<book sn="SN123412123421">
    	<name>时间简史</name>
        <author>霍金</author>
        <price>75</price>
    </book>
    <book sn="SN231212123421">
    	<name>从前说</name>
        <author>无名</author>
        <price>10</price>
    </book>
</books>

2、元素（标签）

xml元素

XML 元素必须遵循以下命名规则：

名称可以含字母、数字以及其他的字符
名称不能以数字或者标点符号开始
名称不能以字符 “xml”（或者 XML、Xml）开始
名称不能包含空格

可使用任何名称，没有保留的字词。

3、xml 属性

每个属性的值必须使用引号引起来

4、xml 注释

5、xml其他注意点

单标签和双标签都可，但一定要闭合；
xml对大小写敏感；
xml必须要有一个父元素；
特殊字符：> (&gt)、< (&lt)

6、文本区域（CDATA区）

CDATA可以告诉 xml 不需要解析，这是纯文本。

<![CDATA[这里可以把你输入的字符原样显示，不会解析 xml ]]>

2、dom4j 解析技术

1、dom4j 编程步骤：

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

2、获取 document 对象

public void test1() throws Exception{
    //1.创建一个SaxReader输入流，去读取 xml配置文件，生成Document对象
    SAXReader saxReader = new SAXReader();
    
    Document document = saxReader.read("src/books.xml");
    //2.通过Document对象获取根元素
    Element rootElement = documnet.getRootElement();
    //3.用过根元素获取book标签对象
    //element()和elements() 都是通过标签名查找子元素
    List<Element> books = rootElement.elements("book");
    //4.遍历，处理每个book标签转换为 Book 类
    for(Element book:books){
        // asXML() 把标签对象 转换为标签字符串
        Element nameElement = book.element("name");
        //getText():可以获取标签中的文本内容
        String nameText = nameElement.getText();
        //直接获取指定标签名的文本内容
        String priceText = book.elementText("price");
        String authorText = book.elementText("author");
        
        String snValue = book.attributeValue("sn");
        
        System.out.println(
            new Book(snValue,nameText,Double.parseDouble(priceText),authorText));
    }
}

5、Tomcat

1、常用的web服务器

常用的web服务器

2、Tomcat 服务器和 Servlet 版本的对应关系

当前企业常用的版本：7.*/ 8.*

3、Tomcat 的使用

1、目录介绍

bin：专门用来存放 tomcat 服务器的可执行程序；

conf：专门用来存放 tomcat 服务器的配置文件；

lib：专门用来存放 Tomcat 服务器的jar 包；

logs：专门用来存放 Tomcat 服务器运行时输出的日记信息；

temp：专门用来存放 tomcat 运行时产生的临时数据；

webapps：专门用来存放部署的 Web 工程；

work：是 Tomcat 工作时的目录，用来存放 Tomcat 运行时 jsp 翻译为 Servlet 的源码，和Session 钝化的目录。

2、如何启动 Tomcat 服务器

bin-----> startup.bat文件，双击。

测试是否运行成功：1.http://localhost:8080 2.http://127.0.0.1:8080 3.http://真实ip:8080

另一种启动Tomcat方式：在bin目录下，启动命令行，输入catalina run

3、停止Tomcat

关掉窗口 2. bin—>shutdown

4、如何修改 Tomcat 端口号

conf----->server.xml----->修改port属性

5、如何部署 web 工程到 Tomcat 中

只需要把web工程目录拷贝到 Tomcat 的 webapps 目录下即可。

访问方式：http://localhost:8080/Book/book.html
conf----->Catalina—>localhost，创建一个xml文件

<!--Context 表示一个工程上下文
	path 表示工程的访问路径
	docBase 表示你的工程目录在哪里
-->
<Context path="/abc" docBase="E:\book" />

6、ROOT的工程访问，以及默认index.html页面的访问

http://ip:port/ ==> 没有工程名的时候，默认访问的是 ROOT 工程。

http://ip:port/工程名/ ==> 没有资源名，默认访问 index.html 页面。

4、IDEA 整合 Tomcat 服务器

File | Settings | Build,Exception,Deployment | Application Servers -----> 添加tomcat

5、创建动态web工程

创建动态web工程

动态web工程目录介绍： web目录

如何给动态 web 工程添加额外 jar 包

file---->Project Structure------>libraries------->添加Java，选择jar包------>选择使用的module

Artifacts----->Fix

可以修改tomcat实例的名字、需要的web模块、修改默认访问方式

$JavaWeb\tomcat实例deployment$

修改tomcat默认的访问

使用tomcat 的功能：

tomcat一些操作

**设置热部署：**可以实现你web文件修改后，直接浏览器刷新就能更新。

热部署设置

6、Servlet

1、Servlet技术

1、什么是Servlet

Servlet 是接口；
Servlet 是 JavaWeb 三大组件之一。三大组件分别是：Servlet程序、Filter过滤器、Listener监听器
Servlet是运行在服务器上的一个 Java 小程序，它可以接收客户端发送过来的请求，并响应数据给客户端。

2、手动实现Servlet 程序

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

<!--servlet标签给 Tomcat 配置Servlet程序【可以写很多个】-->
<servlet>
    <!--servlet-name标签 Servlet程序起一个别名(一般是类名)-->
    <servlet-name>HelloServlet</servlet-name>
    <!--servlet-class是servlet程序的全类名-->
    <servlet-class>com.zwj.service.HelloServlet</servlet-class>
    
    <!--init-param是初始化参数[可以很多个]-->
    <init-param>
        <!--是参数名-->
        <param-name>url</param-name>
        <!--是参数值-->
        <param-value>jdbc:mysql://localhost/test</param-value>
    </init-param>
</servlet>

<!--servlet-mapping标签给servlet程序配置访问地址-->
<servlet-mapping>
    <!--servlet-name标签的作用是告诉服务器，当前配置的地址给哪个Servlet程序使用-->
    <servlet-name>HelloServlet</servlet-name>
    <!--url-pattern标签配置访问地址
		/ 斜杠表示地址：http://ip:port/工程路径
		工程路径，就是tomcat的deployment设置的名字
		/hello,表示地址：http://ip:port/工程路径/hello
	-->
    <url-pattern>/hello</url-pattern>
</servlet-mapping>

3、url 地址到 Servlet 程序的访问

Servlet如何定位

4、Servlet 的生命周期

执行Servlet 构造器方法；
执行 init 初始化方法；

第一、二步，是在第一次访问的时候创建Servlet程序会调用。
执行 service 方法；

第三步，每次访问都会调用。
执行 destroy 销毁方法。

第四步，在web工程停止的时候调用。

5、GET 和 POST 请求的分发处理

public void service(ServletRequest servletRequest,ServletResponse servletResponse){
    
    //类型转换(因为它有 getMethod()方法)
    HttpServletRequest httpServletRequest = (HttpServletRequest) servletRequest;
    //获取请求的方式
    String method = httpServletRequest.getMethod();
    
    if("GET".equals(method)){
        doGet()；
    }else if("POST".equals(method)){
        doPOST()
    }
    
}
public void doGet(){
    //处理get请求的方法
}
public void doPOST(){
    //处理post请求的方法
}

6、通过继承 HttpServlet 实现 Servlet 程序

一般在实际项目开发中，都是使用继承 HttpServlet 类的方式去实现 Servlet 程序。

编写一个类去继承 HttpServlet 类；
根据业务需要重写 doGet 或 doPost 方法；
到 web.xml 中的配置 Servlet 程序的访问地址。

7、使用IDEA 创建 Servlet 程序

new-------> Create New Servlet

idea配置Servlet

8、Servlet 类的继承体系

Servlet体系

2、ServletConfig类

ServletConfig类从类名上来看，就知道是 Servlet 程序的配置信息类。

ServletConfig 是每个 Servlet 程序创建时，就创建一个对应的 ServletConfig 对象。

1、ServletConfig 类的三大作用

可以获取 Servlet 程序的别名 Servlet-name 的值；getServletName()
获取初始化参数 init-param;getInitParameter("username")
获取 ServletContext 对象。getServletContext()

2、ServletConfig的注意点

getServletConfig()：在Servlet继承类里可以获取自己的ServletConfig类。
如果是继承HttpServlet，要重写init，需要第一行写上super.init(config);

3、ServletContext 类

1、什么是ServletContext 类

ServletContext 是一个接口，它表示 Servlet 上下文对象；
一个 web 工程，只有一个 ServletContext 对象实例；
ServletContext 对象是一个域对象【类似Map的用法】。
ServletContext 是在 web 工程部署启动的时候创建。在 web 工程停止的时候销毁。【也就是web 工程在的时候，ServletContext就一直存在】

2、ServletContext 的四个作用

获取 web.xml 中配置的上下文参数 context-param;

ServletContext context = getServletConfig().getServletContext();

context.getInitParameter("username")
获取当前的工程路径，格式：/工程路径；

context.getContextPath();
获取工程部署后在服务器硬盘上的绝对路径;

context.getRealPath("/")：这返回路径是映射到IDEA目录的web目录

context.getRealPath("/css")：相当于到web/css

context.getRealPath("/img/img1.jpg")：返回img1.jpg的全路径。

像 Map 一样存取数据。

ServletContext context = getServletContext();

context.setAttribute("key1","value1");
context.getAttribute("key1");

<!--上下文参数[属于整个web工程]，可以多个-->
<context-param>
	<param-name>username</param-name>
	<param-value>context</param-value>
</context-param>

4、Http 协议

1、GET请求报文

get请求报文

2、POST请求报文

POST请求报文

3、哪些是GET请求，哪些是POST请求

GET请求有哪些？

form标签 method=get;
a 标签；
link 标签引入 css;
Script 标签引入 js 文件；
img 标签引入图片；
iframe 引入 html 页面；
在浏览器地址栏中输入地址后敲回车。

POST请求有哪些？

form标签 method=post。

4、响应的HTTP 协议格式

5、常用的响应码说明

200：表示请求成功；

302：表示请求重定向；

404：表示请求服务器已经收到了，但是你要的数据不存在（请求地址错误）；

500：表示服务器已经收到请求，但是服务器内部错误（代码错误）。

6、MIME 类型说明

MIME 是 HTTP 协议中的数据类型。

MIME 的英文全称是"Multipurpose Internet Mail Extensions" 多功能 internet 邮件扩充服务。MIME 类型的格式是“大类型/小类型”，并与某一种文件的扩展名相对应。

常见的MIME 类型：

常见的MIME类型

5、HttpServletRequest 类

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

1、HttpServletRequest类的常用方法

getRequestURI()：获取请求的资源路径

getRequestURL()：获取请求的统一资源定位符（绝对路径）

getRemoteHost()：获取客户端的 ip 地址

getHeader()：获取请求头

getParameter()：获取请求的参数

getParameterValues()：获取请求的参数（多个值的时候使用）

getMethod()：获取请求的方式GET 或 POST

setAttribute(key,value)：设置域数据

getAttribute(key)：获取域数据

getRequestDispatcher()：获取请求转发对象

2、如何获取请求参数

String username = req.getParameter(username);

String[] hobby = req.getParameterValues("hobby");

3、POST请求的中文乱码解决

在doPost()方法添加：req.setCharacterEncoding("UTF-8");

设置字符集，要在获取请求参数之前，不然该语句失效。

4、请求的转发

请求转发是指，服务器收到请求后，从一次资源跳转到另一个服务器资源的操作叫请求转发。

请求转发

RequestDispatcher requestDispatcher = req.getRequestDispatcher("/servlet2");

requestDispatcher.forward(req.resp);

请求转发的特点：

浏览器地址栏没有变化；
他们是一次请求；
他们共享Request域中的数据；
可以转发到 WEB-INF 目录下；
不可以访问工程以外的资源。

5、base 标签的作用

<head>
    <!--base标签设置页面相对路径工作时参照的地址
		此时，如果使用相对路径，他会忽略地址栏，直接使用base的路径
	-->
    <base href="http://localhost:8080/servlet/a/b/">
</head>
<body>
    <a href="../../index.html">跳回首页</a>
</body>

6、web 中 / 斜杠的不同意义

在web 中 / 斜杠是一种绝对路径。

/ 斜杠，如果被浏览器解析，得到的地址是：http://ip:port/

<a htrf="/">斜杠</a>

/ 斜杠，如果被服务器解析，得到的地址是：http://ip:port/工程路径

<url-pattern>/servlet</url-pattern>
servletContext.getRealPath("/");
request.getRequestDispatcher("/");

特殊情况，response.sendRediect("/"); 把斜杠发送给浏览器，得到http://ip:port/

6、HttpServletResponse 类

我们如果需要设置返回给客户端的信息，都可以通过 HttpServletResponse 对象来进行设置。

1、两个输出流的说明

字节流：getOutputStream() 常用于下载（传递二进制数据）

字符流：getWriter() 常用于回传字符串【常用】

两个流同时只能使用一个。

2、如何往客户端回传数据

doGet(){
    PrintWriter writer = resp.getWriter();
    writer.write("hello，world");
}

3、响应的乱码解决

第一种：

设置一下服务器的字符集：resp.setCharacterEncoding("UTF-8");
通过响应头，设置浏览器也使用UTF-8字符集：

resp.setHeader("Content-Type","text/html;charset=UTF-8");

第二种：

会同时设置服务器和客户端都使用UTF-8字符集，还设置了响应头：

resp.setContentType("text/html;charset=UTF-8");

4、请求重定向

请求重定向，是指客户端给服务器发请求，然后服务器告诉客户端说。我给你一些地址。你去新地址访问。叫请求重定向。【因为可能原路径已经弃用了，需要使用更新后的路径】

请求重定向使用场景

请求重定向的第一种方法：

doGet(){
	//设置响应状态码 302,表示重定向。（已搬迁）
    resp.setStatus(302);
    // 设置响应头，说明新地址在哪里
    resp.setHeader("Location","http://localhost:8080/servlet/response2");
}

请求重定向的特点：

浏览器地址栏会发生变化；
两次请求；
不共享Request 域中的数据；
不能访问 WEB-INF 下的资源；
可以访问工程外的资源。

请求重定向的第二种方法：【推荐使用】

resp.sendRedirect("http://localhost:8080/servlet/response2");

7、Jsp

1、什么是jsp，它有什么用？

jsp 的全称是 java server pages。Java 的服务器页面。

jsp 的主要作用是代替 Servlet 程序回传 html 页面的数据。

因为 Servlet 程序回传 html 页面数据是一件非常繁琐的事情。开发成本和维护成本都极高。

jsp 如何访问？

jsp 页面和 html 页面一样，都是存放在 web 目录下。访问也跟访问 html 页面一样。

2、jsp的本质是什么

jsp 页面本质上是一个 Servlet 程序。【生成的java 源文件，内容就是个Servlet】

当我们第一次访问 jsp 页面的时候。Tomcat 服务器会帮我们把 jsp 页面翻译成为一个 java 源文件。并且会对它进行编译成为 .class 字节码程序。

3、jsp的三种语法

<%@ page import="java.util.Map" %>
<%@ page contentType="text/html;charset=UTF-8" 
    	 autoFlush="true"
    	 buffer="8kb"
    	 errorPage="/error600.jsp"
    	 language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>

</body>
</html>

1、jsp 头部的 page 指令

jsp 的 page指令可以修改 jsp 页面中一些重要的属性，或者行为。

language属性：表示jsp 翻译后是什么语言文件。暂时只支持 java；
contentType属性：表示 jsp 返回的数据类型是什么。也是源码中response.setContentType()参数值；
pageEncoding属性：表示当前 jsp 页面文件本身的字符集；
import属性：跟 Java 源代码一样。用于导包，导类；

以下两个属性是给 out 输出流使用的：
autoFlush属性：设置当 out 输出流缓冲区满了以后，是否自动刷新缓冲区、默认值是 true；
buffer属性：设置 out 缓冲区的大小。默认是 8kb；
errorPage属性：设置当 jsp 页面运行时出错，自动跳转的错误页面路径；
isErrorPage属性：设置当前 jsp 页面是否是错误信息页面。默认是false, 如果是true，可以获取异常信息。
session属性：设置访问当前 jsp 页面，是否会创建 HttpSession 对象。默认是true；
extends属性：设置 jsp 翻译出来的 java 类默认继承类。

2、jsp 中的常用脚本

1、声明脚本(极少使用)

声明脚本的格式是：<%! 声明java代码 %>

作用：可以给 jsp 翻译出来的 java 类定义属性和方法甚至是静态代码块，内部类等。

<body>

    <%!
        private Integer id;
        private String name;
        private static Map<String,Object> map;
    %>
    
	<%!
        static{
            map = new HashMap<String,Object>;
            map.put("key1","value1");
        }
    %>
    
    <%!
        public static class A{
            private Integer id = 12;
        	private String name = "abc";
        }
    %>
    
    <%!
        public int abc(){
    		return 12;
		}
    %>

</body>

2、表达式脚本（常用）

表达式脚本的格式是：<%=表达式 %>

表达式脚本的作用是：在 jsp 页面上输出数据。

表达式脚本的特点：

所有的表达式脚本都会被翻译到 _jspService() 方法中；
表达式脚本都会被翻译称为 out.print()输出到页面上；
由于表达式脚本翻译的内容都在 _jspService() 方法中，所以 _jspService() 方法中的对象都可以直接调用；
表达式脚本中的表达式不能以分号结束。

<%=12 %>
<%=12.12 %>
<%="hello world" %>
<%=map %>
<%=request.getParamter("username") %>

3、代码脚本

代码脚本的格式是：

<%
	Java语句
%>

代码脚本的作用是：可以在 jsp 页面中，编写我门自己需要的功能（写的是 java语句）。

代码脚本的特点：

代码脚本都会被翻译到 _jspService() 方法中；
由于代码脚本翻译的内容都在 _jspService() 方法中，所以 _jspService() 方法中的对象都可以直接调用；
还可以由多个代码脚本块组合完成一个完整的 java 语句。【妈的抽象】

<body>
    <table border="1" cellspacing="0">
    <%
        for(int j=0;j<10;j++){
    %>
        <tr>
        	<td>第 <%=j%> 行</td>
        </tr>
    <%
        }
    %>
    </table>
</body>

3、jsp 中的三种注释

html注释：

html 注释会被翻译到 java 源文件中，在 _jspService 方法里，以out.write输出到客户端。

java注释：

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

java注释会被翻译到 java 源文件中

jsp注释：

<%--这是jsp注释--%>

4、jsp 九大内置对象

jsp内置九大对象

5、jsp 四大域对象

四大域对象分别是：

pageContext(PageContextlmpl类)：当前 jsp 页面范围内有效；
request(HttpServletRequest类)：一次请求内有效；
session(HttpSession类)：一个会话范围内有效（打开浏览器访问服务器，知道关闭服务器）；
application(ServletContext类)：整个web工程范围内都有效（只要 web 工程不停止，数据都在）

四个域对象使用时候的优先顺序：【从小到大的范围顺序】

pageContext < request < session < application

6、jsp 中的 out 输出和 response输出的区别

out和response输出的区别

由于 jsp 翻译之后，底层源代码都是使用 out 来进行输出，所以一般情况下。我们在 jsp 页面中统一使用 out 来进行输出。避免打乱页面输出内容的顺序。

out.write()：输出字符串没有问题；

out.print()：输出任意数据都没有问题（都转换成为字符串后调用的 write 输出）

7、jsp 的常用标签

包含引入

1、jsp 静态包含

file 属性指定你要包含的 jsp 页面的路径。

格式：<%@ include file=""%>

<%@ include file="/include/footer.jsp"%>

静态包含的特点：

静态包含不会翻译被包含的 jsp 页面；
静态包含其实是把包含的 jsp 页面的代码拷贝到包含的位置执行输出。

2、jsp 动态包含

page 属性指定你要包含的 jsp 页面的路径。

格式：<jsp:include page=""><jsp:include>

<jsp:include page="/include/footer.jsp">
	<jsp:param name="username" value="bbj"/>
    <jsp:param name="password" value="root"/>
<jsp:include>

动态包含的特点：

动态包含会把包含的 jsp 页面也翻译成为 java 代码；
动态包含底层代码使用如下代码去调用被包含的 jsp 页面执行输出

JspRuntimeLibrary.include(request,response,"/include/footer.jsp",out,false);
动态包含，还可以传递参数。

动态包含

3、jsp 标签-转发

<jsp:forward page=""></jsp:forward> 是请求转发标签，它的功能就是请求转发。

<jsp:forward page="/scope2.jsp"></jsp:forward>

请求转发的使用

8、Listener 监听器

Listener 监听器是 JavaWEB 的三大组件之一；
Listener 它是 JavaEE 的规范，就是接口；
监听器的作用就是，监听某种事物的变化。然后通过回调函数，反馈给客户(程序)去做一些处理。

1、ServletContextListener 监听器

ServletContextListener 它可以监听 ServletContext 对象的创建和销毁。

ServletContext 对象在 web 工程启动的时候创建，在 web 工程停止的时候销毁。

监听到创建和销毁之后都会分别调用 ServletContextListener 监听器的方法反馈。

两个方法分别是：

监听器两个方法

如何使用ServletContextListener 监听器监听 ServletContext 对象

使用步骤如下：

编写一个类去实现 ServletContextListener；
实现其两个回调方法；
到 web.xml 中去配置监听器。

<!--配置监听器-->
<listener>
	<listener-class>com.zwj.listener.ServletContextListener</listener-class>
</listener>

8、EL 表达式 & JSTL 标签库

1、EL 表达式

EL 表达式的全称是：Expression Language 是表达式语言。

EL 表达式的作用：EL 表达式主要是代替 jsp 页面中的表达式脚本在 jsp 页面中进行数据的输出。

因为 EL 表达式在输出数据的时候，要比 jsp 的表达式脚本要简洁很多。

EL 表达式的格式是：${表达式}

EL 表达式在输出 null 值的时候，输出的是空串。jsp 表达式脚本输出 null 值的时候，输出的是 null。

1、EL 表达式搜索域数据的顺序：

当四个域中都有相同的 key 的数据的时候，EL 表达式会按照四个域从小到大的顺序去进行搜索，找到就输出。

2、EL 表达式输出Bean 的普通属性，数组属性。List 集合属性，map 集合属性

EL 表达式输出Bean

EL 表达式实际上是通过类的 getXxx() 方法来获得属性值的。

3、EL 表达式-----运算

${运算表达式}

1、关系运算

EL关系运算

2、逻辑运算

EL 逻辑运算

3、算术运算

EL算术运算

4、empty运算

${empty List}

empty运算可以判断一个数据是否为空，如果为空，则输出 true，不为空输出false。

以下几种情况为空：

值为 null 值的时候，为空；
值为空串的时候，为空；
值是 Object 类型数组，长度为零的时候；
list 集合，元素个数为零；
map集合，元素个数为零。

5、三元运算

${ 12 == 12 ? "2":"1"}

6、`.`点运算和`[]`中括号运算

.运算，可以输出 Bean 对象中某个属性的值。

[]中括号运算，可以输出有序集合中某个元素的值。

并且[]中括号运算，还可以输出 map 集合中 key 里含有特殊字符的 key 的值。

${map['a.a.a']}

${map["b+b+b"]}

4、EL 表达式的11个隐含对象

EL 11个隐含对象

1、EL 获取四个特定域中的属性

例如：获取Request 域中的数据，${ requestScope.key2 }

2、pageContext 对象的使用

pageContext对象

3、EL 表达式其他隐含对象的使用

获取请求参数值

输出请求头参数

获取Cookie参数值

initparam

2、JSTL 标签库

JSTL 标签库，全称是指 JSP Standard Tag Library。是一个不断完善的开放源代码的 JSP 标签库。

EL 表达式主要是为了替换 jsp 中的表达式脚本，而标签库则是为了替换代码脚本。这样使得整个 jsp 页面变得更加简洁。

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

JSPL库列表

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

taglib

1、JSTL 标签库的使用步骤

先导入 jstl 标签库的 jar 包。

JSTL的jar包

第二步，使用 taglib 指令引入标签库。

2、core 核心库使用

1、<c:set />

作用：set 标签可以往域中保存数据。

<c:set scope="request" var="key" value="abcValue"/>

scope 属性设置保存到哪个域：

page 表示 PageContext域；【默认值】
request 表示 Request域；
session 表示 Session域；
application 表示 ServletContext域。

2、<c:if />

if 标签用来做 if判断。

test 属性表示判断的条件（使用EL表达式输出）。

<c:if test="${ 12 != 12 }">
	<h1>
        12等于12
    </h1>
</c:if>

3、<c:choose><c:when><c:otherwise>标签

作用：多路判断，跟switvh…case…default相似。

这个标签里不能使用html注释，能使用 jsp 注释。

<body>
    
    <%
    	request.setAttribute("height",178);
    %>
    <c:choose>
    	<c:when test="${requestScope.height > 190}">
        	小巨人
        </c:when>
        <c:when test="${requestScope.height > 180}">
        	很高
        </c:when>
        <%-- otherwise里还能写判断 --%>
        <c:otherwise>
        	<c:choose>
                <c:when test="${requestScope.height > 170}">
                    正常
                </c:when>
                <c:when test="${requestScope.height > 160}">
                    一般
                </c:when>
                <c:otherwise>
                	其他
                </c:otherwise>
            </c:choose>
        </c:otherwise>
    </c:choose>
    
</body>

4、<c:forEach />

<body>
    <%-- 相当于for(int i = 1;i <= 10; i++) --%>
    <c:forEach begin="1" end="10" var="i">
    	${ i }
    </c:forEach>
    
    <%-- 遍历Object数组 --%>
    <%
    	request.setAttribute("arr",new String[]{"123","2334","576854"});
    %>
    <c:forEach items="${ requestScope.arr }" var="item">
    	${ item } <br>
    </c:forEach>
    
    <%-- 遍历Map --%>
    <%
    	Map<String,Object> map = new HashMap<String,Object>();
    	map.put("key1","value1");
    	map.put("key2","value2");
    	map.put("key3","value3");
    	
    	request.setAttribute("map",map);
    %>
    <c:forEach items="${ requestScope.map }" var="entry">
    	${ entry.key } = ${entry.value} <br>
    </c:forEach>
    
    <%-- 遍历List --%>
    <%
    	List<Student> studentList = new ArrayList<Student>();
    	for(int i=1;i<=10;i++){
            studentList.add(new Student(1,"username"+i,"pass"+i,18+i));
        }
    
    	request.setAttribute("stus",studentList);
    %>
    <table>
    <c:forEach begin="2" end="8" 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>删除、修改</td>
            <td>${status.last}</td>
        </tr>
    </c:forEach>
    </table>
</body>

varstatus属性介绍：

下面是其继承的接口方法。属性名字取后面单词即可。

varstatus

9、文件的上传和下载

1、文件的上传介绍

要有一个 form 标签，method=post 请求；
form 标签的 encType 属性值必须为 multipart/form-data 值；
在 form 标签中使用 input type=file 添加上传的文件；
编写服务器代码接收，处理上传的数据。

<body>
    <form action="" method="post" enctype="multipart/form-data">
        用户名：<input type="text" name="username" /> <br>
        头像：<input type="file" name="photo" > <br>
        <input type="submit" value="上传">
    </form>
</body>

multipart/form-data 表示提交的数据，以多段（每一个表单项一个数据段）的形式进行拼接，然后以二进制的形式发送给服务器。

1、文件上传，HTTP 协议

文件上传http协议报文

doPost(){
    
    //得用流接收
    ServletInputStream inputStream = req.getInputStream();
    
    byte[] buffer = new byte[1024000];
    int read = inputStream.read(buffer);
 
}

2、commons-fileupload.jar 常用API 介绍说明

commons-fileupload.jar 需要依赖 commons-io.jar 这个包，所以两个包我们都要引入。

第一步，就是需要导入两个 jar包

ServletFileUpload 类，用于解析上传的数据。

FileItem 类，表示每一个表单项。

uploadAPI1

uploadAPI2

3、fileupload 类库的使用

doPost(){
    
    //1. 先判断是否是多段数据
    if(ServletFileUpload.isMultipartContent(req)){
        //创建FileItemFactory工厂实现类
        FileItemFactory fileItemFactory = new DisFileItemFactory();
        //创建用于解析上传数据的工具类
        ServletFileUpload servletFileUpload = 
            new ServletFileUpload(fileItemFactory);
        
        try{
            //解析上传的数据，得到每一个表单项FileItem
            List<FileItem> list = ServletFileUpload.parseRequest(req);
            //循环判断，每一个表单项，是普通类型，还是上传文件
            for(FileItem fileItem : list){
                if(fileItem.isFormField()){
                    //普通表单项
                    System.out.println("表单项的name属性值："+fileItem.getFieldName());
                    //参数UTF-8解决乱码问题
                    System.out.println("表单项的value属性值："+fileItem.getString("UTF-8"));
                } else{
                    //上传文件
                    System.out.println("表单项的name属性值："+fileItem.getFieldName());
                    System.out.println("上传的文件名："+fileItem.getName());
                    
                    fileItem.write(new File("e:\\"+fielItem.getName()));
                }
            }
            
        } catch (Excdeption e){
            e.printStackTrace();
        }
    }
}

2、文件下载

下载的常用 API 说明：

response.getOutputStream();
servletContext.getResourceAsStream();
servletContext.getMimeType();
response.setContentType();

response.setHeader("Content-Dispositon","attachment;fileName=1.jpg");

这个响应头告诉浏览器。这是需要下载的。而 attachment 表示附件，也就是下载的一个文件。 fileName 后面，表示下载的文件名。

完成上面的两个步骤，下载文件是没问题了。但是如果我们下载的文件是中文名的话。不会发现，下载无法。

文件下载

doGet(){
    //1.获取要下载的文件名
    String downloadFileName = "2.jpg";
    //2.读取要下载的文件内容（通过ServletContext对象可以读取）
    ServletContext servletContext = getServletContent();
    //获取要下载的文件类型
    String mimeType = servletContext.getMimeType("/file/"+downloadFileName);
    //3.在回传前，通过响应头告诉客户端返回的数据类型
    resp.setContentType(mimeType);
    //4.还要告诉客户端收到的数据是用于下载使用（还是使用响应头）
    //Content-Disposition 响应头，表示受的数据怎么处理
    //attachment 表示附件，表示下载使用
    //filename 表示指定下载的文件名
    resp.setHeader(
        "Content-Disposition","attachment;filename=temp.jpg");
    // /斜杠被服务器解析地址为http://ip:port/工程名/ 映射到代码的web目录
    InputStream resourceAsStream = 
        servletContext.getResourceStream("/file/"+downloadFileName);
    //获取响应的输出流
    OutputStream outputStream = resp.getOutputStream();
    //把下载的文件内容回传给客户端
    //读取输入流中全部的数据，复制给输出流，输出给客户端
    IOUtils.copy(resourceAsStream,outputStream);
}

1、附件中文乱码问题解决方案

方案一：URLEncoder解决谷歌、IE浏览器中文下载名乱码问题

"attachment;filename="+URLEncoder.encode("中国.jpg","UTF-8")

方案二：BASE64 编解码解决火狐浏览器附件中文乱码问题

base64

"attachment;filename==?UTF-8?B?"+new BASE64Encoder().encode("中国.jpg".getBytes("UTF-8"))+"?="

BASE64 编解码操作

String content = "这是需要Base64编码的内容";
//创建一个Base64编码器
BASE64Encoder base64Encoder = new BASE64Encoder();
//执行Base64编码操作
String encodedString = base64Encoder.encode(content.getBytes("UTF-8"));

//创建Base64解码器
BASE64Decoder base64Decoder = new BASE64Decoder();
//解码操作
byte[] bytes = base64Decoder.decodeBuffer(encodedString);

String str = new String(bytes,"UTF-8");

3、使用User-Agent 请求头判断，切换处理方案

if(req.getHeader("User-Agent").contains("Firefox")){
    //base64
}else{
    //URLEncoder
}

10、Cookie和Session

1、Cookie

Cookie 是服务器通知客户端保存键值对的一种技术；
客户端有了Cookie后，每次请求都发送给服务器；
每个 Cookie 的大小不能超过 4kb。

1、创建Cookie

//创建Cookie 对象
Cookie cookie = new Cookie("key1","value1");
//通知客户端保存Cookie
resp.addCookie(cookie);

2、服务器如何获取Cookie

Cookie[] cookies = req.getCookies();

cookie.getName()

cookie.getValue()

public static Cookie fineCookie(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;
}

3、Cookie 值的修改

创建同名cookie对象，然后resp.addCookie(cookie);
获得需要修改的cookie对象，setValue()修改值，resp.addCookie(cookie);通知客户端保存

4、Cookie 生命控制

setMaxAge()：

正数，表示在指定的秒数后过期；
负数，表示浏览器一关，Cookie 就会被删除（默认值是-1）；
零，表示马上删除Cookie。

Cookie cookie = CookieUtils.fineCookie("key2",req.getCookies);
if(cookie != null){
    cookie.setMaxAge(0);
    resp.addCookie(cookie);
}

5、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发送。

// getContextPath()=====》》》获得工程路径
cookie.setPath(req.getContextPath() + "/abc" );//===>/工程路径/abc

6、免输入用户名登录

免用户名登录

2、Session

Session 就是一个接口（HttpSession）
Session 就是会话。它是用来维护一个客户端和服务器之间关联的一种技术；
每个客户端都有自己的一个Session 会话；
Session 会话中，我们经常用来保存用户登陆之后的信息。

1、如何创建 Session 和获取(id号，是否为新)

request.getSession();

第一次调用是：创建 Session 会话；
之后调用都是：获取前面创建好的 Session 会话对象。

isNew()：判断是不是刚创建出来的（新的）

true: 表示刚创建；

false: 表示获取之前创建。

每个会话都有一个身份证号。也就是ID值。而且这个 ID 是唯一的。

getId() 得到 Session 的会话 id 值。

2、Session 域数据的存取

req.getSession().setAttribute("key","value");

req.getSession().getAttribute("key");

3、Session 生命周期控制

setMaxinactiveInterval()设置 Session的超时时间（以秒为单位），一般正数，负数【永不超时】

getMaxinactiveInterval()获取超时时间。

invalidate()：让Session 会话马上超时。

Session 默认的超时时长是 30 分钟。在Tomcat服务器的配置文件web.xml中有。

如果想要修改默认的超时时长，可以在项目的WEB-INF------->>>web.xml里添加：

<session-config>
	<session-timeout>20</session-timeout>
</session-config>

Session的超时指的是，客户端两次请求的最大间隔时长。如果在这个间隔时长里getSession()，内置的timeout值会恢复超时时长；如果超时(timeout值=0)，就会销毁Session。

4、浏览器和服务器 Session 之间关联的技术内幕

客户端和服务器Session的底层原理

11、Filter 过滤器

1、Filter 什么是过滤器

Filter 过滤器它是 JavaWeb的三大组件之一。
Filter 过滤器它是 JavaEE 的规范。也就是接口。
Filter 过滤器它的作用是：拦截请求，过滤响应。

拦截请求常见的应用场景：

权限检查；
日记操作；
事务操作；

。。。等等。

2、Filter 的初体验

拦截请求

@Override
doFilter(){
    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 起一个别名 -->
	<filter-name>AdminFilter</filter-name>
    <!-- 配置全类名 -->
	<filter-class>com.zwj.filter.AdminFilter</filter-class>
    
    <!-- init参数 -->
    <init-param>
    	<param-name>username</param-name>
        <param-value>root</param-value>
    </init-param>
    
</filter>
<!-- 配置Filter过滤器的拦截路径 -->
<filter-mapping>
    <!-- 表示当前拦截路径给哪个过滤器使用 -->
	<filter-name>AdminFilter</filter-name>
	<!-- 配置拦截路径 -->
	<url-pattern>/admin/*</url-pattern>
</filter-mapping>

3、Filter 的生命周期

Filter 的生命周期包含的几个方法：

构造器方法；
init 初始化方法；
doFilter 过滤方法；
destory 销毁。

4、FilterConfig 类

FilterConfig 类是 Filter过滤器的配置文件类。Tomcat 每次创建 Filter 的时候，也会同时创建一个 FilterConfig 类。

获取属性的方法：

getFilterName(); 获取filter-name内容
getInitParameter(“username”)；获取参数
getServletContext(). 获取ServletContext

5、FilterChain 过滤器链

filterChain执行细节

在多个Filter过滤器执行的时候，他们执行的优先顺序是由他们在 web.xml 中从上到下配置的顺序决定的

多个Filter过滤器执行的特点：

所有 Filter和目标资源默认都执行在同一个线程中；
多个Filter共同执行的时候，他们都使用同一个Request对象。

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 结尾才会拦截。

12、JSON、AJAX、i18n

1、JSON

1、JSON在 JavaScript 中的使用

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、json 的两个常用方法

json的存在有两种形式，json对象和 json字符串。

一般我们要操作 json 中的数据的时候，需要 json 对象的格式；

一般我们要在客户端和服务器之间进行数据交换的时候，使用json 字符串。

JSON.stringify() 把 json 对象转换成为 json 字符串；

JSON.parse() 把 json 字符串转换成为 json 对象。

2、JSON 在 java 中的使用

gson-2.2.4.jar包

1、javaBean 和 json 的互转

Person person = new Person(1,"牛逼");
//创建Gson 对象实例
Gson gson = new Gson();
// toJson
String personJsonString = gson.toJson(person);
// fromJson
Person person1 = gson.fromJson(personJsonString, Person.class);

2、List 和 json 的互转

public class PersonListType extends TypeToken<ArrayList<Person>>{
}

List<Person> personList = new ArrayList<>();

personList.add(new Person(1,"帅逼"));
personList.add(new Person(2,"彩笔"));

Gson gson = new Gson();

String personListJsonString = gson.toJson(personList);
List<Person> personList2 = 
    gson.fromJson(personListJsonString, new PersonListType().getType());

Person person = list.get(0);

3、map 和 json 的互转

List和 map 的转化，需要创建继承TypeToken类.

但是为了防止创建太多类，可以用匿名类当参数。

Map<Integer,Person> personMap = new HashMap<>();

personMap.put(1,new Person(1,"刷币"));
personMap.put(2,new Person(1,"da刷币"));

Gson gson = new Gson();

String personMapJsonString = gson.toJson(personMap);

Map<Integer,Person> personMap2 = 
    gson.fromJson(personMapJsonString,
                  new TypeToken<HashMap<Integer,Person>>(){}.getType());

Person p = personMap2.get(1);

2、AJAX 请求

1、什么是 AJAX 请求

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

ajax是一种浏览器通过 js 异步发起请求。局部更新页面的技术。

2、原生 AJAX 请求的示例

function ajaxRequest(){
    //1.首先要创建 XMLHttpRequest
    var xmlhttprequest = new XMLHttpRequest();
    //2.调用open方法设置请求参数
    xmlhttprequest.open("GET","http://localhost:8080/ajax/ajaxServlet?action=javaScriptAjax",true);
    //4.在send方法前绑定onreadystatechange事件，处理请求完成后的操作
    xmlhttprequest.onreadystatechange = function(){
        if(xmlhttprequest.readyState == 4 && xmlhttprequest.status ==200){
            xmlhttprequest.responseText;
        }
    }
    //3.调用send方法发送请求
    xmlhttprequest.send();
}

3、jQuery 中的 AJAX 请求

$.ajax方法

$ajax

$.ajax({
   	url:"http://localhost:8080/ajax/ajaxServlet",
   	data:"action=jQueryAjax",
   	type:"GET",
    success:function(data){
        $("#msg").html("编号："+data.id+" , 姓名："+data.name);
    },
    dataType:"json"
});

$.get方法和 $.post方法

getpost

$.get("http://localhost:8080/ajax/ajaxServlet","action=jQueryGet",function(data){
        $("#msg").html("编号："+data.id+" , 姓名："+data.name);
    },"json");

$.getJSON方法

$getJSON

$.getJSON("http://localhost:8080/ajax/ajaxServlet","action=jQueryGetJSON",function(data){
        $("#msg").html("编号："+data.id+" , 姓名："+data.name);
    });

表单序列化 serialize()

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

$.getJSON("http://localhost:8080/ajax/ajaxServlet","action=jQuerySerialize&"+ $("#form01"),function(data){
        $("#msg").html("编号："+data.id+" , 姓名："+data.name);
    });

jQuerySerialize(){
	sout.req.getParameter("username");
    sout.req.getParameter("password");
}

3、i18h 国际化

就是根据国家，更换页面信息。

1、什么是 i18n 国际化

i18h国际化含义

2、国际化相关要求介绍

国际化三要素

3、国际化资源 properties 测试

需要配置好不同国家的配置文件

//获取你系统默认的语言。国家信息
Locale locale = Locale.getDefault();

//Locale.getAvailableLocales()可以获取支持的语言数组

//获取中文常量的Locale对象
sout(Locale.CHINA);
//获取英文常量
sout(Locale.US);

Locale locale = Locale.CHINA;
ResourceBundle bundle = ResourceBundle.getBundle("i18n",locale);

sout("username："+bundle.getString("username"));//username：用户名

4、通过请求头国际化页面

<body>
    <%
      	//从请求头中获取Locale信息（语言）
    	Locale locale = request.getLocate();
    	//获取数据报（根据指定的 basename和Locale读取语言信息）
    	ResourceBundle i18n = ResourceBundle.getBundle("i18n",locale);
    %>
    <%=i18n.getString("username")%>
</body>

5、JSTL 标签库实现国际化

使用标签设置Locale信息；
使用标签设置baseName;
使用标签输出国际化信息。

<fmt:setLocate value="${param.locale}"/>
<fmt:setBundle basename="i18n"/>
<fmt:message key="username"/>

明々天

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb学习笔记

HTML、CSS、JavaScript、XML、JSON、Servlet、Filter、Listener、JSP、JSTL、Cookie、Session
复制链接

扫一扫

专栏目录