标签：图片 apach 内存 view 第三方 关闭浏览器 sed pack 不选中
优点：用户体验好 缺点：开发、部署、安装、维护麻烦
资源分类
静态资源
使用静态网页开发技术发布的资源 特点： 1、所有用户访问，得到的结果是一样的（如：文本、图片、音频、视频、HTML、css、JavaScript） 2、如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
动态资源
使用动态网页即时发布的资源 特点： 1、所有用户访问，得到的结果可能不一样（如：jsp/servlet,php,asp...） 2、如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
围堵标签
有开始和结束标签的标签
自闭合标签
开始标签和结束标签在一起的标签
标签可以嵌套
需要正确嵌套，不能你中有我，我中有你
常用属性
boder-top 边框顶边 boder-left 边框左边 boder-right 边框右边 boder-bottom 边框底边 boder-widht 边框宽度 boder-color 边框颜色 boder-style 边框样式 boder-radius 边框圆角
margin-top 上外边距 margin-left 左外边距 margin-right 右外边距 margin-bottom 下外边距
padding-top 上外边距 padding-left 左外边距 padding-right 右外边距 padding-bottom 下外边距
background-size 背景（图片）大小 background-color 背景颜色 background-image 背景图片
font-family 字体 font-size 字体大小
color 颜色 text-align 水平居中 line-height 行高（设置为父级一样高度垂直居中） vertical-align 垂直居中
width 宽度 height 高度 max-width 最大宽度 max-height 最大高度
border-collapse 规定是否合并表格边框 border-spacing 规定相邻单元格边框之间的距离
常用对象方法
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是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已
jQuery-xxx.js与jquery-xxx.min.js区别
1、jQuery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积较大 2、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对象区别与转换
1、jQuery对象在操作时，更加方便 2、jQuery对象和js对象方法不通用 3、互相转换 jq-->js：jq对象[索引] 或者 jq对象.get(索引) js-->jq：$(js对象)
人口函数
//复杂写法 $(document).ready(function(){ ... })
//简单写法 $(function(){ ... })
与JavaScript人口函数的区别
JavaScript人口函数： 1、如果定义多个，只有最后一个会生效 2、在页面渲染完成才会执行 jQuery人口函数： 1、可以定义多个，都会生效 2、dom树在内存中加载完成就会执行
样式控制
在 jQuery 中，提供了一个名为 css()的函数来操作 css 样式
获取 css 样式的属性值 jq对象.css("属性名");
设置 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的区别
attr 一般用于操作元素的自定义属性，prop 一般用于操作元素的固有属性 固有属性：w3c 文档中一定描述过的属性 自定义属性：w3c 文档中没有描述过的属性 文档位置：点击顶部JavaScript-->点击左侧JavaScript-->点击参考书-->左侧HTML对象（见HTML属性.jpg）
在获取属性值时，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){ })
1、jq数组对象必须时jQuery对象 2、参数i代表索引 3、参数n代表索引对应的数组元素 4、return true代表跳出本次循环，return false代表结束循环
$.each(数组,function(i,n){})
$ 在 jQuery 中被称之为【jQuery对象】
参数数组既可以是 js 对象，也可以是 jQuery 对象
参数 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>
响应式布局
同一套页面可以兼容不同分辨率的设备。 实现：依赖于栅格系统：将一行平均分成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与html的区别
1、XML标签都是自定义的，HTML标签是预定义 2、XML的语法严格，HTML语法松散 ３、XML是存储数据的，HTML是展示数据
语法
１、XML文档的后缀名（.xml） 2、XML第一行必须定义为文档声明 3、XML文档中有且仅有一个根标签 4、属性值必须使用引号（单双都可）引起来 5、标签必须正确关闭 6、XML标签名区分大小写
文档声明
1、格式<? xml 属性列表 ?> 2、属性列表： version：版本号，必须的属性 encoding：编码方式。告知解析引擎当前文档使用的字符集，默认值：ISO-8859-1 standalone：是否独立（yes：不依赖其他文件；no：依赖其它文件）
指令
结合css：<? xml-stylesheet type="text/css" href="a.css" ?>
标签
规则： 1、名字可以包含字母、数字及其它的字符 2、名称不能以数字或者标点符号开始 3、名称不能以字母xml(或者XML、Xml等等)开始 4、名称不能包含空格
属性
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的操作方法来取出和操作数据。
使用步骤
导入jar包
获取Document对象
获取对应的标签Element对象
获取数据
对象
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的文档对象
Document：文档对象。代表内存中的dom树 获取Element对象 getElementById?(String id)：根据id属性值获取唯一的element对象 getElementsByTag?(String tagName)：根据标签名称获取元素对象集合 getElementsByAttribute?(String key)：根据属性名称获取元素对象集合 getElementsByAttributeValue?(String key, String value)：根据对应的属性名和属性值获取元素对象集合
Elements：元素Element对象的集合。可以当做 ArrayList<Element>来使用
Element：元素对象
获取子元素对象 getElementById?(String id)：根据id属性值获取唯一的element对象 getElementsByTag?(String tagName)：根据标签名称获取元素对象集合 getElementsByAttribute?(String key)：根据属性名称获取元素对象集合 getElementsByAttributeValue?(String key, String value)：根据对应的属性名和属性值获取元素对象集合
获取属性值 String attr(String key)：根据属性名称获取属性值
获取文本内容 String text():获取文本内容 String html():获取标签体的所有内容(包括字标签的字符串内容)
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);
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包
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
优点：
耦合性低，方便维护，可以利于分工协作重用性高
缺点：
使得项目架构变得复杂，对开发人员要求高
M：Model（模型）
M：Model，模型。JavaBean 完成具体的业务操作，如：查询数据库，封装对象
V：View（视图）
V：View，视图。JSP、html 展示数据
C：Controller（控制器）
C：Controller，控制器。Servlet 获取用户的输入 调用模型 将数据交给视图进行展示
作用：替换和简化JSP页面中Java代码的编写 注意： jsp默认支持el表达式，如果要忽略el表达式 1、设置jsp指令中：isELIgonred="true"忽略当前jsp页面中所有的el表达式 2、{表达式}：忽略当前这个el表达式
运算
算数运算符： + - * /(div) %(mod)
比较运算符： > < >= <= == !=
逻辑运算符： &&(and) ||(or) !(not)
空运算符： 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}：动态获取虚拟目录
常用的标签
if（Java代码if语句）
test 必须属性，接受boolean表达式,如果表达式为true，则显示if标签体内容，如果为false，则不显示标签体内容。一般情况下，test属性值会结合el表达式一起使用。
choose（Java代码switch语句）
使用choose标签声明 相当于switch声明
使用when标签做判断 相当于case
使用otherwise标签做其他情况的声明 相当于default
foreach（Java代码for语句）
items:容器对象； var:容器中元素的临时变量； begin：开始值； end：结束值； step：步长； varStatus:循环状态对象： index:容器中元素的索引，从0开始； count:循环次数，从1开始。
传输协议：定义了客服端和服务端通讯时，发送数据的格式 特点： 1、基于TCP/IP的高级协议 2、默认端口号：80 3、基于请求/响应模型的：一次请求对应一次响应 4、无状态的：每次请求之间相互独立，不能交互 历史版本： 1.0：每一次请求响应都会建立新的连接 1.1：复用连接
请求行
请求方式 请求url 请求协议/版本 GET /login.html HTTP/1.1 请求方式： HTTP协议有7种请求方式，常用2种 GET： 1、请求参数在请求行中，在url后， 2、请求的url长度有限制的（64kb） 3、不太安全 POST： 1、请求参数在请求体中 2、请求的url长度没有限制 3、相对安全
请求头
客服端浏览器告诉服务器一些信息 请求头名称：请求头值 常见的请求头： 1、User-Agent：浏览器告诉服务器，我访问你使用的浏览器版本信息（可以在服务器端获取该头的信息，解决浏览器的的兼容性问题） 2、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
Request和Reaponse
request对象和response对象的原理
request和response对象是由服务器创建的。我们来使用它们
request对象是来获取请求消息，response对象是来设置响应消息
request对象继承体系结构
ServletRequest -- 接口 | 继承 HttpServletRequest -- 接口 | 实现 org.apache.catalina.connector.RequestFacade 类(tomcat) 注意：虽然 Tomcat 传递的是 RequestFacade 对象，但是我们会把它当成 HttpServletRequest。因为 这个对象的实现在 Tomcat 内部，我们没办法查看。
request功能
获取请求信息数据
获取请求行数据
GET /day14/demo1?name=zhangsan HTTP/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")
其他功能
获取请求参数通用方式
String getParameter(String name):根据参数名称获取参数值 username=zs&password=123
String[] getParameterValues(String name):根据参数名称获取参数值的数组 hobby=xx&hobby=game
Enumeration<String> getParameterNames():获取所有请求的参数名称
Map<String,String[]> getParameterMap():获取所有参数的map集合
请求转发
步骤：
通过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： 1、地址栏发生变化 2、重定向可以访问其他站点（服务器）的资源 3、重定向是两次请求。不能使用request对象来共享数据 forward： 1、转发地址栏路径不变 2、转发只能访问当前服务器的资源 3、转发是一次请求，可以使用request对象来共享数据
区别
1、路径分类 1、相对路径：通过相对路径不可以确定唯一资源 如：./index.html 不以/开头，以.开头路径 规则：找到当前资源和目标资源之间的相对位置关系（./：当前目录；../：后退一级目录） 2、绝对路径：通过绝对路径可以确定唯一资源 如：http://localhost/response/responseDemo2 /response/responseDemo2 以/开头的路径 规则：判断定义的路径是给谁用的？判断请求将来从哪儿发出 给客户端浏览器使用：需要加虚拟目录(项目的访问路径) 建议虚拟目录动态获取：request.getContextPath() <a> , <form> 重定向... 给服务器使用：不需要加虚拟目录 转发路径
会话技术
一次会话中包含多次请求和响应。 一次会话：浏览器第一次给服务器资源发送请求，会话建立，直到有一方断开为止 功能：在一次会话的范围内的多次请求间，共享数据
客服端会话技术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)设置存活时间 1、正数：将Cookie数据写入到硬盘文件中，数据就是存活时间（单位为秒） 2、负数：默认值 3、零：删除cookie信息
Cookie存储中文
在tomcat 8 之前 cookie中不能直接存储中文数据。 需要将中文数据转码---一般采用URL编码(%E3) 在tomcat 8 之后，cookie支持中文数据。特殊字符还是不支持，建议使用URLEnoder.encode(String str,)编码存储，URLDecoder解码解析
Cookie共享
1、默认不可以 2、一个Tomcat，多个项目共享 setPath(String path):设置cookie的获取范围。默认情况下，设置当前的虚拟目录 如果要共享，则可以将path设置为"/" 3、不同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区别
session存储数据在服务器端，Cookie在客户端
session没有数据大小限制，Cookie有
session数据安全，Cookie相对于不安全
获取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);
运行在服务器端的小程序 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>
执行原理
当服务器接受到客户端浏览器的请求后，会解析请求URL路径，获取访问的Servlet的资源路径
查找web.xml文件，是否有对应的<url-pattern>标签体内容。
如果有，则在找到对应的<servlet-class>全类名
tomcat会将字节码文件加载进内存，并且创建其对象
调用其方法
Servlet中的生命周期
init创建
被创建：执行init方法，只执行一次 Servlet什么时候被创建？ 默认情况下，第一次被访问时，Servlet被创建 可以配置执行Servlet的创建时机。 在<servlet>标签下配置 1. 第一次被访问时，创建 <load-on-startup>的值为负数 2. 在服务器启动时，创建 <load-on-startup>的值为0或正整数 Servlet的init方法，只执行一次，说明一个Servlet在内存中只存在一个对象，Servlet是单例的 多个用户同时访问时，可能存在线程安全问题。 解决：尽量不要在Servlet中定义成员变量。即使定义了成员变量，也不要对修改值
service提供服务
提供服务：执行service方法，执行多次 每次访问Servlet时，Service方法都会被调用一次。
destroy销毁
被销毁：执行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的相关配置
IDEA会为每一个tomcat部署的项目单独建立一份配置文件
查看控制台的log：Using CATALINA_BASE: "C:\Users\fqy.IntelliJIdea2018.1\system\tomcat_itcast"
工作空间项目 和 tomcat部署的web项目
tomcat真正访问的是“tomcat部署的web项目”，"tomcat部署的web项目"对应着"工作空间项目" 的web目录下的所有资源
WEB-INF目录下的资源不能被浏览器直接访问。
断点调试：使用"小虫子"启动 dubug 启动
Servlet的体系结构
Servlet（接口）-->GenericServlet（抽象类）-->HttpServlet（抽象类） GenericServlet：将Servlet接口中其他方法做了默认空实现，只将service方法作为抽象，将来在定义Servlet类时，可以继承GenericServlet，实现service()方法即可 HttpServlet：对HTTP协议的一种封装，简化操作1、定义类继承HttpServlet；2、复写doGet/doPost方法
Servlet相关配置
1、urlPartten：Servlet访问路径 1. 一个Servlet可以定义多个访问路径 ： @WebServlet({"/d4","/dd4","/ddd4"}) 2. 路径定义规则： 1. /xxx：路径匹配 2. /xxx/xxx:多层路径，目录结构 3. *.do：扩展名匹配
登录案例
需求
实现步骤
准备
1、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>
2、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 );
3、druid.properties配置文件
driverClassName=com.mysql.jdbc.Driver
url=jdbc:mysql:///day14
username=root
password=root
initialSize=5
maxActive=10
maxWait=3000
4、导包 - 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 }
使用步骤
1、定义一个类，实现接口Filter 2、复写方法 3、配置拦截路径（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 }
执行流程
1、执行过滤器 2、执行放行后的资源 3、回来执行过滤器放行代码下的代码
生命周期
init
doFilter
destroy
拦截路径配置
1、具体资源路径：/index.jsp 只有访问index.jsp资源时，过滤器才会被执行 2、拦截目录：/user/* 访问/user下的所有资源时，过滤器都会被执行 3、后缀名拦截：.jsp 访问所有后缀名为jsp资源时，过滤器都会被执行 4、拦截所有资源：/ 访问所有资源时，过滤器都会被执行 注意： 1. 既然 Filter 是用来做一些通用的处理的，所以一般我们配置的都是 /* 2. 在 Filter 中 url-pattern 的配置不存在优先级的问题
拦截方式配置
过滤器默认是拦截请求用的，但是我们的资源跳转方式还可能有转发或者错误页面的跳转，默认请求 Filter 也只能拦截请求，所以如果希望 Filter 拦截其它的资源跳转的方式，需要进行配置。 资源被访问的方式 注解配置： 设置dispatcherTypes属性 1、REQUEST：默认值。浏览器直接请求资源 2、FORWARD：转发访问资源 3、INCLUDE：包含访问资源 ４、ERROR：错误跳转资源 ５、ASYNC：异步访问资源 web.xml配置： 设置<dispatcher></dispatcher>标签即可 注意：如果想拦截请求和转发，那么 REQUEST 和 FORWARD 都需要配置，如果只配置 FORWARD 则只能拦截转 发，请求就拦截不了了。
过滤器链
执行顺序
1、注解配置： 按照类名的字符串比较规则比较，值小的先执行 2、web.xml配置：<filter-mapping>谁定义在上边，谁先执行 注意： 1. web.xml 配置的优先级要高于注解。 2. 过滤器链中只有有任何一个过滤器没有放行，那么请求都不能到达目标资源，所谓的放行，是放行到过滤器 链中的下一个过滤器。只有过滤器链中的所有过滤器都放行了，请求才能到达目标资源。 3. 请求的过程会按照顺序经过过滤器链中的每一个过滤器，回来的过程也会经过所有过滤器，只不过顺序相 反。 4. 关于过滤器链的相关内容了解原理即可，在使用过滤器的时候不用过多考虑过滤器链的问题。
web开发中的监听器主要用来监听Servlet规范中的三个域对象的变化 ServletRequest HttpSession ServletContext
监听器一共3类8种：第一种实现SercletContextListener接口
主要用来监听ServletContext的创建和销毁，其实就是服务器的启动和关闭
1、定义一个类，实现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 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 [1] 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
1、如果是同步请求，页面向服务器发起一个请求后，在服务器没有完成响应之前，页面只能等待，不能再进行 其它操作。
2、如果是异步，页面想服务器发起一个请求后，在服务器没有完成响应之前，页面无需等待，还可以进行其它 操作，对于用户来说，体验没有中断
3、可以用 Java 多线程的思路去理解，异步就是一个新的线程在后台偷偷做其它事情。（只是这么理解，本质不 是多线程）
4、异步请求还有一个非常大的特点就是局部刷新，不用重新渲染整个页面。 注意： 1. 传统的 HTTP 同步请求，服务器【最终】响应的数据会被浏览器直接渲染
通过 Ajax 发起的异步 HTTP 请求，服务器【最终】响应的数据不会被浏览器直接渲染，需要自己通过 JavaScript 处理！！！！！
什么叫终？
? 1、比如访问一个 Servlet，在 Servlet 中通过 response 对象的输出流直接写数据响应，并没有作别的操作，这 是常见的方式, response 写的数据就是终响应的数据。
? 2、再比如：访问一个 Servlet，但是这个 Servlet 自己没有响应，而是转发到了其它页面比如 jsp，那么终响应 的是 jsp 中的内容。
核心对象：XMLHTTPRequest
实现异步请求的核心就是 JavaScript 提供的 XMLHttpRequest 对象，其实早期 JavaScript 语言并不受重视， 很多后台程序员将 JavaScript 代码戏称为 toy code (玩具代码)，直到 Google 公司率先发现 XMLHttpRequest 对象并通过它实现了搜索框的联想词功能。所以说 JavaScript 语言现在这么流行和受重 视，XMLHttpRequest 对象功不可没！ 虽然我们通过其它框架实现 Ajax 不会直接操作 XMLHttpRequest 对象，但是内部的原理都离不开它，所以这 个对象需要认识！
实现步骤
1、创建异步对象 2、设置请求状态改变的监听函数 3、设置请求方式，请求路径，是否异步 4、发送请求 5、处理响应
代码示例
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>
$.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>
JavaScript Object Notation （JavaScript 对象表示法）,是 JavaScript 中定义对象的一种语法，现在被更广泛的用于网络传输的数据格式。
1、和 xml 相比，json 的数据体积更小。所以早期在移动互联网兴起之前，以 xml 作为数据传输的格式比较多， 但是移动互联网兴起后，用户的流量都是比较宝贵的，所以开始越来越多的采用 json 这种数据格式。因为它 体积小更节约用户的流量。 2、而且 json 还有一个天然的优势，就是它本来就是 JavaScript中描述对象的一种方式，所以能直接被 JavaScript所识别，便于数据的解析（根据 key 获取 value）
1、数据在名称/值对中：json数据是由键值对构成的 键用引号(单双都行)引起来，也可以不使用引号
值得取值类型： 1. 数字（整数或浮点数) 2. 字符串（在双引号中) 3. 逻辑值（true 或 false） 4. 数组（在方括号中） 5. {"persons":[{},{}]}对象（在花括号中） {"address":{"province"："陕西"....}} 6. null
2、数据由逗号分隔：多个键值对由逗号分隔
3、花括号保存对象：使用{}定义json 格式
4、方括号保存数组：[]
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>
常见的解析器：Jsonlib,Gson,fastjson,jackson
导入jackson的相关jar包
创建Jackson核心对象 ObjectMapper
调用ObjectMapper的相关方法进行转换
readValue(json字符串数据,Class)
导入jackson的相关jar包
创建Jackson核心对象 ObjectMapper
调用ObjectMapper的相关方法进行转换
writeValue(参数1，obj): 参数1： File：将obj对象转换为JSON字符串，并保存到指定的文件中 Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中 OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
writeValueAsString(obj):将对象转为json字符串
@JsonIgnore：排除属性。
@JsonFormat：属性值得格式化
@JsonFormat(pattern = "yyyy-MM-dd")
List：数组
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 }
虽然 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
标签：图片 apach 内存 view 第三方 关闭浏览器 sed pack 不选中
原文地址：https://www.cnblogs.com/zyxyz/p/11869675.html
