目录
Ajax
为什么要学习ajax?
我们在此之前使用servlet由客户端直接向服务端发送请求数据 , 每次发送数据都要刷新整个页面 , 这回导致当我们只需要刷新某个局部数据的时候 , 连同整个页面都会一起刷新 , 从而丢失之前的页面数据 , 而ajax就实现了局部刷新。
ajax的作用是什么?
1.不刷新页面而更新网页(局部刷新)
2.在页面加载后从服务器请求数据
3.在页面加载后从服务器接收数据
4.在后台向服务器发送数据
一 如何使用Ajax
1.创建XMLHttpRequest对象
var httpRequest = new XMLHttpRequest() ; //大部分主流浏览器支持
var httpRequest = new ActiveXObject("Microsoft.XMLHTTP") ; //部分浏览器支持
所以为了防止浏览器不兼容的问题 , 我们先进行判断,再创建对应的对象:
<script type="text/javascript">
var httpRequest;
if(window.XMLHttpRequest) {
//在IE6以上的版本以及其他内核的浏览器(Mozilla)等
httpRequest = new XMLHttpRequest();
}else if(window.ActiveXObject) {
//在IE6以下的版本
httpRequest = new ActiveXObject();
}
</script>
2.发送请求
//创建http请求
httpRequest.open("POST", "Servlet1", true);
//因为我使用的是post方式,所以需要设置消息头
httpRequest.setRequestHeader("Content-type", "application/x-www-form-
urlencoded");
//指定回调函数
httpRequest.onreadystatechange = response22;
//得到文本框的数据
var name = document.getElementById("username").value;
//发送http请求,把要检测的用户名传递进去
httpRequest.send("username=" + name);
3.接收响应数据
<script>
<!-- 先创建对象-->
var httpRequest = new XMLHttpRequest() ;
httpRequest.onreadystatechange = function (){
//判断是否响应成功
if (httpRequest.readyState==4&&httpRequest.status==200){
//获取响应数据
let msg = httpRequest.responseText ;
// 得到了后端的响应结果msg 。 就可以把它应用到前端对应的数据中去
}
}
</script>
4.编写一个完整ajax程序
html代码:
创建的div只要用于显示服务器返回的数据用户点击按钮时 , 就触发事件。
<input type="text" id="username">
<input type="button" onclick="checkUsername()" value="检测用户名是否合法">
<div id="result">
</div>
JavaScript代码:
-
创建XMLHttpRequest对象
-
创建http请求
-
把文本框的数据发送给http请求的目标
-
指定回调函数
-
编写回调函数
-
发送http请求
-
回调函数得到http返回的内容,把内容写在div上
<script type="text/javascript">
var httpRequest;
function checkUsername() {
if(window.XMLHttpRequest) {
//在IE6以上的版本以及其他内核的浏览器(Mozilla)等
httpRequest = new XMLHttpRequest();
}else if(window.ActiveXObject) {
//在IE6以下的版本
httpRequest = new ActiveXObject();
}
//创建http请求
httpRequest.open("POST", "Servlet1", true);
//因为我使用的是post方式,所以需要设置消息头
httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//指定回调函数
httpRequest.onreadystatechange = response22;
//得到文本框的数据
var name = document.getElementById("username").value;
//发送http请求,把要检测的用户名传递进去
httpRequest.send("username=" + name);
}
function response22() {
//判断请求状态码是否是4【数据接收完成】
if(httpRequest.readyState==4) {
//再判断状态码是否为200【200是成功的】
if(httpRequest.status==200) {
//得到服务端返回的文本数据
var text = httpRequest.responseText;
//把服务端返回的数据写在div上
var div = document.getElementById("result");
div.innerText = text;
}
}
}
</script>
实现了局部刷新 , 不需要更新整个页面。
过滤器Filter
1.实现步骤
1.实现javax,servlet.filter接口
2.实现方法
public class AllFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
System.out.println("过滤器初始化...");
}
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
// 先强转成父类 , 这样后面才能拿到请求头的信息 , 如session
HttpServletRequest request = (HttpServletRequest) servletRequest ;
HttpServletResponse response = (HttpServletResponse) servletResponse ;
servletRequest.setCharacterEncoding("UTF-8");
servletResponse.setContentType("text/html;charset=utf-8");
//请求放行
filterChain.doFilter(servletRequest , servletResponse);
// 根据登录信息存放在session中 , 我们获取登录信息
User user = (User) request.getSession().getAttribute("User");
if(user==null){//说明没登陆
//重定向到登录页面
}else {
//放行
}
}
@Override
public void destroy() {
}
}
3.在web.xml文件中配置filter
<filter>
<filter-name>AllFilter</filter-name>
<filter-class>com.fs.fillter.AllFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>AllFilter</filter-name>
<!--
1.精准匹配:/LoginServlet(拦截LoginServlet请求被)
2.模糊匹配:
目录匹配:/cat/* (拦截cat目录下所有资源)
后缀名匹配:*.html (拦截所有html资源)
*.do (拦截所有servlet资源.do)
* (拦截所有资源)
注意:* 永远不能出现在中间
-->
<url-pattern>/LoginServlet</url-pattern>
</filter-mapping>