ajax&jquery&listener&filter

分页:
将数据按照页码划分,提高用户的体验度.
分类:
逻辑分页:一次性将内容加载到内存(list),获取自己想要的数据 sublist截取.缺点:维护起来麻烦
物理分页:(经常使用) 每次只去查询当前页需要的数据 缺点:和数据库交互多
mysql: limit
格式:
select ….. limit m,n;
[m+1,m+n]
规律:
查看第n也数据: limit (n-1)*pageSize,pageSize
每页中需要的数据:
5个
当前页内容 list 通过limit查询
当前页 currPage 前台传递过来
每页显示的条数 pagesize 固定
总条数 totalCount count(*)查询
总页数 Math.ceil(totalCount*1.0/pageSize)
封装成一个pagebean

在前台展示:
1.当前页数据 遍历 pb.list
2.展示首页 上一页… 然后给他们添加超链接
3.判断是否是第一页 若是:不展示 首页和上一页
4.判断是否是最后一页 若是:不展示 尾页和下一页
5.将所有的页码展示
forEach begin=”1” end=”${pb.totaoPage}”
6.判断是否是当前页
若是:则不加超链接
若不是:加超链接
///
案例1-使用原生的ajax判断用户名是否占用(了解)
需求:
当我们在注册页面上输入用户名之后,点击下一个地方,去数据库中查询有无该用户名,最后提示信息
技术分析:
ajax
ajax
异步JavaScript和XML,
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
/
ajax入门程序:
步骤:
1.创建一个核心对象 XMLHttpRequest
2.编写一个回调函数
3.编写请求方式和请求的路径(open操作)
4.发送请求(send操作)
ajax-api详解
常用属性:
onreadystatechange:检测readyState状态改变的时候
readyState:ajax核心对象的状态
0:核心对象创建
1:调用了open方法
2:调用了send方法
3:部分响应已经生成(没有意思)
4:响应已经完成(使用的是这个状态)
status:状态码
if(xmlhttp.readyState==4 && xmlhttp.status==200){
}
responseText:响应回来的文本
常用方法:
open(“请求方式”,”请求路径”[,”是否异步”]):设置请求的方式和请求的路径
send([“参数”]):发送请求 参数是请求方式为post的时候的参数
setRequestHeader(“content-type”,”form表单enctype属性”):设置post请求的参数的类型 必须放在send方法之前.
/
步骤分析:
1.数据库和表
CREATE TABLE user (
id INT(11) NOT NULL AUTO_INCREMENT,
username VARCHAR(20) DEFAULT NULL,
password VARCHAR(20) DEFAULT NULL,
email VARCHAR(20) DEFAULT NULL,
name VARCHAR(20) DEFAULT NULL,
sex VARCHAR(10) DEFAULT NULL,
birthday DATE DEFAULT NULL,
hobby VARCHAR(50) DEFAULT NULL,
PRIMARY KEY (id)
) ENGINE=INNODB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;
INSERT INTO user(id,username,password,email,name,sex,birthday,hobby) VALUES (1,’bbb’,’123’,’123@163.com’,’张三’,’男’,’1992-01-02’,’篮球, 足球, 排球’),(2,’ccc’,’123’,’ccc@itcast.cn’,’李四’,’女’,’1992-03-20’,’排球, 乒乓球’),(3,’aaa’,’123’,’aaa@itcast.cn’,’王守义’,’男’,’1990-08-11’,’足球, 排球’),(5,’tom’,’123’,’haha@qq.com’,’提莫’,’男’,NULL,’篮球’);
2.新建项目
导入 jar包 工具类 配置文件
3.新建一个注册页面 表单 在用户名文本框上输入用户名 失去焦点
发送ajax请求,将输入的值发送到servlet
4.checkUsername4Ajax
接受用户名
调用service完成查询操作 返回一个用户
判断user是否为空
若为空 :写1 代表可以使用
若不为空:写0
5.在表单接受响应的数据
判断一下,
若为0,则提示用户名已被占用 表单不可用提交 提交按钮禁用
document.getElementById(“sub”).disabled=true;
//
案例2-使用jquery的ajax判断用户是否被占用
技术分析:
jquery中的ajax
///
四种:
了解:jquery对象.load(url,params,function(数据){});
★: $.get(url,params,function(数据){},type);
发送get请求的ajax
url:请求的路径
params:请求的参数 参数为key\value的形式 key=value {“”:”“,”“:”“}
fn:回调函数 参数就是服务器发送回来的数据
type:返回内容格式，xml, html, script, json, text, _default。 以后用”json”

★: $.post(url,params,function(数据){},type);
    发送post请求的ajax

    若结果为json格式,  打印返回值的时候是一个对象 
        例如若json为 {"result":"success","msg":"成功"}
        获取msg 只需要   参数.msg
理解:
    $.ajax([选项]);
        选项的可选值:
            url:请求路径
            type:请求方法
            data:发送到服务器的数据
            success:fn 成功以后的回调
            error:fn 异常之后的回调
            dataType:返回内容格式 经常使用json
            async:设置是否是异步请求
        例如:
            $.ajax({
                url:"/day15/demo1",
                type:"post",
                data:"username=tom",
                success:function(d){
                    alert(d.msg);
                },
                error:function(){},
                dataType:"json"

            });

//
步骤分析:
将js原生ajax修改成jquery的ajax

案例3-模仿百度搜索
需求:
在一个文本框中输入一段内容,keyup的时候发送一个ajax请求,去数据库中查找相应的内容,在页面上展示
步骤分析:

1.表 create table keyword( id int primary key auto_increment, kw varchar(20) );

2.页面
3.在文本框输入内容 keyup的时候 发送ajax请求 将输入值传递到后台
4.将返回的数据展示

///
案例4-省市联动
需求:
先有一个省份的下拉选,根据选择省份,从而动态的市下拉选中加载所有的市.
步骤分析:
1.表
2.页面上有两个下拉选 省份的下拉选一般是固定的 页面加载的时候读取所有的省份
3.当省份改变的时候,获取省份的信息,发送一个ajax请求,去市的表中查询相应省份的所有市,然后将他们加载到市下拉选上
4.selectProServlet selectCityServlet
//
技术分析:
json
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。
json格式:
格式1:value可以为任意值
{“key”:value,”key1”:value1}
格式2:e可以为任意值
[e1,e2]
jsonlib工具类,可以使对象转换成json数据
1.导入jar包
2.使用api
JSONArray.fromObject(对象) 数组和list
JSONObject.fromObject(对象) bean和map

/
/
上午回顾:
原生ajax:
1.获取核心对象 XMLHttpRequest
2.编写回调函数
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
alert(xmlhttp.responseText);
}
}
3.open操作 设置访问的方式和路径
xmlhttp.open(“get”,”url”);
4.send操作
xmlhttp.send(“post的参数”)
若有参数需要设置一个头
xmlhttp.setRequestHeader(“content-type”,”form表单enctype属性”)

jquery中ajax
掌握的:
$.get(url,params,fn,type); type:”json”$.post(url,params,fn,type);

理解:
    $.ajax(选项);
        选项:
            url:
            type:
            data:
            success:fn
            error:
            dataType:"json"

json:轻量级的数据格式
格式1:
{“key”:value,”key1”:value}
格式2:
[e1,e2]
jsonlib:
1.导入jar包
2.使用api
JSONArray.formObject(数组或者list);
JSONObject.formObject(bean或者map);

//
获取jquery对象:
$(“选择器”) jQuery(“选择器”);
jquery对象>>dom对象
方式1:
jquery对象.get(index);

方式2:
    jquery对象[index]

dom对象>>jquery对象
$(dom对象)

页面载入
$(function(){})

派发事件
jquery对象.事件(function(){…});

选择器:
#id值 .class值 标签名 [属性] [属性=’值’]
a b:后代 a>b:孩子 a+b:大弟弟 a~b:所有弟弟
:first :last :odd :even :eq|gt|lt(index)
:hidden
:checked :selected
属性和css:
prop|attr
css

文本 标签体
val()
html() text()

文档处理
内部插入
append prepend
外部插入
after before
删除
remove
效果:
隐藏|显示
show() hide()
淡入淡出
fadeIn() fadeOut()
滑入滑出
slideDown() slideUp()

遍历
jquery对象.each(function(){
});

---

ajax:
异步请求
原生的ajax(了解)
1.创建一个核心对象 XMLHttpRequest
2.编写回调函数
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
alert(xmlhttp.responseText);
}
}
3.open操作
xmlhttp.open(“请求方式”,”请求路径”);
4.send操作
xmlhttp.send([参数]);
post请求的参数放在send里面
注意:若请求方式为post且有参数 必须设置一个头
jquery中ajax
掌握:
$.get(url,params,function(data){},type); type:以后常用的是json$.post(url,params,function(data){},type);
了解:
jquery对象.load(…)
理解:
$.ajax(选项)
选项:
url
type
data
success:fn
error:fn
dataType:”json”
/
/

listener(了解) 监听器 filter(★) 过滤器

listener:
监听器
作用:
监听web中中的域对象 ServletContext ServletRequest HttpSession
监听内容:
监听三个对象的创建和销毁
监听三个对象属性的变化
监听session中javabean的状态

注意:listener全部是接口

监听三个对象的创建和销毁
ServletContextListener
ServletRequestListener
HttpSessionListener
监听三个对象属性的变化
ServletContextAttributeListener
ServletRequestAttributeListener
HttpSessionAttributeListener
监听session中javabean的状态
HttpSessionActivationListener(钝化和活化)
HttpSessionBindingListener(绑定和解绑)

使用步骤:
1.编写一个类 实现接口
2.重写方法
3.编写配置文件(大部分都是)

演示各个监听器
监听三个对象的创建和销毁
ServletContextListener
创建:服务器启动的时候,会为每一个项目都创建一个servletContext
销毁:服务器关闭的时候,或者项目被移除的时候
以后用来加载配置文件
ServletRequestListener
创建:请求来的时候
销毁:响应生成的时候
HttpSessionListener
创建:
java中第一次调用request.getSession的时候
jsp访问的时候创建
销毁:
三种情况:
session超时
手动销毁session
服务器非正常关闭
监听三个对象属性的变化(添加 替换 删除)
ServletContextAttributeListener
ServletRequestAttributeListener
HttpSessionAttributeListener
监听session中javabean的状态
注意:这两个接口需要javabean实现.是让javabean感知到自己的状态

    HttpSessionBindingListener(绑定和解绑)
        检测java是否添加到session或者从session中移除
    HttpSessionActivationListener(钝化和活化)
        钝化:javabean从session中序列化到磁盘上
        活化:javabean从磁盘上加载到了session中
        可以通过配置文件修改javabean什么时候钝化
            修改一个项目
                只需要在项目下/meta-info创建一个context.xml
                内容如下:
                    <Context>
                        <!--
                            maxIdleSwap :1分钟 如果session不使用就会序列化到硬盘.
                            directory   :itheima 序列化到硬盘的文件存放的位置.
                        -->
                        <Manager className="org.apache.catalina.session.PersistentManager" maxIdleSwap="1">
                            <Store className="org.apache.catalina.session.FileStore" directory="itheima"/>
                        </Manager>
                    </Context>

//
案例1-自动登录
需求:
登录的时候,勾选自动登录,登录成功之后,关闭浏览器,下一次访问网站的时候完成登录操作(自动登录).
技术分析:
filter
cookie
//
filter:过滤器
过滤请求和响应
作用:
自动登录.
统一编码.
过滤关键字
….
Filter是一个接口
编写filter步骤:
1.编写一个类
a.实现filter接口
b.重写方法
2.编写配置文件
a.注册filter
b.绑定路径
3.测试

Filter接口的方法:
init(FilterConfig config):初始化操作
doFilter(ServletRequest request, ServletResponse response, FilterChain chain):处理业务逻辑
destroy() :销毁操作
filter的生命周期(了解)
filter单实例多线程
filter在服务器启动的时候 服务器创建filter 调用init方法 实现初始化操作
请求来的时候,创建一个线程 根据路径调用dofilter 执行业务逻辑
当filter被移除的时候或者服务器正常关闭的时候 调用destory方法 执行销毁操作.
FilterChain:过滤链
通过chain的dofilter方法,可以将请求放行到下一个过滤器,直到最后一个过滤器放行才可以访问到servlet|jsp
doFilter()放行方法
★url-pattern配置
3种
完全匹配 必须以”/” 开始 例如: /a/b
目录匹配 必须以”/” 开始 以”“结束 例如:/a/b/
后缀名匹配 以”.”开始 以字符结束 例如 : .jsp .do .action
例如:
afilter 路径 /*
bFilter 路径 /demo4
★一个资源有可能被多个过滤器匹配成功,多个过滤器的执行顺序是按照web.xml中filter-mapping的顺序执行的

///
步骤分析:
1.数据库和表
create database day16;
use day16;
create table user(
id int primary key auto_increment,
username varchar(20),
password varchar(20)
);
insert into user values(null,’tom’,’123’);
2.web项目
jar包 工具类 配置文件
3.新建一个登录页面 表单
4.表单提交 loginservlet
接受用户名和密码
调用service完成登录操作,返回值User
判断user是否为空
若不为空,将user放入session中
判断是否勾选了自动登录
若勾选了:
需要将用户名和密码写回浏览器
5.下次访问网站的时候
过滤器拦截任意请求
判断有无指定的cookie
有cookie,获取用户名和密码
调用service完成登录操作,返回user
当user不为空的时候将user放入session中.

当我们换用jack登录的时候发现登录不了
自动登录只需要登录一次:当session中没有用户的时候
访问有些资源是不需要自动登录的(和登录还有注册相关的资源)

修改filter的逻辑:
    首先判断session中是否有user
        若没有 并且访问的路径不是和登录注册相关的时候
            才去获取指定的cookie

///
///
filter总结
filterConfig:(了解)
过滤器的配置对象
作用:
获取全局管理者
获取当前filter的名称
获取当前filter的初始化参数

filter-mapping的子标签(理解)
    servlet-name:匹配那个servlet 值写的是serlvet标签中servlet-name的值
        建议:不要在一个filter中重复的匹配servlet
            例如: serlvet的url-pattern为  /a/b/hello   serlvetname:HelloServlet
                如果filter中的url-pattern  /*
                最好不要在写 servlet-name:HelloServlet

    dispatcher:
        匹配哪种请求
        默认的是REQUEST,一旦显式的写出来哪种请求,默认就不起作用了
            理解
                REQUEST:从浏览器发送过来的请求(默认) 理解
                FORWARD:转发过来的请求 理解

            了解
                ERROR:因服务器错误而发送过来的请求
                INCLUDE:包含过来的请求

//
//
案例2-统一字符编码
需求:
以前我们开发的时候若有参数,第一步都是设置编码,才不会出现乱码,通过过滤器设置,到servlet或者jsp上的时候已经没有乱码问题
技术分析:
filter 配置路径/* 过滤器的第一个位置
在filter中重写getParameter(加强)
步骤分析:
我们只需要在filter中 对request进行加强(例如:只对request.getParameter()进行加强)

方法加强:
    1.继承(获取构造器)
    2.装饰者模式(静态代理)
    3.动态代理

装饰者书写步骤:
    1.要求装饰者和被装饰者实现同一个接口或者继承同一个类
    2.装饰者中要有被装饰者的引用
    3.对需要加强方法进行加强
    4.对不需要加强的方法调用原来的方法即可

加强request.getParameter(String key)
    首先请求的方式不同,处理的方式也不同
        获取请求的方法
        若是get请求
            new String(value.getBytes("iso8859-1"),"utf-8");
        若是post请求
            只需要设置一句话
            request.setCharacterEncoding("utf-8");

最后将包装过的request对象(MyRequest)传递给servlet即可

///
///
关于获取参数的方法
String getParameter(String name);// arr[0]
String[] getParameterValues(String name);// map.get(name)
Map