JavaWeb基础（2）：熟悉HTMLCSS、Servlet、JSP、EL、JSTL、会话控制、jQuery、JSON、Filter、Listener

1.HTML&CSS

网页的组成
结构：HTML
表现：CSS
行为：JavaScript
一个良好的网页要求结构、表现、行为三者分离
HTML中常用的标签
标题标签：一共6个

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

超链接
通过a标签创建一个超链接
href属性：用来设置要跳转的页面的路径
关于路径：
绝对路径：以盘符开头的一个完整的路径
相对路径：相对于当前页面所在的路径
在相对路径中，通过 …/ 返回上一级目录，返回多级目录使用多个 …/
target属性：用来设置要跳转的页面在何处打开
_self：默认，在当前标签页打开
_blank：在新的标签页打开

<a href="../../target.html" target="_self">点我有惊喜！</a><br>

点我有惊喜！

表格
通过table标签创建一个表格

   <table border="1"><!-- 表格中的行使用tr标签来表示 --><tr><!-- 表格中的表头使用th标签来表示 --><th>姓名</th><th>阵营</th><th>职业</th><th>武器</th></tr><tr><!-- 每行中的列（单元格）使用td标签来表示 --><td>刘备</td><!-- 跨行合并单元格使用rowspan属性来设置 --><td rowspan="4">蜀</td><td>蜀汉集团董事长</td><td>双股剑</td></tr><tr><!-- 每行中的列（单元格）使用td标签来表示 --><td>诸葛亮</td>
<!--            <td>蜀</td> --><!-- 跨列合并单元格使用colspan属性来设置 --><td colspan="2" align="center">蜀汉集团CEO</td>
<!--            <td>羽扇</td> --></tr><tr><!-- 每行中的列（单元格）使用td标签来表示 --><td>关羽</td>
<!--            <td>蜀</td> --><td>荆襄总裁</td><td>青龙偃月刀</td></tr><tr><!-- 每行中的列（单元格）使用td标签来表示 --><td>张飞</td>
<!--            <td>蜀</td> --><td>阆中销售经理</td><td>丈八蛇矛</td></tr>
</table>

表单

<!-- 通过form标签创建一个表单action属性：用来设置服务器的地址method属性：用来设置发送请求的请求方式get：默认值，会发送一个GET请求，表单中的数据会通过浏览器的地址栏进行传输post：会发送一个POST请求，表单中的数据会通过请求体进行传输
-->
<form action="../target.html" method="post"><!-- 表单中的表单项使用input标签来表示 ，不同的表单项通过type属性来指定--><!-- 必须给每个表单项指定name属性值，用户输入的数据通过name属性值进行携带，并以键值对的形式发送到服务器，多个键值对之间通过 & 符合分隔，例如：user=admin&pwd=123456 -->用户名：<input type="text" name="user"><br>密码：<input type="password" name="pwd"><br><!-- 提交按钮中显示的文本通过vlaue属性来设置 --><input type="submit" value="登录">
</form>

CSS的基本选择器
标签选择器
格式：html标签
ID选择器
格式：#id属性值
类选择器
格式：.class属性值
分组选择器
格式：各个选择器通过逗号分隔

<!-- css样式写在style标签中 -->
<style type="text/css">
/* 标签选择器格式：html标签*/h1{color: red}h2{color: green}/* ID选择器格式：#id属性值*/#p1{color: blue;}/* 类选择器格式：.class属性值*/.p2{color: pink;}/* 分组选择器格式：将各个选择器使用逗号分隔统一设置样式*/#p1,.p2{font-size: 30px}

颜色的表示方式
1）使用英文单词
2）使用rgb值
3）使用十六进制数

<!--颜色的表示方式：1.使用英文单词例如：红色：red2.使用rgb值例如：红色：rgb(255,0,0)3.使用十六进制数例如：红色：#FF0000=#ff0000=#F00=#f00   -->

2.Servlet

作用：用来处理用户的请求并给用户响应
request的作用
1）获取请求参数
2）获取项目虚拟路径
3）转发

//request的作用：

    //1.获取请求参数String username = request.getParameter("username");String password = request.getParameter("password");System.out.println(username);System.out.println(password);//2.获取项目的虚拟路径String contextPath = request.getContextPath();System.out.println(contextPath);//3.转发//获取转发器RequestDispatcher requestDispatcher = request.getRequestDispatcher("WEB-INF/pages/success.html");//进行请求的转发requestDispatcher.forward(request, response);

response的作用
1）给浏览器响应一个字符串或一个页面
2）重定向
//response的作用

    //1.给浏览器响应一个字符串或者一个页面//解决响应中文乱码问题response.setContentType("text/html;charset=UTF-8");PrintWriter writer = response.getWriter();
//      writer.write("响应成功！");
//      writer.write("<!DOCTYPE html>");
//      writer.write("<html>");
//      writer.write("<head>");
//      writer.write("<meta charset=\"UTF-8\">");
//      writer.write("<title>Insert title here</title>");
//      writer.write("</head>");
//      writer.write("<body>");
//      writer.write("<h1>我是一个很漂亮的页面！</h1>");
//      writer.write("</body>");//2.重定向response.sendRedirect("WEB-INF/pages/success.html");

中文乱码问题
请求乱码
POST请求
在第一次获取请求参数之前设置字符集为UTF-8
//POST请求的请求乱码问题的解决方案：

request.setCharacterEncoding("UTF-8");request.setCharacterEncoding("UTF-8");

GET请求
在Tomcat的配置文件server.xml的第一个Connector标签中添加属性URIEncoding=“UTF-8”

 <Connector URIEncoding="UTF-8" connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443"/>

响应乱码
//解决响应中文乱码问题

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

绝对路径

<!--以  / 开头的路径即为绝对路径/ 代表的意义：如果地址由浏览器解析，那么 / 就代表http://localhost:8080/1）html标签中的路径2）重定向中的路径如果地址由服务器解析，那么 / 就代表http://localhost:8080/Web_Ex/1）web.xml中url-pattern标签中的路径2）转发中的路径-->

3.JSP

本质上就是一个Servlet
JSP基本语法
JSP脚步片段
作用：用来在里面写Java代码

<!-- 1.JSP脚本片段作用：用来在里面写Java代码--><%for(int i = 0 ; i < 10 ; i ++ ){//out.print("今天天气好晴朗，处处好风光！");%>     <h1>今天天气好晴朗，处处好风光!</h1><%}%

JSP表达式
作用：用来输出对象

<!-- 2.JSP表达式作用：用来输出对象--><%="我是通过JSP表达式输出的" %>

四个域对象

<!--四个域page域范围：当前页面对应的域对象：pageContext域对象的类型：PageContextrequest域范围：当前请求（一次请求）对应的域对象：request域对象的类型：HttpServletRequestsession域范围：当前会话（一次会话）对应的域对象：session域对象的类型：HttpSessionapplication范围：当前Web应用对应的域对象：application域对象的类型：ServletContext四个域对象都有以下三个方法：void setAttribute(String key , Object value)   Object getAttribute(String key)void removeAttribute(String key)四个域对象的使用规则：能用小的就不用大的 --><!-- 在当前页面中分别向四个域中添加四个属性 --><%pageContext.setAttribute("pageKey", "pageValue");request.setAttribute("reqKey","reqValue");session.setAttribute("sessKey", "sessValue");application.setAttribute("appKey", "appValue");%><h1>在当前页面中获取四个域中的属性值</h1>page域中的属性值是：<%=pageContext.getAttribute("pageKey") %><br>request域中的属性值是：<%=request.getAttribute("reqKey") %><br>session域中的属性值是：<%=session.getAttribute("sessKey") %><br>application域中的属性值是：<%=application.getAttribute("appKey") %><br>

4.EL

格式：${表达式}
作用：主要用来输出域对象中的属性值

 <%Date date = new Date();pageContext.setAttribute("date", date+"-");request.setAttribute("date", date+"--");session.setAttribute("date", date+"---");application.setAttribute("date", date+"----");//创建Employee对象Employee emp = new Employee(1,"刘强东",new Department(1001,"奶茶店"));//将emp返到page域中pageContext.setAttribute("emp", emp);%>通过EL表达式输出当前的时间：${date }<br>精确获取request域中的属性值：${requestScope.date }<br>
通过EL表达式输入Employee对象的lastName属性值：${emp.lastName }<br>
通过EL表达式输入Employee对象的dept属性的name属性值：${emp.dept.name }<br>
通过EL表达式获取getStatus方法的返回值：${emp.status }
通过EL表达式获取项目的虚拟路径：${pageContext.request.contextPath }

5.JSTL

JSP的标准标签库，使用它需要导入以下jar包
jstl.jar
standard.jar
使用c标签需要导入核心标签库

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

if标签

 <!-- if标签：相当于Java中的if条件判断语句test属性：用来接收一个布尔类型的值，通常通过EL表达式获取当值为true时才执行标签体中的内容--><%int age = 19;pageContext.setAttribute("age", age);%><c:if test="${age < 18 }">少儿不宜！</c:if><c:if test="${age > 18 }">请尽情浏览！注意身体！！！</c:if>

forEach标签

 <%List<String> list = new ArrayList();list.add("文章");list.add("白百何");list.add("李小璐");list.add("陈赫");list.add("林丹");list.add("黄海波");list.add("房祖名");list.add("周立波");list.add("张默");//将list放到page域中pageContext.setAttribute("stars", list);%><!-- forEach标签：相当于Java中的for循环items属性：用来接收一个要遍历的集合var属性：设置一个变量来接收遍历到的数据，并且会以变量的值为key将数据放到page域中--><c:forEach items="${stars }" var="star"><a href="#">${pageScope.star }</a><br></c:forEach>

empty运算符
用来判断一个字符串或一个集合是否为空

  <c:if test="${empty stars }">没有违法的明星！</c:if><c:if test="${not empty stars }">什么都是别人的好！</c:if><c:if test="${!empty stars }">佛海无边，回头是岸！！！</c:if>

6.会话控制

Cookie的运行原理

<!--Cookie的运行原理：1.第一次向服务器发送请求时在服务器端创建一个Cookie对象2.将Cookie对象发送给浏览器3.以后浏览器再发请求就会携带着该Coolie对象4.服务器通过不同的Cookie来区别不同的用户-->

Session的运行原理

<!--Session的运行原理：1.第一次向服务器发送请求时在服务器端创建一个Session对象，该对象有一个全球唯一的ID2.在创建Session对象的同时会创建一个特殊的Cookie对象，该Cookie对象的名字是一个固定值：JSESSIONID，该Cookie对象的值就是Session对象的ID值，并且将该Cookie对象发送给浏览器3.以后浏览器再发送请求就会携带着这个特殊的Cookie对象4.服务器获取Cookie对象的值之后寻找与之对应的Session对象，以此来区分不同的用户 -->

7.jQuery

jQuery是为了简化JavaScript开发而生的一个小型的框架，jQuery和是相等的，我们通常使用是相等的，我们通常使用是相等的，我们通常使用代替jQuery这个单词
基本选择器
ID选择器
$("#id属性值")
类选择器
$(".class属性值")
标签选择器
("html标签")常用的方法attr()获取或设置标签的属性值对象.attr("属性名")：获取属性值对象.attr("属性名","属性值")：设置属性值text()和html()方法获取或设置成对出现的标签中的文本值对象.text()：获取文本值对象.text("新值")：设置文本值html()方法与text()方法的唯一区别是html方法可以解析html标签val()获取或设置input标签的value属性值对象.val()：获取value属性值对象.val("新值")：设置value属性值事件click()：单击事件change()：内容改变的事件通过jQuery发送Ajax请求通过("html标签") 常用的方法 attr() 获取或设置标签的属性值对象.attr("属性名")：获取属性值对象.attr("属性名","属性值")：设置属性值 text()和html()方法获取或设置成对出现的标签中的文本值对象.text()：获取文本值对象.text("新值")：设置文本值 html()方法与text()方法的唯一区别是html方法可以解析html标签 val() 获取或设置input标签的value属性值对象.val()：获取value属性值对象.val("新值")：设置value属性值事件 click()：单击事件 change()：内容改变的事件通过jQuery发送Ajax请求通过("html标签")常用的方法attr()获取或设置标签的属性值对象.attr("属性名")：获取属性值对象.attr("属性名","属性值")：设置属性值text()和html()方法获取或设置成对出现的标签中的文本值对象.text()：获取文本值对象.text("新值")：设置文本值html()方法与text()方法的唯一区别是html方法可以解析html标签val()获取或设置input标签的value属性值对象.val()：获取value属性值对象.val("新值")：设置value属性值事件click()：单击事件change()：内容改变的事件通过jQuery发送Ajax请求通过.ajax()发送Ajax请求
//给按钮绑定单击事件

    $("#btnId").click(function(){//通过$.ajax()方法发送Ajax请求/*url：必须的。用来设置请求地址type：可选的。用来设置请求方式，GET或POST，默认是getdata：可选的。用来设置请求参数success：可选的。用来设置一个回调函数，响应成功之后系统会自动调用该函数，响应数据会以参数的形式传入到该函数中dataType：可选的。设置响应数据的类型，默认是text       */$.ajax({url:"${pageContext.request.contextPath }/AjaxServlet",type:"get",data:"username=admin&password=123456",success:function(res){//将响应数据设置到span标签中$("#msg").text(res);},dataType:"text"});});

通过.get()或.get()或.get()或.post()发送Ajax请求

$("#btnId2").click(function(){//通过$.get()/post()方法发送Ajax请求/*$.get/post(url, [data], [callback], [type])url：必须的。用来设置请求地址data：可选的。用来设置请求参数callback：可选的。用来设置一个回调函数，响应成功之后系统会自动调用该函数，响应数据会以参数的形式传入到该函数中type：可选的。用来设置响应数据的类型，默认是text       *///设置请求地址var url = "${pageContext.request.contextPath }/AjaxServlet";//设置请求参数var params = "username=admin&password=666666";$.get(url,params,function(res){//将响应数据设置到span标签中$("#msg2").html(res);},"text");});

8.JSON

JavaScript的对象表示法，是一种跨平台、跨语言的数据交换格式
JSON格式
JSON对象
//1.JSON对象
//属性名必须使用双引号括起来；属性名和属性值之间使用冒号分隔；多个属性之间使用逗号分隔

var jsonObj = {"name":"孙悟空","age":520};
//创建一个稍微复杂的JSON对象
var fzJson = {"name":"唐僧","age":18,"sons":[{"name":"孙悟空"},{"name":"小白龙"},{"name":"猪八戒","wives":[{"name":"嫦娥","age":16},{"name":"高翠兰","age":17},{"name":"白骨精","age":18}]},{"name":"沙和尚"}]};
//获取猪八戒的第二任夫人的名字
alert(fzJson.sons[2].wives[1].name);

JSON数组
//2.JSON数组

var jsonArray = ["八戒",1500,true,null,jsonObj];
//获取数组中JSON对象的age属性值
alert(jsonArray[4].age);

在JavaScript中JSON对象与JSON字符串之间的转换

//将JSON对象转换为JSON字符串
var objToStr = JSON.stringify(jsonObj);
//声明一个JSON字符串
var jsonStr = '{"name":"女儿国国王","age":35}';
//将JSON字符串转换为JSON对象var strToObj = JSON.parse(jsonStr);

在Java中对象与JSON字符串之间的转换
导入Gson的jar包

    //假设从数据库中查询出来一个User对象User user = new User(1, "白骨精", 16);//创建Gson对象Gson gson = new Gson();//将User对象转换为JSON字符串String json = gson.toJson(user);System.out.println(json);

发送一个Ajax请求，接收JSON格式的响应数据

$(function(){//给按钮绑定单击事件$("#btnId").click(function(){//发送Ajax请求//设置请求地址var url = "JSONServlet";$.post(url,function(res){alert(res.id+"-"+res.name+"-"+res.age);},"json");});
});

当响应数据指定为json格式时，后台响应的JSON字符串jQuery会自动给我们转换为JSON对象

9.Filter

作用：用来拦截用户的请求，但是Filter只拦截请求不拦截响应
我们还可以为同一个资源设置多个过滤器，多个过滤器的拦截顺序由web.xml中的filter-mapping标签绝对，在前的先拦截，在后的后拦截
以拦截index.jsp页面为例创建两个拦截器
HelloFilter

/*** 拦截index.jsp的过滤器*/
public class HelloFilter implements Filter {public HelloFilter() {}public void destroy() {}// 拦截请求的方法public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)throws IOException, ServletException {System.out.println("①此山是我开此树是我栽，要想从此过，留下买路财！");//放行请求chain.doFilter(request, response);System.out.println("⑤小鬼，你又回来了！");}public void init(FilterConfig fConfig) throws ServletException {}
}

HelloFilter2

/*** 拦截index.jsp的过滤器*/
public class HelloFilter2 implements Filter {public HelloFilter2() {}public void destroy() {}// 拦截请求的方法public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)throws IOException, ServletException {System.out.println("②此山是我开此树是我栽，要想从此过，留下衣服来！");//放行请求chain.doFilter(request, response);System.out.println("④你又买新衣服了！");}public void init(FilterConfig fConfig) throws ServletException {}
}

index.jsp页面中的内容

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body><%System.out.println("③到达目的地！");%><h1>你能看到我吗？</h1>
</body>
</html>

web.xml中的配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaeehttp://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5"><filter><filter-name>HelloFilter</filter-name><filter-class>com.atguigu.filter.HelloFilter</filter-class></filter><filter><filter-name>HelloFilter2</filter-name><filter-class>com.atguigu.filter.HelloFilter2</filter-class></filter><filter-mapping><filter-name>HelloFilter2</filter-name><url-pattern>/index.jsp</url-pattern></filter-mapping><filter-mapping><filter-name>HelloFilter</filter-name><url-pattern>/index.jsp</url-pattern></filter-mapping>
</web-app>

10.Listener

监听器用来监听ServletRequest、HttpSession、ServletContext对象的生命周期和三个域中的属性变化
掌握ServletContext的生命周期监听器
ServletContextListener
通过该接口创建的监听器服务器已启动该对象就被创建
创建一个ServletContextListener的监听器
MyServletContextListener

/*** 监听ServletContext对象的生命周期的监听器**/
public class MyServletContextListener implements ServletContextListener {public void contextDestroyed(ServletContextEvent sce)  {System.out.println("ServletContext对象被销毁了");}public void contextInitialized(ServletContextEvent sce)  {System.out.println("ServletContext对象被创建了");}}

web.xml中的配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaeehttp://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5"><listener><listener-class>com.atguigu.listener.MyServletContextListener</listener-class></listener>
</web-app>