JavaWeb

时间 2019-11-20

标签 javaweb 栏目 Java 繁體版

原文原文链接

JavaWeb

软件架构

C/S (client/server 客服端/服务端)

优势：用户体验好缺点：开发、部署、安装、维护麻烦javascript

B/S （Browser/Server 浏览器/服务器端）

资源分类php
- 静态资源css
  
  使用静态网页开发技术发布的资源特色：一、全部用户访问，获得的结果是同样的（如：文本、图片、音频、视频、HTML、css、JavaScript）二、若是用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，能够展现静态资源html
- 动态资源前端
  
  使用动态网页即时发布的资源特色：一、全部用户访问，获得的结果可能不同（如：jsp/servlet,php,asp...）二、若是用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器html5

前端

HTML（Hyper Text MarKup Language）超文本标记语言

围堵标签java

有开始和结束标签的标签node
自闭合标签mysql

开始标签和结束标签在一块儿的标签jquery
标签能够嵌套

须要正确嵌套，不能你中有我，我中有你

CSS 指层叠样式表 (Cascading Style Sheets)

经常使用属性
- boder
  
  boder-top 边框顶边 boder-left 边框左边 boder-right 边框右边 boder-bottom 边框底边 boder-widht 边框宽度 boder-color 边框颜色 boder-style 边框样式 boder-radius 边框圆角
- margin
  
  margin-top 上外边距 margin-left 左外边距 margin-right 右外边距 margin-bottom 下外边距
- padding
  
  padding-top 上外边距 padding-left 左外边距 padding-right 右外边距 padding-bottom 下外边距
- background
  
  background-size 背景（图片）大小 background-color 背景颜色 background-image 背景图片
- font
  
  font-family 字体 font-size 字体大小
- 文本
  
  color 颜色 text-align 水平居中 line-height 行高（设置为父级同样高度垂直居中） vertical-align 垂直居中
- 尺寸
  
  width 宽度 height 高度 max-width 最大宽度 max-height 最大高度
- 表格
  
  border-collapse 规定是否合并表格边框 border-spacing 规定相邻单元格边框之间的距离

JavaScript

经常使用对象方法
- BOM对象
  - window窗口对象
    
    Window 对象表示浏览器中打开的窗口。若是文档包含框架（<frame> 或 <iframe> 标签），浏览器会为 HTML 文档建立一个 window 对象，并为每一个框架建立一个额外的 window 对象。
  - Navigator浏览器对象
    
    Navigator 对象包含有关浏览器的信息。
  - Screen显示器屏幕对象
    
    Screen 对象包含有关客户端显示屏幕的信息。
  - History历史记录对象
    
    History 对象包含用户（在浏览器窗口中）访问过的 URL。 History 对象是 window 对象的一部分，可经过 window.history 属性对其进行访问。
  - Location地址栏对象
    
    Location 对象包含有关当前 URL 的信息。 Location 对象是 window 对象的一部分，可经过 window.Location 属性对其进行访问。
  - 经常使用方法
    - alert() 显示带有一段消息和一个确认按钮的警告框（弹窗）
    - confirm() 显示带有一段消息以及取人按钮和取消按钮的对花括
      
      若是用户点击确认按钮，则方法返回true 若是用户点击取消按钮，则方法返回false
    - prompt() 显示可提示用户输入的对话框
    - close() 关闭浏览器
    - open() 打开一个新的浏览器窗口
    - setTimeout() 在指定的毫秒数后调用函数或计算表达式
    - clearTimeout() 取消由setTimeout() 方法设置的timout
    - setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式
    - clearInterval() 取消由setInterval()设置的timout
    - reload() 从新载入当前文档
    - back() 加载 history 列表中的前一个 URL
    - forward() 加载 history 列表中的下一个 URL
    - go() 加载 history 列表中的某个具体页面
- DOM对象
  - Document文档对象
  - Element元素对象
  - Attribute属性对象
  - Text文本对象
  - Comment注释对象
  - 事件（Event）对象
    - 点击
      - onclick单击
      - ondblclick双击
    - 焦点
      - onblur失去焦点
      - onfocus得到焦点
    - 加载
      - onload一张图片或页面完成加载
    - 鼠标事件
      - onmousedown鼠标按钮被按下
      - onmouseup鼠标按键被松开
      - onmousemove鼠标被移动
      - onmouseover鼠标移动到某元素上
      - onmouseout鼠标从某元素移开
    - 键盘事件
      - onkeydown某个键盘按键被按下
      - onkeyup某个键盘按键被松开
      - onkeypress某个键盘按键被按下并松开
    - 选择和改变
      - onchange域的内容被改变
      - onselect文本内容被选中
    - 表单事件
      - onsubmit确认按钮被点击
      - onreset重置按钮被点击
经常使用方法
- 删除
  - removeAttribute()删除属性
  - removeChild() 删除（并返回）当前节点的指定节点
- 获取指定对象
  - docunment.getElementById()返回对拥有指定id的第一个对象的引用
  - document.getElementsByName() 返回指定名称的对象集合
  - document.getElementsByTagName() 返回指定标签名的对象集合
  - document.getElementsByClassName() 返回指定class属性名称的对象集合
- 建立
  - document.createElement()建立元素节点
  - document.createTextNode()建立文本节点
  - documend.createAttribute()建立属性节点
  - innerHTML建立新的节点及内容
- 替换
  - replaceChild() 用新节点替换一个节点

JQuery

jQuery是一个快速、简洁的JavaScript框架，是继Prototype以后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，作更多的事情。它封装JavaScript经常使用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操做、事件处理、动画设计和Ajax交互。 JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已

jQuery-xxx.js与jquery-xxx.min.js区别

一、jQuery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积较大二、jQuery-xxx.min.js：生产版本。程序中使用，没有缩进。体积较小。程序加载更快
版本区别

目前jQuery有三个大版本： 1.x：兼容ie678,使用最为普遍的，官方只作BUG维护，功能再也不新增。所以通常项目来讲，使用1.x版本就能够了，最终版本：1.12.4 (2016年5月20日) 2.x：不兼容ie678，不多有人使用，官方只作BUG维护，功能再也不新增。若是不考虑兼容低版本的浏览器可使用2.x，最终版本：2.2.4 (2016年5月20日) 3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，通常不会使用3.x版本的，不少老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）
jQuery对象和js对象区别与转换

一、jQuery对象在操做时，更加方便二、jQuery对象和js对象方法不通用三、互相转换 jq-->js：jq对象[索引] 或者 jq对象.get(索引) js-->jq：$(js对象)
人口函数

//复杂写法 $(document).ready(function(){ ... })

//简单写法 $(function(){ ... })
- 与JavaScript人口函数的区别
  
  JavaScript人口函数：一、若是定义多个，只有最后一个会生效二、在页面渲染完成才会执行 jQuery人口函数：一、能够定义多个，都会生效二、dom树在内存中加载完成就会执行
样式控制

在 jQuery 中，提供了一个名为 css()的函数来操做 css 样式
1. 获取 css 样式的属性值 jq对象.css("属性名");
2. 设置 css 样式的属性值设置单个样式 jq对象.css("属性名","属性值"); 同时设置多个样式 jq对象.css({属性名:属性值,属性名2:属性值2});

常见选择器

基本选择器

标签选择器

语法： $("html标签名") 得到全部匹配标签名称的元素
id选择器

语法： $("#id的属性值") 得到与指定id属性值匹配的元素
类选择器

语法： $(".class的属性值") 得到与指定的class属性值匹配的元素
并集选择器

语法： $("选择器1,选择器2....") 获取多个选择器选中的全部元素

代码示例

<script type="text/javascript"> $(function () { // <input type="button" value="改变 id 为 one 的元素的背景色为 红色" id="b1"/> $("#b1").click(function () { $("#one").css("backgroundColor","red"); });
        // <input type="button" value=" 改变元素名为 <div> 的全部元素的背景色为 红色"  id="b2"/>
        $("#b2").click(function () {
           $("div").css("backgroundColor","red");
        });

        // <input type="button" value=" 改变 class 为 mini 的全部元素的背景色为 红色"  id="b3"/>
        $("#b3").click(function () {
           $(".mini").css("backgroundColor","red");
        });
        // <input type="button" value=" 改变全部的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/>
        $("#b4").click(function () {
           $("span,#two").css("backgroundColor","red");
        });
    });

</script>

层级选择器

层级选择器

语法：$("A B")选择A元素内部的全部B元素
子选择器

语法：$("A>B")选择A元素内部的全部B子元素

代码示例

 1   <script type="text/javascript">
 2         $(function () {
 3             // <input type="button" value=" 改变 <body> 内全部 <div> 的背景色为红色"  id="b1"/>
 4             $("#b1").click(function () {
 5                 $("body div").css("backgroundColor","red");
 6             });
 7             // <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色"  id="b2"/>
 8             $("#b2").click(function () {
 9                $("body>div").css("backgroundColor","red");
10             });
11             // <input type="button" value=" 改变 id为 two的下一个 div 兄弟背景色为 红色"  id="b3"/>
12             $("#b3").click(function () {
13                 $("#two+div").css("backgroundColor","red");
14             });
15             // <input type="button" value=" 改变 id为 two的后面的 div 兄弟背景色为 红色"  id="b4"/>
16             $("#b4").click(function () {
17                $("#two~div").css("backgroundColor","red");
18             });
19         });
20 </script>

属性选择器

属性名称选择器

语法：$("A[属性名]")包含指定属性的选择器
属性选择器

语法：$("A[属性名='值']")包含指定属性等于指定值的选择器
复合属性选择器

语法：$("A属性名='值'...")包含多个属性的选择器

代码示例

 1 <script type="text/javascript">
 2         $(function () {
 3             // <input type="button" value=" 含有属性title 的div元素背景色为红色"  id="b1"/>
 4             $("#b1").click(function () {
 5                 $("[title]").css("backgroundColor","red");
 6             });
 7             // <input type="button" value=" 属性title值等于test的div元素背景色为红色"  id="b2"/>
 8             $("#b2").click(function () {
 9                $("div[title='test']").css("backgroundColor","red");
10             });
11             // <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色"  id="b3"/>
12             $("#b3").click(function () {
13                 $("div[title!='test']").css("backgroundColor","red");
14             });
15             // <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色"  id="b4"/>
16             $("#b4").click(function () {
17                $("div[title^='te']").css("backgroundColor","red");
18             });
19             // <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色"  id="b5"/>
20             $("#b5").click(function () {
21                 $("div[title$='est']").css("backgroundColor","red");
22             });
23             // <input type="button" value="属性title值 含有es的div元素背景色为红色"  id="b6"/>
24             $("#b6").click(function () {
25                 $("div[title*='es']").css("backgroundColor","red");
26             });
27             // <input type="button" value="选取有属性id的div元素，而后在结果中选取属性title值含有“es”的 div 元素背景色为红色"  id="b7"/>
28             $("#b7").click(function () {
29                $("div[id][title*='es']").css("backgroundColor","red");
30             });
31         });

过滤选择器

首元素选择器

语法：:first得到选择的元素中的第一个元素
尾元素选择器

语法：:last得到选择的元素中的最后一个元素
非元素选择器

语法：:not(selector)不包括指定内容的元素
偶数选择器

语法：:even偶数，从0开始计数
奇数选择器

语法：:odd奇数
等于索引选择器

语法：:eq(index)指定索引元素
大于索引选择器

语法：:gt(index)大于指定索引元素
小于索引选择器

语法：:lt(indext)小于指定索引元素
标题选择器

语法：:header得到标题（h1~h6）元素，固定写法

代码示例

<script type="text/javascript">
        $(function () {
        // <input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/>
        $("#b1").click(function () {
            $("div:first").css("backgroundColor","red");
        });
        // <input type="button" value=" 改变最后一个 div 元素的背景色为 红色"  id="b2"/>
        $("#b2").click(function () {
            $("div:last").css("backgroundColor","red");
        });
        // <input type="button" value=" 改变class不为 one 的全部 div 元素的背景色为 红色"  id="b3"/>
        $("#b3").click(function () {
            $("div:not(.one)").css("backgroundColor","red");
        });
        // <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"/>
        $("#b4").click(function () {
            $("div:even").css("backgroundColor","red");
        });

        // <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"/>
        $("#b5").click(function () {
           $("div:odd").css("backgroundColor","red");
        });
        // <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"/>
        $("#b6").click(function () {
           $("div:gt(3)").css("backgroundColor","red");
        });
        // <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"/>
        $("#b7").click(function () {
            $("div:eq(3)").css("backgroundColor","red");
        });
        // <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"/>
        $("#b8").click(function () {
           $("div:lt(3)").css("backgroundColor","red");
        });
        // <input type="button" value=" 改变全部的标题元素的背景色为 红色"  id="b9"/>
        $("#b9").click(function () {
           $(":header").css("backgroundColor","red");
        });
        //  <input type="button" value=" 改变class为two的第一个div子元素的背景色为 红色"  id="b10"/>
        $("#b10").click(function () {
            $(".two>div:first").css("backgroundColor","red");
        });
    });

表单过滤选择器

可用元素选择器

语法：:enabled得到可用元素
不可用元素选择器

语法：:disabled得到不可用元素
选中选择器

语法：:checked得到单选/复选框选中的元元素
选中选择器

语法：:selected得到下拉框选中的元素

代码示例

<script type="text/javascript">
        $(function () {
        // <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>
        $("#b1").click(function () {
            $(":text:enabled").val("改变值")
        });
        // <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>
        $("#b2").click(function () {
            $(":text:disabled").val("改变值")
        });
        // <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框没选中的个数"  id="b3"/>
        $("#b3").click(function () {
            var length = $(":checkbox:not(:checked)").length;
            console.log(length);
        });
        // <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数"  id="b4"/>
        $("#b4").click(function () {
            var length = $("#job>option:selected").length;
            console.log(length);
        });
        //<input type="button" value="找到全部的表单元素，更换背景"  id="b5"/>
        $("#b5").click(function () {
            $(":input").css("backgroundColor","red");
        });
    });

DOM操做

内容操做的方法

html()

获取/设置元素的标签体内容(包含字标签)，若是没有传递参数就是获取，若是传递了参数就是设置至关于传统 js 中的 innerHTML 属性内容 --> 内容
text()

获取/设置元素的标签体纯文本内容，若是没有传递参数就是获取，若是传递了参数就是设置至关于传统 js 中的 innerText 属性注意：在设置的时候，会把以前的标签体所有覆盖内容 --> 内容
val()

获取/设置元素的value属性值，若是没有传递参数就是获取，若是传递了参数就是设置至关于传统 js 中的 value 属性

代码示例

<head>
    <meta charset="UTF-8">
    <title></title>
    <script  src="../js/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            // 获取，设置myinput 的value值
            var val = $("#myinput").val();//张三
            $("#myinput").val("李四");
                    // 获取，设置mydiv的标签体内容
        var html_content = $("#mydiv").html();//<p><a href="#">标题标签</a></p>            $("#mydiv").html("<b>aaaa</b>")//页面上显示一个加粗的aaa，以前的标签体所有被覆盖
 
        // 获取，设置mydiv纯文本内容
        var text_content = $("#mydiv").text();//获取到的是"标题标签"            $("#mydiv").text("<b>aaaa</b>");//页面上显示<b>aaaa</b>，以前的标签体会被所有覆盖        });
 
</script>
</head>
        // 获取，设置mydiv的标签体内容
        var html_content = $("#mydiv").html();//<p><a href="#">标题标签</a></p>            $("#mydiv").html("<b>aaaa</b>")//页面上显示一个加粗的aaa，以前的标签体所有被覆盖
 
        // 获取，设置mydiv纯文本内容
        var text_content = $("#mydiv").text();//获取到的是"标题标签"            $("#mydiv").text("<b>aaaa</b>");//页面上显示<b>aaaa</b>，以前的标签体会被所有覆盖        });
 
</script>
</head>
 <body>
    <input id="myinput" type="text" name="username" value="张三" /><br />
    <div id="mydiv"><p><a href="#">标题标签</a></p></div>
    <input type="checkbox" id="cb1"/>
 </body

属性操做
- 通用属性操做
  - attr()
    
    attr(name) 获取元素的指定属性名对应的属性值 attr(name, vlaue) 设置元素的单个属性 attr({"name1":"value1", "name2":"value2"}) 同时设置元素的多个属性 removeAttr(name) 根据属性名移除元素的指定属性
  - removeAttr()
    
    删除属性
  - prop()
    
    prop(name) 获取元素的指定属性名对应的属性值 prop(name, vlaue) 设置元素的单个属性 prop({"name1":"value1", "name2":"value2"}) 同时设置元素的多个属性 removeProp(name) 根据属性名移除元素的指定属性
  - removeProp()
    
    删除属性
  - attr和prop的区别
    1. attr 通常用于操做元素的自定义属性，prop 通常用于操做元素的固有属性固有属性：w3c 文档中必定描述过的属性自定义属性：w3c 文档中没有描述过的属性文档位置：点击顶部JavaScript-->点击左侧JavaScript-->点击参考书-->左侧HTML对象（见HTML属性.jpg）
    2. 在获取属性值时，prop 的返回值更为友好如：获取元素的 checked 属性值 attr("checked") 若是设置了 checked 属性，返回值为 checked 若是没有设置 checked 属性，返回值为 undeﬁned prop("checked") 若是设置了 checked 属性，返回值为 true 若是没有设置 checked 属性，返回值为 false 因此在获取这种属性值的时候，建议使用 prop 方法
- 对class属性操做
  - addClass()添加class属性值
  - removeClass()删除class属性值
  - toggleClass()切换class属性值
    
    toggleClass("one"): 判断若是元素对象上存在class="one"，则将属性值one删除掉。若是元素对象上不存在class="one"，则添加
  - css()
  - 代码示例
```
 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         .cls1{
 6             background-color: green;
 7         } 
 8         .cls2{
 9             width: 500px;
10         }
11     </style>
12     <script src="../js/jquery-3.3.1.min.js"></script>    <script>
13     $(function () {
14         $("#btn1").click(function () {
15             $("#d1").addClass("cls2");
16     });
17         
18     $("#btn2").click(function () {
19     $("#d1").removeClass("cls2");
20     });
21         
22     $("#btn3").click(function () {
23          $("#d1").toggleClass("cls2");
24      });
25     })
26     </script>
27 </head>
28 <body>
29     <div class="cls1" id="d1">aaaaa</div>
30     <input id="btn1" type="button" value="添加class值cls2"/>
31     <input id="btn2" type="button" value="移除class值cls2"/>
32     <input id="btn3" type="button" value="切换class值cls2"/>
33 </body>
```

CRUD操做

append()父元素将子元素追加到末尾

对象1.append(对象2): 将对象2添加到对象1元素内部，而且在末尾
prepend()父元素将子元素追加到开头

对象1.prepend(对象2):将对象2添加到对象1元素内部，而且在开头
appendTo()

对象1.appendTo(对象2):将对象1添加到对象2内部，而且在末尾
prependTo()

对象1.prependTo(对象2):将对象1添加到对象2内部，而且在开头
after()添加元素到元素后边

对象1.after(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系
before()添加元素到元素的前边

对象1.before(对象2)：将对象2添加到对象1前边。对象1和对象2是兄弟关系
insertAfter()

对象1.insertAfter(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系
insertBefore()

对象1.insertBefore(对象2)：将对象2添加到对象1前边。对象1和对象2是兄弟关系
remove()移除元素

对象.remove():将对象删除掉
empty()清空元素的全部后代元素

对象.empty():将对象的后代元素所有清空，可是保留当前对象以及其属性节点

代码示例

 1 <script type="text/javascript">
 2     $(function () {
 3          // <input type="button" value="将反恐放置到city的后面"  id="b1"/>
 4 
 5          $("#b1").click(function () {
 6              //append
 7              //$("#city").append($("#fk"));
 8              //appendTo
 9              $("#fk").appendTo($("#city"));
10          });
11          // <input type="button" value="将反恐放置到city的最前面"  id="b2"/>
12          $("#b2").click(function () {
13              //prepend
14              //$("#city").prepend($("#fk"));
15              //prependTo
16              $("#fk").prependTo($("#city"));
17          });
18          // <input type="button" value="将反恐插入到天津后面"  id="b3"/>
19          $("#b3").click(function () {
20              //after
21              //$("#tj").after($("#fk"));
22              //insertAfter
23              $("#fk").insertAfter($("#tj"));
24 
25          });
26          // <input type="button" value="将反恐插入到天津前面"  id="b4"/>
27          $("#b4").click(function () {
28              //before
29              //$("#tj").before($("#fk"));
30              //insertBefore
31              $("#fk").insertBefore($("#tj"));
32 
33          });
34      });

动画
- 简单的显示隐藏
  - show()显示
  - hide()隐藏
  - toggle()切换
- 滑动显示和隐藏方式
  - slideDown()
  - slideUp()
  - slideToggle()
- 淡入淡出显示和隐藏方式
  - fadeIn()
  - fadeOut()
  - fadeToggle()
- 以上函数均可以接收3个参数
  
  通常咱们在使用这些效果函数的时候，只会传递参数1
  - 参数1（speed）
    
    动画的速度：三个预约义的值（“slow”，“normal”，“fast”）或表示动画时长的毫秒数值
  - 参数2（easing）
    
    用来指定切换效果：默认是“swing”，可用参数“linear” swing：动画执行时效果是先慢，中间快，最后又慢 linear：动画执行的速度是匀速的
  - 参数3（fn）
    
    在动画完成时执行的函数，每个元素执行一次

JQuery遍历

jq数组对象.each(function(i,n){ })

一、jq数组对象必须时jQuery对象二、参数i表明索引三、参数n表明索引对应的数组元素四、return true表明跳出本次循环，return false表明结束循环
$.each(数组,function(i,n){})
1. $ 在 jQuery 中被称之为【jQuery对象】
2. 参数数组既能够是 js 对象，也能够是 jQuery 对象
3. 参数 i 表明索引 4. 参数 n 表明索引对应的数组元素 5. return true 表明跳出本次循环，return false 表明结束循环

代码示例

 1 <ul id="city">
 2     <li>北京</li>
 3     <li>上海</li>
 4     <li>天津</li>
 5     <li>重庆</li>
 6 </ul>
 7 <script>
 8     //遍历全部li，输出索引以及li中的标签体，若是标签体是天津则跳出本次循环
 9     $(function () {
10         var lis = $("li");
11         lis.each(function (index, element) {
12             var innerHTML = element.innerHTML;
13             if (innerHTML == "天津") {
14                 return false;
15                 // return true;
16             }
17             alert(index + ":" + innerHTML);
18         })
19     });
20 $(function () {
21     var lis = document.getElementById("li");
22     $.each(lis,function (index, element) {
23         var innerHTML = element.innerHTML;
24         if(innerHTML == "天津"){
25             return false;
26             // return true;
27         }
28         alert(index + ":" + innerHTML);
29     })
30 })
31 </script>

JQuery事件

常见事件
- 格式
  
  jq对象.事件函数(function(){ });
- click(fn)单击
- focus(fu)获取焦点
- blur(fu)失去焦点
- mouseover(fn)鼠标放上去
- mouseout(fn)鼠标离开
- keydown(fn)键盘按下
- keyup(fn)键盘抬起
- change(fn)值改变，通常用于下拉列表
- submit(fn)表单提交（返回true提交，返回false阻止表单提交）
on&off绑定事件
- on函数绑定事件
  
  jq对象.on("事件名称",function(){ });
- off函数解绑事件
  
  jq对象.off("事件名"); jq对象.off();//没有参数，表明解绑全部事件
- 给将来元素绑定事件
  
  //给将来建立的按钮”btn2“绑定单击事件 $(document).on("click","#btn2",function () { alert("按钮2被点击了..."); }) 经过一个非将来元素，给它内部的将来后代元素绑定事件。整个文档对象 document 确定是预先存在的，全部它是非将来元素， on 函数中的参数解释以下：参数1：字符串类型的事件名称，如 click,mouseover,museout.... 参数2：字符串类型的非将来元素对应的选择器(直接写选择器不能加$()) 参数3：回调函数，事件产生之后执行的函

事件切换

toggle(fn1,fn2,fn3...) 1.9版本后被废弃，徐导入兼容包
hover(fn1,fn2)鼠标悬停切换

代码示例

 1 <head>
 2     <meta charset="UTF-8">
 3     <title></title>
 4     <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf8"></script>    <!--引入兼容插件包-->
 5  <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
 6     <script type="text/javascript">
 7         $(function () {
 8            //获取按钮，调用toggle方法
 9            $("#btn").toggle(function () {
10                //改变div背景色backgroundColor 颜色为 green
11                $("#myDiv").css("backgroundColor","green");
12            },function () {
13                //改变div背景色backgroundColor 颜色为 pink
14                $("#myDiv").css("backgroundColor","pink");
15            });
16         });
17     </script>
18  </head>
19 
20  <body>
21     <input id="btn" type="button" value="事件切换">
22 
23     <div id="myDiv" style="width:300px;height:300px;background:pink">
24         点击按钮变成绿色，再次点击红色
25     </div>
26 
27  </body>
28 
29 //表格的鼠标悬停变色
30 var color; $(function () {
31     $("tr").hover(function () {
32         color = $(this).css("backgroundColor");
33         $(this).css("backgroundColor","red");
34     }, function () {
35         $(this).css("backgroundColor",color);
36     });
37  });

JQuery的插件机制

所谓的插件机制指的是，若是咱们以为 jQuery 提供的方法不够知足咱们的需求，咱们能够本身来扩展 jQuer y的功能。也就是给本身在 jQuery 中添加方法。可是这部分工做通常都是一些专业的前端人员才会涉及到。

扩展jQuery元素对象

// 一次性扩展多个方法 $.fn.extend({ 方法名:function(){ }, 方法名:function(){ } }) // 一次性扩展一个方法 $.fn.方法名=function(){ } 注意：在 jQuery 插件代码中，this 关键字是 jQuery 对象

代码示例

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>01-jQuery对象进行方法扩展</title>
 6     <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
 7     <script type="text/javascript">
 8        //使用jquery插件 给jq对象添加2个方法 check()选中全部复选框，uncheck()取消选中全部复选框
 9     //1.定义jqeury的对象插件
10     $.fn.extend({
11         //定义了一个check()方法。全部的jq对象均可以调用该方法
12         check:function () {
13            //让复选框选中
14 
15             //this:调用该方法的jq对象
16             this.prop("checked",true);
17         },
18         uncheck:function () {
19             //让复选框不选中
20 
21             this.prop("checked",false);
22         }
23         
24     });
25 
26     $(function () {
27        // 获取按钮
28         //$("#btn-check").check();
29         //复选框对象.check();
30 
31         $("#btn-check").click(function () {
32             //获取复选框对象
33             $("input[type='checkbox']").check();
34 
35         });
36 
37         $("#btn-uncheck").click(function () {
38             //获取复选框对象
39             $("input[type='checkbox']").uncheck();
40 
41         });
42     });
43     </script>
44     </head>
45 <body>
46 <input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()">
47 <input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()">
48 <br/>
49 <input type="checkbox" value="football">足球
50 <input type="checkbox" value="basketball">篮球
51 <input type="checkbox" value="volleyball">排球
52 
53 </body>
54 </html>

扩展全家jQuery对象的方法

所谓的全局 jQuery 对象就是 $ 对象，也就是能够直接经过 $ 调用的方法，扩展方式以下： // 能够一次性扩展多个方法 $.extend({ 方法名:function(){ }, 方法名:function(){ } }) // 一次性扩展一个方法 $.方法名=function(){ }

代码示例

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>01-jQuery对象进行方法扩展</title>
 6     <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
 7     <script type="text/javascript">
 8         //对全局方法扩展2个方法，扩展min方法：求2个值的最小值；扩展max方法：求2个值最大值
 9     $.extend({
10         max:function (a,b) {
11             //返回两数中的较大值
12             return a >= b ? a:b;
13         },
14         min:function (a,b) {
15             //返回两数中的较小值
16             return a <= b ? a:b;
17         }
18     });
19 
20     //调用全局方法
21     var max = $.max(4,3);
22     //alert(max);
23     var min = $.min(1,2);
24     alert(min);
25 </script>
26 </head>
27 <body>
28 </body>
29 </html>

Bootstrap

响应式布局

同一套页面能够兼容不一样分辨率的设备。实现：依赖于栅格系统：将一行平均分红12个格子，能够指定元素占几个格子步骤： 1. 定义容器。至关于以前的table 容器分类： 1. container：两边留白 2. container-fluid：每一种设备都是100%宽度 2. 定义行。至关于以前的tr 样式：row 3. 定义元素。指定该元素在不一样的设备上，所占的格子数目。样式：col-设备代号-格子数目设备代号： 1. xs：超小屏幕手机 (<768px)：col-xs-12 2. sm：小屏幕平板 (≥768px) 3. md：中等屏幕桌面显示器 (≥992px) 4. lg：大屏幕大桌面显示器 (≥1200px)

注意： 1. 一行中若是格子数目超过12，则超出部分自动换行。 2. 栅格类属性能够向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。 3. 若是真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。

基础模板

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其余内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
  </head>
  <body>
          <h1>你好，世界！</h1>
      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
      </body>
</html>

XML（Extensible Markup Language）可扩展标记语言

可扩展：标签都是自定义的。功能：存储数据（配置文件，网络传输）

xml与html的区别

一、XML标签都是自定义的，HTML标签是预约义二、XML的语法严格，HTML语法松散３、XML是存储数据的，HTML是展现数据
语法

１、XML文档的后缀名（.xml）二、XML第一行必须定义为文档声明三、XML文档中有且仅有一个根标签四、属性值必须使用引号（单双均可）引发来五、标签必须正确关闭六、XML标签名区分大小写
- 文档声明
  
  一、格式<? xml 属性列表 ?> 二、属性列表： version：版本号，必须的属性 encoding：编码方式。告知解析引擎当前文档使用的字符集，默认值：ISO-8859-1 standalone：是否独立（yes：不依赖其余文件；no：依赖其它文件）
- 指令
  
  结合css：<? xml-stylesheet type="text/css" href="a.css" ?>
- 标签
  
  规则：一、名字能够包含字母、数字及其它的字符二、名称不能以数字或者标点符号开始三、名称不能以字母xml(或者XML、Xml等等)开始四、名称不能包含空格
- 属性
  
  id属性值惟一
- 文本
  
  CDATA区：在该区域中的数据会被原样展现<![CDATA[数据]]> 约束：规定xml文档的书写规则
- 约束
  
  约束：规定xml文档的书写规则做为框架的使用者(程序员)： 1. 可以在xml中引入约束文档 2. 可以简单的读懂约束文档分类： 1. DTD:一种简单的约束技术 2. Schema:一种复杂的约束技术 DTD：引入dtd文档到xml文档中内部dtd：将约束规则定义在xml文档中外部dtd：将约束的规则定义在外部的dtd文件中本地：<!DOCTYPE 根标签名 SYSTEM "dtd文件的位置"> 网络：<!DOCTYPE 根标签名 PUBLIC "dtd文件名字" "dtd文件的位置URL">
  
  Schema: 引入： 1.填写xml文档的根元素 2.引入xsi前缀. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 3.引入xsd文件命名空间. xsi:schemaLocation="http://www.itcast.cn/xml student.xsd" 4.为每个xsd约束声明一个前缀,做为标识 xmlns="http://www.itcast.cn/xml"
  
  <students xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.itcast.cn/xml" xsi:schemaLocation="http://www.itcast.cn/xml student.xsd">
- 解析
  
  解析：操做xml文档，将文档中的数据读取到内存中操做xml文档 1. 解析(读取)：将文档中的数据读取到内存中 2. 写入：将内存中的数据保存到xml文档中。持久化的存储
  
  解析xml的方式： 1. DOM：将标记语言文档一次性加载进内存，在内存中造成一颗dom树优势：操做方便，能够对文档进行CRUD的全部操做缺点：占内存 2. SAX：逐行读取，基于事件驱动的。优势：不占内存。缺点：只能读取，不能增删改
  
  xml常见的解析器： 1. JAXP：sun公司提供的解析器，支持dom和sax两种思想 2. DOM4J：一款很是优秀的解析器 3. Jsoup：jsoup 是一款Java 的HTML解析器，可直接解析某个URL地址、HTML文本内容。它提供了一套很是省力的API，可经过DOM，CSS以及相似于jQuery的操做方法来取出和操做数据。 4. PULL：Android操做系统内置的解析器，sax方式的。
Jsoup

jsoup 是一款Java 的HTML解析器，可直接解析某个URL地址、HTML文本内容。它提供了一套很是省力的API，可经过DOM，CSS以及相似于jQuery的操做方法来取出和操做数据。
- 使用步骤
  1. 导入jar包
    1. 获取Document对象
      1. 获取对应的标签Element对象
      2. 获取数据
- 对象
  1. Jsoup：工具类，能够解析html或xml文档，返回Document parse：解析html或xml文档，返回Document parse(File in, String charsetName)：解析xml或html文件的。 parse(String html)：解析xml或html字符串 parse(URL url, int timeoutMillis)：经过网络路径获取指定的html或xml的文档对象
  2. Document：文档对象。表明内存中的dom树获取Element对象 getElementById(String id)：根据id属性值获取惟一的element对象 getElementsByTag(String tagName)：根据标签名称获取元素对象集合 getElementsByAttribute(String key)：根据属性名称获取元素对象集合 getElementsByAttributeValue(String key, String value)：根据对应的属性名和属性值获取元素对象集合
  3. Elements：元素Element对象的集合。能够当作 ArrayList<Element>来使用
  4. Element：元素对象
    1. 获取子元素对象 getElementById(String id)：根据id属性值获取惟一的element对象 getElementsByTag(String tagName)：根据标签名称获取元素对象集合 getElementsByAttribute(String key)：根据属性名称获取元素对象集合 getElementsByAttributeValue(String key, String value)：根据对应的属性名和属性值获取元素对象集合
    2. 获取属性值 String attr(String key)：根据属性名称获取属性值
    3. 获取文本内容 String text():获取文本内容 String html():获取标签体的全部内容(包括字标签的字符串内容)
  5. Node：节点对象是Document和Element的父类

快速查询

selector:选择器使用的方法：Elements select(String cssQuery) 语法：参考Selector类中定义的语法
XPath：XPath即为XML路径语言，它是一种用来肯定XML（标准通用标记语言的子集）文档中某部分位置的语言使用Jsoup的Xpath须要额外导入jar包。查询w3cshool参考手册，使用xpath的语法完成查询

代码示例

  //1.获取student.xml的path
           String path = JsoupDemo6.class.getClassLoader().getResource("student.xml").getPath();
   //2.获取Document对象
           Document document = Jsoup.parse(new File(path), "utf-8");
          
  //3.根据document对象，建立JXDocument对象
           JXDocument jxDocument = new JXDocument(document);
          
  //4.结合xpath语法查询
      //4.1查询全部student标签
            List<JXNode> jxNodes = jxDocument.selN("//student");
            for (JXNode jxNode : jxNodes) {
                      System.out.println(jxNode);
            }
          System.out.println("--------------------");
      
  //4.2查询全部student标签下的name标签
         List<JXNode> jxNodes2 = jxDocument.selN("//student/name");
         for (JXNode jxNode : jxNodes2) {
                 System.out.println(jxNode);
         }
      
              System.out.println("--------------------");
      
  //4.3查询student标签下带有id属性的name标签
          List<JXNode> jxNodes3 = jxDocument.selN("//student/name[@id]");
          for (JXNode jxNode : jxNodes3) {
                  System.out.println(jxNode);
          }
              System.out.println("--------------------");
  //4.4查询student标签下带有id属性的name标签 而且id属性值为itcast
      
           List<JXNode> jxNodes4 = jxDocument.selN("//student/name[@id='itcast']");
           for (JXNode jxNode : jxNodes4) {
                  System.out.println(jxNode);
           }

代码示例

 1     //2.1获取student.xml的path
 2     String path = JsoupDemo1.class.getClassLoader().getResource("student.xml").getPath();
 3     //2.2解析xml文档，加载文档进内存，获取dom树--->Document
 4     Document document = Jsoup.parse(new File(path), "utf-8");
 5     //3.获取元素对象 Element
 6     Elements elements = document.getElementsByTag("name");
 7     System.out.println(elements.size());
 8     //3.1获取第一个name的Element对象
 9     Element element = elements.get(0);
10     //3.2获取数据
11     String name = element.text();
12     System.out.println(name);

web服务器软件

webLogic

webSphere

JBOSS

Tomcat

Apache基金组织，中小型的JavaEE服务器，仅支持少许的Java EE规范servlet/jsp

部署项目的三种方式

浏览器访问项目： https:/127.0.0.1:8080/虚拟目录/资源路径.html
- 直接将项目放到webapps目录下
  
  /hello：项目的访问路径-->虚拟目录简化部署：将项目打成一个war包，再将war包放置到webapps目录下（war包会自动解压缩）
- 配置conf/server.xml文件
  
  在<Host>标签体中配置 <Context docBase="项目实际路径" path=“虚拟目录名" /> docBase：项目存放的路径 path：虚拟目录
- 在conf\Catalina\localhost建立任意名称（虚拟目录）的xml文件。
  
  在文件中编写<Context docBase="项目存放的路径" /> 虚拟目录：xml文件的名称
静态项目和动态项目
- 目录结构
  
  Java动态目录：项目的根目录 WEB-INF目录： web.xml：该项目的核心配置文件 classes目录：放置字节码文件的目录 lib目录：放置依赖的jar包

JSP

概念

Java Server Pages： java服务器端页面能够理解为：一个特殊的页面，其中既能够指定定义html标签，又能够定义java代码用于简化书写！！！

原理

JSP本质上就是一个Servlet xxx.jsp-->xxxServlet.java-->xxx.class

三大脚本

<% %>

定义的java代码，在service方法中。service方法中能够定义什么，该脚本中就能够定义什么。
<%! %>

定义的java代码，在jsp转换后的java类的成员位置。Servlet时单例的
<%= %>

定义的java代码，会输出到页面上。输出语句中能够定义什么，该脚本中就能够定义什么。

三大指令

用于配置JSP页面，导入资源文件

格式

<%@ 指令名称属性名1=属性值1 属性名2=属性值2 ... %>
page配置指令

配置JSP页面
- ContentType
- import
- errorPage
- isErrorPage
- pageEncoding
- isELIgnore
include页面包含的

引入一些公共的页面
taglib标签库

引入第三方的标签库

注释

注释HTMl

xml注释方式：只能注释HTML代码片断
注释Java
JSP特有注释

<%-- --%>能够注释全部

九大内置对象

在jsp页面中不须要获取和建立，能够直接使用的对象，来自于.jsp-->.java的Service()的局部变量

变量名	真实类型	做用
pageContext	PageContext	当前页面共享数据，还能够获取其余八个内置对象
request	HttpServletRequest	一次请求访问的多个资源(转发)
session	HttpSession	一次会话的多个请求间
application	ServletContext	全部用户间共享数据
response	HttpServletResponse	响应对象
page	Object	当前页面（Servlet）的对象 this
out	JspWriter	输出对象，数据输出到页面上
config	ServletConfig	Servlet的配置对象
exception	Throwable	异常对象

四个域对象
- pageContext能够获取其余8个内置对象
- request
- session
- application
response
out 字符输出流对象。能够将数据输出到页面上。和response.getWriter()相似 response.getWriter()和out.write()的区别：在tomcat服务器真正给客户端作出响应以前，会先找response缓冲区数据，再找out缓冲区数据。 response.getWriter()数据输出永远在out.write()以前
exception
config
page

MVC架构模式

优势：

耦合性低，方便维护，能够利于分工协做重用性高

缺点：

使得项目架构变得复杂，对开发人员要求高

M：Model（模型）

M：Model，模型。JavaBean 完成具体的业务操做，如：查询数据库，封装对象
V：View（视图）

V：View，视图。JSP、html 展现数据
C：Controller（控制器）

C：Controller，控制器。Servlet 获取用户的输入调用模型将数据交给视图进行展现

EL表达式（Expression Language表达式语言）

做用：替换和简化JSP页面中Java代码的编写注意： jsp默认支持el表达式，若是要忽略el表达式一、设置jsp指令中：isELIgonred="true"忽略当前jsp页面中全部的el表达式二、{表达式}：忽略当前这个el表达式

运算
1. 算数运算符： + - * /(div) %(mod)
2. 比较运算符： > < >= <= == !=
3. 逻辑运算符： &&(and) ||(or) !(not)
4. 空运算符： empty
功能：用于判断字符串、集合、数组对象是否为null或者长度是否为0 ${empty list}:判断字符串、集合、数组对象是否为null或者长度为0 ${not empty str}:表示判断字符串、集合、数组对象是否不为null 而且长度>0

语法：${表达式};

${域名称.键名}; 从指定的域中获取指定键的值

${requestScope.键名}中的requestScope是el表达式中的内置对象，表示requset域对象
${键名}; 表示一次从最小的域中查找是否有改建对应的值，直到找到为止

获取对象、List集合、Map集合的值

从四个域范围内获取值

域	el表达式
pageContext	${pageScope.name}	当前页面
requsert	${HttpServletRequest.name}	一次请求
session	${HttpSession.name}	一次会话
application	${ServletContext.name}	整个web

获取对象：${域名.键名.属性名};
获取List集合：${域名键名[索引]};
获取Map集合：${域名.键名.key名称};或者${域名.键名["key名称"]}

11个隐式对象

pageContext：获取jsp其余八个内置对象 ${pageContext.request.contextPath}：动态获取虚拟目录

JSTL（JavaServer Pages Tag Library）JSP标准标签库

经常使用的标签
- if（Java代码if语句）
  
  test 必须属性，接受boolean表达式,若是表达式为true，则显示if标签体内容，若是为false，则不显示标签体内容。通常状况下，test属性值会结合el表达式一块儿使用。
- choose（Java代码switch语句）
  1. 使用choose标签声明至关于switch声明
  2. 使用when标签作判断至关于case
  3. 使用otherwise标签作其余状况的声明至关于default
- foreach（Java代码for语句）
  
  items:容器对象； var:容器中元素的临时变量； begin：开始值； end：结束值； step：步长； varStatus:循环状态对象： index:容器中元素的索引，从0开始； count:循环次数，从1开始。

Http(Hyper Textsfer Protocol)超文本传输协议

传输协议：定义了客服端和服务端通信时，发送数据的格式特色：一、基于TCP/IP的高级协议二、默认端口号：80 三、基于请求/响应模型的：一次请求对应一次响应四、无状态的：每次请求之间相互独立，不能交互历史版本： 1.0：每一次请求响应都会创建新的链接 1.1：复用链接

请求消息的格式

请求行

请求方式请求url 请求协议/版本 GET /login.html HTTP/1.1 请求方式： HTTP协议有7种请求方式，经常使用2种 GET：一、请求参数在请求行中，在url后，二、请求的url长度有限制的（64kb）三、不太安全 POST：一、请求参数在请求体中二、请求的url长度没有限制三、相对安全
请求头

客服端浏览器告诉服务器一些信息请求头名称：请求头值常见的请求头：一、User-Agent：浏览器告诉服务器，我访问你使用的浏览器版本信息（能够在服务器端获取该头的信息，解决浏览器的的兼容性问题）二、Referer：http//localhoset/login.html 告诉服务器，我（当前请求）从哪里来（防盗链，统计）
请求空行

空行：就是用于分割Post请求的请求头，和请求体的
请求头

封装post请求消息的请求参数的

示例

字符串格式：

    POST /login.html	HTTP/1.1
    Host: localhost
    User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
    Accept-Language: zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2
    Accept-Encoding: gzip, deflate
    Referer: http://localhost/login.html
    Connection: keep-alive
    Upgrade-Insecure-Requests: 1
    username=zhangsan

web三大域

Request一次请求的范围

Request和Reaponse
- request对象和response对象的原理
  1. request和response对象是由服务器建立的。咱们来使用它们
    1. request对象是来获取请求消息，response对象是来设置响应消息
- request对象继承体系结构
  
  ServletRequest -- 接口 | 继承 HttpServletRequest -- 接口 | 实现 org.apache.catalina.connector.RequestFacade 类(tomcat) 注意：虽然 Tomcat 传递的是 RequestFacade 对象，可是咱们会把它当成 HttpServletRequest。由于这个对象的实如今 Tomcat 内部，咱们没办法查看。
- request功能
  - 获取请求信息数据
    - 获取请求行数据
      
      GET /day14/demo1?name=zhangsan HTTP/1.1 方法：
      1. 获取请求方式：GET String getMethod()
        
        获取虚拟目录：/day14 String getContextPath()
        
        获取Servlet路径: /demo1 String getServletPath()
        
        获取get方式请求参数：name=zhangsan String getQueryString()
        
        获取请求URI：/day14/demo1 String getRequestURI(): /day14/demo1 StringBuffer getRequestURL() :http://localhost/day14/demo1 URL:统一资源定位符： http://localhost/day14/demo1 中华人民共和国 URI：统一资源标识符 : /day14/demo1 共和国
    - 获取请求头数据
      
      方法： (*)String getHeader(String name):经过请求头的名称获取请求头的值 Enumeration<String> getHeaderNames():获取全部的请求头名称
    - 获取请求体数据
      
      请求体：只有POST请求方式，才有请求体，在请求体中封装了POST请求的请求参数步骤： 1. 获取流对象 BufferedReader getReader()：获取字符输入流，只能操做字符数据 ServletInputStream getInputStream()：获取字节输入流，能够操做全部类型数据在文件上传知识点后讲解
```
			2. 再从流对象中拿数据
```
    - 获取请求参数
      
      getParameterMap() getParameter("来自表单输入项的name属性值") getParameterValues("来自表单输入项的name属性值_chaeckbox")
  - 其余功能
    - 获取请求参数通用方式
      1. String getParameter(String name):根据参数名称获取参数值 username=zs&password=123
        
        String[] getParameterValues(String name):根据参数名称获取参数值的数组 hobby=xx&hobby=game
        
        Enumeration<String> getParameterNames():获取全部请求的参数名称
        
        Map<String,String[]> getParameterMap():获取全部参数的map集合
    - 请求转发
      1. 步骤：
        
        经过request对象获取请求转发器对象：RequestDispatcher getRequestDispatcher(String path)
        
        使用RequestDispatcher对象来进行转发：forward(ServletRequest request, ServletResponse response)
        
        特色：
        
        浏览器地址栏路径不发生变化
        
        只能转发到当前服务器内部资源中。
        
        转发是一次请求一次响应
    - 共享数据
      
      域对象：一个有做用范围的对象，能够在范围内共享数据 request域：表明一次请求的范围，通常用于请求转发的多个资源中共享数据方法： 1. void setAttribute(String name,Object obj):存储数据 2. Object getAttitude(String name):经过键获取值 3. void removeAttribute(String name):经过键移除键值对
    - 中文乱码问题
      
      get方式：tomcat 8 已经将get方式乱码问题解决了 post方式：会乱码解决：在获取参数前，设置request的编码request.setCharacterEncoding("utf-8");
      
      Tomcat8以前 get方法：params=new String(req.getParameter("xxx).getBytes("),"utf-8")
    - 动态获取虚拟目录
      
      getContextPath();
- response
  - 设置响应行状态码
    
    setStatus(int code)
    - 状态码
      - 200成功
      - 302重定向
      - 304查找本地缓存
      - 403权限拒绝，拒绝访问
      - 404请求的资源没找到（action，href，转发）
      - 405请求方式不支持（后台没有提供相应的doXxx（）方法）
      - 500服务器内部错误，后台Java代码有异常
  - 响应头
    
    setHeader(String key,String value) setHeader(“location”,“重定向跳转地址”) Content-Type 响应体的数据类型&编码 Content-Disposition响应体的打开方式 in-line（默认） //浏览器本身打开 attachment；filename=xxx //以附件形式打开。保存到 setStatus(int status)
  - 响应体
    
    PrintWriter getWriter()字符输出流 ServletOutputStream getOutpuStream() 字节输出流使用输出流将数据输出到客服端浏览器
  - 重定向
    
    //1. 设置状态码为302 response.setStatus(302); //2.设置响应头location response.setHeader("location","/day15/responseDemo2");
    
    //一行代码搞定 sendRediect("/虚拟目录/资源路径")
  - 解决中文乱码
    
    response.setCharacterEncoding("utf-8"); response.setHeader("content-type","text/html;charset=utf-8");
    
    或者一行代码搞定： response.setContentType("test/html;charset=utf-8);
重定向（redirect）和转发（forward）
- 特色
  
  redirect：一、地址栏发生变化二、重定向能够访问其余站点（服务器）的资源三、重定向是两次请求。不能使用request对象来共享数据 forward：一、转发地址栏路径不变二、转发只能访问当前服务器的资源三、转发是一次请求，可使用request对象来共享数据
- 区别
  
  一、路径分类一、相对路径：经过相对路径不能够肯定惟一资源如：./index.html 不以/开头，以.开头路径规则：找到当前资源和目标资源之间的相对位置关系（./：当前目录；../：后退一级目录）二、绝对路径：经过绝对路径能够肯定惟一资源如：http://localhost/response/responseDemo2 /response/responseDemo2 以/开头的路径规则：判判定义的路径是给谁用的？判断请求未来从哪儿发出给客户端浏览器使用：须要加虚拟目录(项目的访问路径) 建议虚拟目录动态获取：request.getContextPath() <a> , <form> 重定向... 给服务器使用：不须要加虚拟目录转发路径

Session一次会话的范围

会话技术

一次会话中包含屡次请求和响应。一次会话：浏览器第一次给服务器资源发送请求，会话创建，直到有一方断开为止功能：在一次会话的范围内的屡次请求间，共享数据
- 客服端会话技术Cookie
  
  客户端会话技术，将数据保存到客户端
  - 建立Cookie对象
    
    new Cookie(String name,String value);
  - 发送Cookie给浏览器
    
    response.addCookie(Cookie c)
  - 获取Cookie
    
    Cookie[] request.getCookies() 遍历Cookie[] cookie.getName(); cookie.getValue();
  - Cookie存活时间
    
    默认：关闭浏览器就销毁持久化存储：setMaxAge(int seconds)设置存活时间一、正数：将Cookie数据写入到硬盘文件中，数据就是存活时间（单位为秒）二、负数：默认值三、零：删除cookie信息
  - Cookie存储中文
    
    在tomcat 8 以前 cookie中不能直接存储中文数据。须要将中文数据转码---通常采用URL编码(%E3) 在tomcat 8 以后，cookie支持中文数据。特殊字符仍是不支持，建议使用URLEnoder.encode(String str,)编码存储，URLDecoder解码解析
  - Cookie共享
    
    一、默认不能够二、一个Tomcat，多个项目共享 setPath(String path):设置cookie的获取范围。默认状况下，设置当前的虚拟目录若是要共享，则能够将path设置为"/" 三、不一样Tomcat，不一样项目 setDomain(String path);若是设置一级域名相同，那么多个服务器之间cookie能够共享 setDomain(".baidu.com"),那么tieba.baidu.com和news.baidu.com中cookie能够共享
  - 细节
    
    大小4kb，
- 服务器端会话技术Session
  - Session
    
    服务器端会话技术，在一次会话的屡次请求间共享数据，将数据保存在服务器端的对象中。HttpSession；Session的实现是依赖于Cookie的。
    - 获取HttpSession对象
      
      HttpSession session = request.getSession(); request中有cookie，cookie有JSESSIONID
    - 使用HttpSession对象
      
      Object getAttribute(String name) 获取session中名为name键对应的值 void setAttribute(String name, Object value) 向session存储一个名为name值为value的键值对 void removeAttribute(String name) 移除session中名为name键对应的值 getid()获取session的id invalidate()手动销毁session getServletContext() 用来获取ServletContext对象
- Cookie和Session区别
  1. session存储数据在服务器端，Cookie在客户端
  2. session没有数据大小限制，Cookie有
  3. session数据安全，Cookie相对于不安全

ServletContext整个web应用的范围

获取ServletContext

表明整个web应用，能够和程序的容器（服务器）来通讯

经过request对象获取： ServletContext context = request.getServletContext(); 经过HttpServlet获取： this.getServletContext();
- 获取MIME类型；（text/html）
  - String getMimeType(String file)
- 域对象：共享数据（范围最大）
  
  范围：整个web应用，全部用户的全部请求都有效
  - request.getAttribute(String name) 从域对象中获取键为name对应的值
  - request.setAttribute(String name,Objext value)向request域对象中存储键为name，值为value的键值对数据
  - removeAttribut(String key)
- 获取文件的真实（服务器）路径(项目部署路径)
  - getRealPath(String path)
    
    String b = context.getRealPath("/b.txt");//web目录下资源访问 System.out.println(b); String c = context.getRealPath("/WEB-INF/c.txt");//WEB-INF目录下的资源访问 System.out.println(c); String a = context.getRealPath("/WEB-INF/classes/a.txt");//src目录下的资源访问 System.out.println(a);

web三大组件

Servlet

运行在服务器端的小程序 Servlet就是一个接口，定义了Java类被浏览器访问到（tomcat识别）的规则未来咱们自定义一个类，实现Servlet接口，重写方法

使用步骤

建立JavaEE项目

定义一个类，实现Servlet接口 public class ServletDemo1 implements Servlet
实现接口中的抽象方法

配置Servlet 在web.xml中配置：

<!--配置Servlet -->
<servlet>
    <servlet-name>demo1</servlet-name>
<servlet-class>cn.itcast.web.servlet.ServletDemo1</servlet-class>
</servlet>

<servlet-mapping>
    <servlet-name>demo1</servlet-name>
    <url-pattern>/demo1</url-pattern>
</servlet-mapping>

执行原理
1. 当服务器接受到客户端浏览器的请求后，会解析请求URL路径，获取访问的Servlet的资源路径
  1. 查找web.xml文件，是否有对应的<url-pattern>标签体内容。
  2. 若是有，则在找到对应的<servlet-class>全类名
  3. tomcat会将字节码文件加载进内存，而且建立其对象
  4. 调用其方法
Servlet中的生命周期
- init建立
  1. 被建立：执行init方法，只执行一次 Servlet何时被建立？默认状况下，第一次被访问时，Servlet被建立能够配置执行Servlet的建立时机。在<servlet>标签下配置 1. 第一次被访问时，建立 <load-on-startup>的值为负数 2. 在服务器启动时，建立 <load-on-startup>的值为0或正整数 Servlet的init方法，只执行一次，说明一个Servlet在内存中只存在一个对象，Servlet是单例的多个用户同时访问时，可能存在线程安全问题。解决：尽可能不要在Servlet中定义成员变量。即便定义了成员变量，也不要对修改值
- service提供服务
  1. 提供服务：执行service方法，执行屡次每次访问Servlet时，Service方法都会被调用一次。
- destroy销毁
  1. 被销毁：执行destroy方法，只执行一次 Servlet被销毁时执行。服务器关闭时，Servlet被销毁只有服务器正常关闭时，才会执行destroy方法。 destroy方法在Servlet被销毁以前执行，通常用于释放资源

注解建立JavaEE项目

Servlet3.0：好处：支持注解配置。能够不须要web.xml了。步骤：

	1. 建立JavaEE项目，选择Servlet的版本3.0以上，能够不建立web.xml

定义一个类，实现Servlet接口
复写方法

在类上使用@WebServlet注解，进行配置

@WebServlet("资源路径")
@Target({ElementType.TYPE})
@Retention(RetentionPolicy.RUNTIME)
@Documented
public @interface WebServlet {
    String name() default "";//至关于<Servlet-name>
    String[] value() default {};//表明urlPatterns()属性配置
    String[] urlPatterns() default {};//至关于<url-pattern>
    int loadOnStartup() default -1;//至关于<load-on-startup>
    WebInitParam[] initParams() default {};
    boolean asyncSupported() default false;
    String smallIcon() default "";
    String largeIcon() default "";
    String description() default "";
    String displayName() default "";
}

IDEA与tomcat的相关配置
1. IDEA会为每个tomcat部署的项目单独创建一份配置文件
  - 查看控制台的log：Using CATALINA_BASE: "C:\Users\fqy.IntelliJIdea2018.1\system\tomcat_itcast"
2. 工做空间项目和 tomcat部署的web项目
  - tomcat真正访问的是“tomcat部署的web项目”，"tomcat部署的web项目"对应着"工做空间项目" 的web目录下的全部资源
  - WEB-INF目录下的资源不能被浏览器直接访问。
3. 断点调试：使用"小虫子"启动 dubug 启动
Servlet的体系结构

Servlet（接口）-->GenericServlet（抽象类）-->HttpServlet（抽象类） GenericServlet：将Servlet接口中其余方法作了默认空实现，只将service方法做为抽象，未来在定义Servlet类时，能够继承GenericServlet，实现service()方法便可 HttpServlet：对HTTP协议的一种封装，简化操做一、定义类继承HttpServlet；二、复写doGet/doPost方法
Servlet相关配置

一、urlPartten：Servlet访问路径 1. 一个Servlet能够定义多个访问路径： @WebServlet({"/d4","/dd4","/ddd4"}) 2. 路径定义规则： 1. /xxx：路径匹配 2. /xxx/xxx:多层路径，目录结构 3. *.do：扩展名匹配
登陆案例
- 需求

实现步骤

准备

一、HTML页面

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>登陆</title>
  </head>
  <body>
  <form action="/day14_test/loginServlet" method="post">
      用户名：<input type="text" name="username"><br/>
      密码：<input type="password" name="password"><br/>
      <input type="submit" value="提交">
  </form>
  </body>
  </html>

二、day14数据库和user表单

1 create database day14;
2 use day14;
3 create    table user(
4     id int  primary key  auto_increment ,
5     username varchar(32) unioue not null,
6     password varvhar(32) not null
7 );

三、druid.properties配置文件

driverClassName=com.mysql.jdbc.Driver
url=jdbc:mysql:///day14
username=root
    password=root
    initialSize=5
    maxActive=10
    maxWait=3000

四、导包

- User类

package itcast.domain;
  
  public class User {
     private int id;
     private String username;
     private String password;
  
  public int getId() {
      return id;
  }
  
  public void setId(int id) {
      this.id = id;
  }
  
  public String getUsername() {
      return username;
  }
  
  public void setUsername(String username) {
      this.username = username;
  }
  
  public String getPassword() {
      return password;
  }
  
  public void setPassword(String password) {
  this.password = password;
}

@Override public String toString() { return "User{" + "id=" + id + ", username='" + username + ''' + ", password='" + password + ''' + '}'; } } ```

//- 操做数据库UserDao类
 

  package itcast.dao;
  
  /**
    * 操做数据库中User表中的类
    */
  
  import itcast.domain.User;
  import itcast.util.JDBCUtils;
  import org.springframework.dao.DataAccessException;
  import org.springframework.jdbc.core.BeanPropertyRowMapper;
  import org.springframework.jdbc.core.JdbcTemplate;
  
  public class UserDao {
  //声明JDBCTemplate对象共用
  private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
  
  /**
   * 登陆方法
*@param loginUser 只有用户名和密码

*@return user包含用户的所有数据 */
 public User login(User loginUser) { 
try { 
String sql = "select * from user where username = ? and password = ?"; 
User user = template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), loginUser.getUsername(), loginUser.getPassword()); return user; 
} catch (DataAccessException e) {
 // e.printStackTrace();
//记录日志 return null; 
}
} 
}

- 链接池JDBCUtils类

 1   ```java
 2   package itcast.util;
 3   
 4   import com.alibaba.druid.pool.DruidDataSourceFactory;
 5   
 6   import javax.sql.DataSource;
 7   import java.io.IOException;
 8   import java.io.InputStream;
 9   import java.util.Properties;
10   
11   /*JDBC工具类，使用Durid链接池*/
12   public class JDBCUtils {
13       private static DataSource ds;
14   static {
15       try {
16           //加载配置文件
17   Properties pro = new Properties();
18   InputStream is = JDBCUtils.class.getClassLoader().getResourceAsStream("druid.properties");
19   pro.load(is);
20   
21           //初始化链接池对象
22            ds = DruidDataSourceFactory.createDataSource(pro);
23       } catch (IOException e) {
24           e.printStackTrace();
25       } catch (Exception e) {
26           e.printStackTrace();
27       }
28   }
29   
30   /*获取链接池对象*/
31   public static DataSource getDataSource(){
32       return ds;
33       }
34   }

登陆Servlet

 1 package itcast.web.servlet;
 2 
 3 import itcast.dao.UserDao;
 4 import itcast.domain.User;
 5 import org.springframework.beans.BeanUtils;
 6 
 7 import javax.servlet.ServletException;
 8 import javax.servlet.annotation.WebServlet;
 9 import javax.servlet.http.HttpServlet;
10 import javax.servlet.http.HttpServletRequest;
11 import javax.servlet.http.HttpServletResponse;
12 import java.io.IOException;
13 import java.util.Map;
14 
15 @WebServlet("/loginServlet")
16 public class LoginServlet extends HttpServlet {
17 
18 @Override
19 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
20     //设置编码
21     req.setCharacterEncoding("utf-8");
22     //获取请求参数
23 String username = req.getParameter("username");
24 String password = req.getParameter("password");
25 
26 //将参数进行封装
27 User loginUser = new User();
28 loginUser.setUsername(username);
29 loginUser.setPassword(password);
30 
31 /*Map<String, String[]> map = req.getParameterMap();
32 User loginUser = new User();
33 BeanUtils.populate(loginUser,map);*/
34 
35 //调用UserDao的login方法
36 UserDao dao = new UserDao();
37 User user = dao.login(loginUser);
38 //判断user if (user == null) { //登陆失败 req.getRequestDispatcher("/failServlet").forward(req, resp); } else { //登陆成功 //存储数据 req.setAttribute("user", user); //转发 req.getRequestDispatcher("/successServlet").forward(req, resp); } } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doGet(req, resp); } } ```
39 
40 - 登陆失败Servlet
41 
42   ```java
43 package itcast.web.servlet;
44 
45 import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException;
46 
47   @WebServlet("/failServlet")
48   public class FailServlet extends HttpServlet {
49       protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
50       //设置编码
51       response.setContentType("text/html;charset=utf-8");
52       //输出
53       response.getWriter().write("登陆失败，用户名或密码错误！");
54   }
55   
56   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
57       this.doPost(request, response);
58       }
59   }

- 登陆成功Servlet

 1   package web.servlet;
 2   
 3   import itcast.domain.User;
 4   
 5   import javax.servlet.ServletException;
 6   import javax.servlet.annotation.WebServlet;
 7   import javax.servlet.http.HttpServlet;
 8   import javax.servlet.http.HttpServletRequest;
 9   import javax.servlet.http.HttpServletResponse;
10   import java.io.IOException;
11   
12   @WebServlet("/successServlet")
13   public class SuccessServlet extends HttpServlet {
14       protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
15           //获取request域中共享的user对象
16           User user = (User) request.getAttribute("user");
17           if(user != null) {
18           //设置编码
19           response.setContentType("text/html;charset=utf-8");
20           //输出
21           response.getWriter().write("登陆成功！" + user.getUsername() + "，欢迎您");
22       }
23   }
24   
25   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
26       this.doPost(request, response);
27       }
28   }

Filter过滤器

使用步骤

一、定义一个类，实现接口Filter 二、复写方法三、配置拦截路径（web.xml或注解）

web.xml配置拦截路径

<filter>
    <filter-name>demo1</filter-name>
    <filter-class>cn.itcast.web.filter.FilterDemo1</filter-class>
</filter>
<filter-mapping>
    <filter-name>demo1</filter-name>
    <!-- 拦截路径 -->
    <url-pattern>/*</url-pattern>
</filter-mapping>

代码示例

 1 @WebFilter("/*")//访问全部资源以前，都会执行该过滤器
 2 public class FilterDemo1 implements Filter {
 3     @Override
 4      public void init(FilterConfig filterConfig) throws ServletException {
 5 }
 6     @Override
 7      public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
 8         System.out.println("filterDemo1被执行了....");                
 9         //放行
10         filterChain.doFilter(servletRequest,servletResponse);
11  }
12  @Override
13  public void destroy() {
14     }
15 }

执行流程

一、执行过滤器二、执行放行后的资源三、回来执行过滤器放行代码下的代码

生命周期
- init
- doFilter
- destroy
拦截路径配置

一、具体资源路径：/index.jsp 只有访问index.jsp资源时，过滤器才会被执行二、拦截目录：/user/* 访问/user下的全部资源时，过滤器都会被执行三、后缀名拦截：.jsp 访问全部后缀名为jsp资源时，过滤器都会被执行四、拦截全部资源：/ 访问全部资源时，过滤器都会被执行注意： 1. 既然 Filter 是用来作一些通用的处理的，因此通常咱们配置的都是 /* 2. 在 Filter 中 url-pattern 的配置不存在优先级的问题
拦截方式配置

过滤器默认是拦截请求用的，可是咱们的资源跳转方式还可能有转发或者错误页面的跳转，默认请求 Filter 也只能拦截请求，因此若是但愿 Filter 拦截其它的资源跳转的方式，须要进行配置。资源被访问的方式注解配置：设置dispatcherTypes属性一、REQUEST：默认值。浏览器直接请求资源二、FORWARD：转发访问资源三、INCLUDE：包含访问资源４、ERROR：错误跳转资源５、ASYNC：异步访问资源 web.xml配置：设置<dispatcher></dispatcher>标签便可注意：若是想拦截请求和转发，那么 REQUEST 和 FORWARD 都须要配置，若是只配置 FORWARD 则只能拦截转发，请求就拦截不了了。
过滤器链
- 执行顺序
  
  一、注解配置：按照类名的字符串比较规则比较，值小的先执行二、web.xml配置：<filter-mapping>谁定义在上边，谁先执行注意： 1. web.xml 配置的优先级要高于注解。 2. 过滤器链中只有有任何一个过滤器没有放行，那么请求都不能到达目标资源，所谓的放行，是放行到过滤器链中的下一个过滤器。只有过滤器链中的全部过滤器都放行了，请求才能到达目标资源。 3. 请求的过程会按照顺序通过过滤器链中的每个过滤器，回来的过程也会通过全部过滤器，只不过顺序相反。 4. 关于过滤器链的相关内容了解原理便可，在使用过滤器的时候不用过多考虑过滤器链的问题。

Listener监听器

web开发中的监听器主要用来监听Servlet规范中的三个域对象的变化 ServletRequest HttpSession ServletContext

监听器一共3类8种：第一种实现SercletContextListener接口

主要用来监听ServletContext的建立和销毁，其实就是服务器的启动和关闭
- 一、定义一个类，实现ServletContextListenter接口
- 方法
  
  void contextDestroyed(ServletConextEvent sce) ：ServletvContext对象被销毁以前会调用该方法 void contextInitialized(ServletContextEvent sce)：ServletContext对象建立后会调用该方法

web.xml配置

在web.xml中配置listener和listener-class标签：

<!-- 配置全局初始化参数 -->
<context-param>
    <param-name>location</param-name>
    <param-value>/WEB-INF/classes/applicationContext.xml</param-value>
</context-param>

<!--配置监听器--> 
<listener>
    <listener-class>cn.itcast.web.listener.MyListener</listener-class> 
</listener>

注解配置

只须要在对应的监听器类上添加@WebListener注解便可： @WebListener public class MyListener2 implements ServletContextListener { ... }

AJAX（ASynchronous JavaScript And XML 异步的JavaScript 和 XML）

Ajax 是一种在无需从新加载整个网页的状况下，可以更新部分网页的技术。 [1] 经过在后台与服务器进行少许数据交换，Ajax 可使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）若是须要更新内容，必须重载整个网页页面。

异步和同步

一、若是是同步请求，页面向服务器发起一个请求后，在服务器没有完成响应以前，页面只能等待，不能再进行其它操做。

二、若是是异步，页面想服务器发起一个请求后，在服务器没有完成响应以前，页面无需等待，还能够进行其它操做，对于用户来讲，体验没有中断

三、能够用 Java 多线程的思路去理解，异步就是一个新的线程在后台偷偷作其它事情。（只是这么理解，本质不是多线程）

四、异步请求还有一个很是大的特色就是局部刷新，不用从新渲染整个页面。注意： 1. 传统的 HTTP 同步请求，服务器【最终】响应的数据会被浏览器直接渲染

经过 Ajax 发起的异步 HTTP 请求，服务器【最终】响应的数据不会被浏览器直接渲染，须要本身经过 JavaScript 处理！！！！！

什么叫终？

一、好比访问一个 Servlet，在 Servlet 中经过 response 对象的输出流直接写数据响应，并无道别的操做，这是常见的方式, response 写的数据就是终响应的数据。

二、再好比：访问一个 Servlet，可是这个 Servlet 本身没有响应，而是转发到了其它页面好比 jsp，那么终响应的是 jsp 中的内容。

JavaScript实现AJAX

核心对象：XMLHTTPRequest

实现异步请求的核心就是 JavaScript 提供的 XMLHttpRequest 对象，其实早期 JavaScript 语言并不受重视，不少后台程序员将 JavaScript 代码戏称为 toy code (玩具代码)，直到 Google 公司率先发现 XMLHttpRequest 对象并经过它实现了搜索框的联想词功能。因此说 JavaScript 语言如今这么流行和受重视，XMLHttpRequest 对象功不可没！虽然咱们经过其它框架实现 Ajax 不会直接操做 XMLHttpRequest 对象，可是内部的原理都离不开它，因此这个对象须要认识！
实现步骤

一、建立异步对象二、设置请求状态改变的监听函数三、设置请求方式，请求路径，是否异步四、发送请求五、处理响应

代码示例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script>
 7     //定义方法
 8     function  fun() {
 9         //发送异步请求
10         //1.建立核心对象
11         var xmlhttp;
12         if (window.XMLHttpRequest)
13         {// code for IE7+, Firefox, Chrome, Opera, Safari
14             xmlhttp=new XMLHttpRequest();
15         }
16         else
17         {// code for IE6, IE5
18             xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
19         }
20 
21         //2. 创建链接
22         /*
23             参数：
24                 1. 请求方式：GET、POST
25                     * get方式，请求参数在URL后边拼接。send方法为空参
26                     * post方式，请求参数在send方法中定义
27                 2. 请求的URL：
28                 3. 同步或异步请求：true（异步）或 false（同步）
29          */
30         xmlhttp.open("GET","ajaxServlet?username=tom",true);
31 
32         //3.发送请求
33         xmlhttp.send();
34 
35         //4.接受并处理来自服务器的响应结果
36         //获取方式 ：xmlhttp.responseText
37         //何时获取？当服务器响应成功后再获取
38 
39         //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
40         xmlhttp.onreadystatechange=function(){
41             //判断readyState就绪状态是否为4，判断status响应状态码是否为200
42             if (xmlhttp.readyState==4 && xmlhttp.status==200){
43                //获取服务器的响应结果
44                 var responseText = xmlhttp.responseText;
45                 alert(responseText);
46             }
47         }
48     }
49     
50     </script>
51     </head>
52     <body>
53         <input type="button" value="发送异步请求" onclick="fun();"><input>
54     </body>
55 </html>

JQuery实现

$.ajax();

代码示例

 1      <!DOCTYPE html>
 2   <html lang="en">
 3   <head>
 4       <meta charset="UTF-8">
 5       <title>Title</title>
 6       <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
 7       <script>
 8       //定义方法
 9       function fun() {
10           //使用$.ajax()发送异步请求
11   
12           $.ajax({
13               url: "ajaxServlet", // 请求路径
14               type: "POST", //请求方式
15               //data: "username=jack&age=23",//请求参数
16               data: {"username": "jack", "age": 23},
17               success: function (data) {
18                   alert(data);
19               },//响应成功后的回调函数
20               error: function () {
21                   alert("出错啦...")
22               },//表示若是请求响应出现错误，会执行的回调函数
23   
24               dataType: "text"//设置接受到的响应数据的格式
25           });
26       }
27   
28       </script>
29       </head>
30       <body>
31           <input type="button" value="发送异步请求" id="btn"><input>
32       </body>
33   </html>

AjaxServlet代码以下：

 1   package .web.servlet;
 2   
 3   import javax.servlet.ServletException;
 4   import javax.servlet.annotation.WebServlet;
 5   import javax.servlet.http.HttpServlet;
 6   import javax.servlet.http.HttpServletRequest;
 7   import javax.servlet.http.HttpServletResponse;
 8   import java.io.IOException;
 9   
10   @WebServlet("/ajaxServlet")
11   public class AjaxServlet extends HttpServlet {
12       protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
13           //1.获取请求参数
14           String username = request.getParameter("username");
15           //处理业务逻辑。耗时
16           try {
17               Thread.sleep(5000);
18           } catch (InterruptedException e) {
19               e.printStackTrace();
20           }
21           //2.打印username
22           System.out.println(username);
23   
24           //3.响应
25           response.getWriter().write("hello : " + username);
26   }
27   
28   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
29       this.doPost(request, response);
30       }
31   }

$.get(url,data,callback,dataType)

代码示例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="js/jquery-3.3.1.min.js"></script>
 7     <script>
 8         //定义方法
 9         function fun() {
10             $.get("ajaxServlet", {username: "rose"}, function (data) {
11                 alert(data);
12             }, "text");
13         }
14     </script>
15 </head>
16 <body>
17 <input type="button" value="发送异步请求" onclick="fun();"><input>
18 </body>
19 </html>

$.post(url,data,callback,dataType)

代码示例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="js/jquery-3.3.1.min.js"></script>
 7     <script>
 8         //定义方法
 9         function fun() {
10             $.post("ajaxServlet", {username: "rose"}, function (data) {
11                 alert(data);
12             }, "text");
13         }
14     </script>
15 </head>
16 <body>
17 <input type="button" value="发送异步请求" onclick="fun();"> <input>
18 </body>
19 </html>

jq表单对象.serialize()

有的时候咱们须要在用户点击 form 表单时，阻止表单直接提交，而是将用户在表单中填写的数据封装成 ajax 的请求参数，向后台发起异步请求，若是本身来封装表单中的数据很是麻烦，因此 jQuery 提供了一个serialize 方法来帮咱们完成表单参数的封装。

代码示例

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <script src="js/jquery-3.3.1.min.js"></script>
 5     <script>      
 6         $(function () {
 7             $("#form1").submit(function () {
 8                 // 本身发送异步请求
 9                 $.post("/day22/ajaxServlet1",$("#form1").serialize(),function (data) {
10                     alert(data);
11                 }); 
12                 return false;// 阻止表单发起同步提交
13             });
14         })
15     </script>
16 </head>
17 <body>
18     <form id="form1">
19         username:<input type="text" name="username"/><br>
20         password:<input type="text" name="password"/><br>
21         age:<input type="text" name="age"/><br>
22         info:<input type="text"><br>
23         <input type="submit" value="提交">
24     </form>
25 </body>

JSON（JavaScript Object Notation JavaScript对象表示法）

JavaScript Object Notation （JavaScript 对象表示法）,是 JavaScript 中定义对象的一种语法，如今被更普遍的用于网络传输的数据格式。

xml和json

一、和 xml 相比，json 的数据体积更小。因此早期在移动互联网兴起以前，以 xml 做为数据传输的格式比较多，可是移动互联网兴起后，用户的流量都是比较宝贵的，因此开始愈来愈多的采用 json 这种数据格式。由于它体积小更节约用户的流量。二、并且 json 还有一个自然的优点，就是它原本就是 JavaScript中描述对象的一种方式，因此能直接被 JavaScript所识别，便于数据的解析（根据 key 获取 value）

语法规则

一、数据在名称/值对中：json数据是由键值对构成的键用引号(单双都行)引发来，也能够不使用引号

值得取值类型： 1. 数字（整数或浮点数) 2. 字符串（在双引号中) 3. 逻辑值（true 或 false） 4. 数组（在方括号中） 5. {"persons":[{},{}]}对象（在花括号中） {"address":{"province"："陕西"....}} 6. null

二、数据由逗号分隔：多个键值对由逗号分隔

三、花括号保存对象：使用{}定义json 格式

四、方括号保存数组：[]

值的获取

 1  <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
 7     <script>
 8         //1.定义基本格式
 9         var person = {"name": "张三", age: 23, 'gender': true};
10         //获取name的值
11         //var name = person.name;
12         var name = person["name"];
13         // alert(name);
14 
15         //alert(person);
16         //2.嵌套格式   {}———> []
17         var persons = {
18         "persons": [
19             {"name": "张三", "age": 23, "gender": true},
20             {"name": "李四", "age": 24, "gender": true},
21             {"name": "王五", "age": 25, "gender": false}
22             ]
23         };
24        // alert(persons);
25         //获取王五值
26         var name1 = persons.persons[2].name;
27         // alert(name1);
28        /*
29         $.each(persons.persons,function (i,o) {
30             alert(o.name+":"+o.age+ ":" +o.gender)
31         });*/
32 
33         //2.嵌套格式   []———> {}
34         var ps = [{"name": "张三", "age": 23, "gender": true},
35             {"name": "李四", "age": 24, "gender": true},
36             {"name": "王五", "age": 25, "gender": false}];
37         //获取李四值
38         // alert(ps);
39         //alert(ps[1].name);
40         /*
41         $(ps).each(function () {
42             alert(this.name)
43         })*/
44         $.each(ps,function (i,o) {
45             alert(o.name)
46         })
47 
48     </script>
49     </head>
50     <body>
51 
52     </body>
53 </html>

JSON数据和Java对象的相互转换

JSON解析器

常见的解析器：Jsonlib,Gson,fastjson,jackson
JSON转为Java对象
1. 导入jackson的相关jar包
2. 建立Jackson核心对象 ObjectMapper
3. 调用ObjectMapper的相关方法进行转换
  1. readValue(json字符串数据,Class)
Java对象转换JSON
1. 导入jackson的相关jar包
2. 建立Jackson核心对象 ObjectMapper
3. 调用ObjectMapper的相关方法进行转换
  1. 转换方法：
    - writeValue(参数1，obj): 参数1： File：将obj对象转换为JSON字符串，并保存到指定的文件中 Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中 OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
  - writeValueAsString(obj):将对象转为json字符串
  1. 注解：
  2. @JsonIgnore：排除属性。
  3. @JsonFormat：属性值得格式化
  - @JsonFormat(pattern = "yyyy-MM-dd")
  1. 复杂java对象转换
  2. List：数组
  3. Map：对象格式一致

代码示例

  1 package itcast.test;
  2 
  3 import itcast.domain.Person;
  4 import com.fasterxml.jackson.databind.ObjectMapper;
  5 import org.junit.Test;
  6 
  7 import java.io.FileWriter;
  8 import java.util.*;
  9 
 10 public class JacksonTest {
 11 //Java对象转为JSON字符串
 12 @Test
 13 public void test1() throws Exception {
 14     //1.建立Person对象
 15     Person p  = new Person();
 16     p.setName("张三");
 17     p.setAge(23);
 18     p.setGender("男");
 19 
 20     //2.建立Jackson的核心对象  ObjectMapper
 21     ObjectMapper mapper = new ObjectMapper();
 22     //3.转换
 23     /*
 24         转换方法：
 25             writeValue(参数1，obj):
 26                 参数1：
 27                     File：将obj对象转换为JSON字符串，并保存到指定的文件中
 28                     Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
 29                     OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
 30             writeValueAsString(obj):将对象转为json字符串
 31 
 32      */
 33     String json = mapper.writeValueAsString(p);
 34     //{"name":"张三","age":23,"gender":"男"}
 35     //System.out.println(json);//{"name":"张三","age":23,"gender":"男"}
 36         //writeValue，将数据写到d://a.txt文件中
 37     //mapper.writeValue(new File("d://a.txt"),p);
 38 
 39     //writeValue.将数据关联到Writer中
 40     mapper.writeValue(new FileWriter("d://b.txt"),p);
 41 }
 42 
 43 @Test
 44 public void test2() throws Exception {
 45     //1.建立Person对象
 46     Person p = new Person();
 47     p.setName("张三");
 48     p.setAge(23);
 49     p.setGender("男");
 50     p.setBirthday(new Date());
 51 
 52     //2.转换
 53     ObjectMapper mapper = new ObjectMapper();
 54     String json = mapper.writeValueAsString(p);
 55 
 56     System.out.println(json);
 57     //{"name":"张三","age":23,"gender":"男","birthday":1530958029263}
 58     //{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"}
 59 }
 60 @Test
 61 public void test3() throws Exception {
 62     //1.建立Person对象
 63     Person p = new Person();
 64     p.setName("张三");
 65     p.setAge(23);
 66     p.setGender("男");
 67     p.setBirthday(new Date());
 68 
 69     Person p1 = new Person();
 70     p1.setName("张三");
 71     p1.setAge(23);
 72     p1.setGender("男");
 73     p1.setBirthday(new Date());
 74 
 75     Person p2 = new Person();
 76     p2.setName("张三");
 77     p2.setAge(23);
 78     p2.setGender("男");
 79     p2.setBirthday(new Date());
 80         //建立List集合
 81     List<Person> ps = new ArrayList<Person>();
 82     ps.add(p);
 83     ps.add(p1);
 84     ps.add(p2);
 85         //2.转换
 86     ObjectMapper mapper = new ObjectMapper();
 87     String json = mapper.writeValueAsString(ps);
 88     // [{},{},{}]
 89     //[{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"},{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"},{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"}]
 90     System.out.println(json);
 91 }
 92 
 93 @Test
 94 public void test4() throws Exception {
 95     //1.建立map对象
 96     Map<String,Object> map = new HashMap<String,Object>();
 97     map.put("name","张三");
 98     map.put("age",23);
 99     map.put("gender","男");
100     //2.转换
101     ObjectMapper mapper = new ObjectMapper();
102     String json = mapper.writeValueAsString(map);
103     //{"name":"张三","age":23,"gender":"男"}
104     System.out.println(json);//{"gender":"男","name":"张三","age":23}
105 }
106 
107 //演示 JSON字符串转为Java对象
108 @Test
109 public void test5() throws Exception {
110    //1.初始化JSON字符串
111     String json = "{\"gender\":\"男\",\"name\":\"张三\",\"age\":23}";
112 
113     //2.建立ObjectMapper对象
114     ObjectMapper mapper = new ObjectMapper();
115     //3.转换为Java对象 Person对象
116     Person person = mapper.readValue(json, Person.class);
117 
118     System.out.println(person);
119     }
120 }

JavaScript任何识别JSON

虽然 JSON 是 JavaScript 中描述对象的一种方式，可是服务端生成的是一个 JSON 格式的字符串。服务器给 Ajax 异步请求响应之后，这个字符串终会出如今回调函数 function(data){} 的参数中，这个 data 就是服务器响应的 JSON数据。怎么才能让 JavaScript不把这个 data 当成普通字符串而是当成对象呢？一般有两种处理方式：

在客户端发起异步请求时，指定 dataType 参数值为 "json"

$.get(url,data,callback,"json"); $.post(url,data,callback,"json");
在服务器向异步请求做出响应式经过 Content-Type 响应头设置响应数据的类型为 JSON

response.setContentType("application/json;charset=utf-8");

JavaWeb

JavaWeb

软件架构

C/S (client/server 客服端/服务端)

B/S （Browser/Server 浏览器/服务器端）

前端

HTML（Hyper Text MarKup Language）超文本标记语言

CSS 指层叠样式表 (Cascading Style Sheets)

boder

margin

padding

background

font

文本

尺寸

表格

JavaScript

JQuery

Bootstrap

XML（Extensible Markup Language）可扩展标记语言

web服务器软件

webLogic

webSphere

JBOSS

Tomcat

JSP

概念

原理

三大脚本

三大指令

注释

九大内置对象

MVC架构模式

EL表达式（Expression Language表达式语言）

JSTL（JavaServer Pages Tag Library）JSP标准标签库

Http(Hyper Textsfer Protocol)超文本传输协议

请求消息的格式

web三大域

Request一次请求的范围

Session一次会话的范围

ServletContext整个web应用的范围

web三大组件

Servlet

Filter过滤器

Listener监听器

AJAX（ASynchronous JavaScript And XML 异步的JavaScript 和 XML）

异步和同步

JavaScript实现AJAX

JQuery实现

JSON（JavaScript Object Notation JavaScript对象表示法）

xml和json

语法规则

值的获取

JSON数据和Java对象的相互转换

JSON解析器

JSON转为Java对象

Java对象转换JSON

转换方法：

注解：

复杂java对象转换

JavaScript任何识别JSON