AJAX
第一章 原生js的AJAX应用
1-1传统请求的缺点
如果我们仅仅只是需要更新系统中的某一小块内容,按照我们传统的形式是将请求发送到服务器取得最新的数据,服务器为我们的浏览器做出响应,我们的浏览器中的所有的内容都需要一起刷新一次.
传统的请求方式也叫做全局刷新.
现在我们急需局部刷新的技术来完成以上操作.
1-2 AJAX技术应用带来的好处
ajax是基于JavaScript语言扩展出来的局部刷新的技术
ajax能够将请求发送到后台(servlet),然后从后台(servlet)取得数据,并且做的是局部刷新的操作.
1-3 原生js的AJAX实现步骤
1-4 ajax的同步和异步操作
1-5 ajax以get请求方式传递参数
1-6 ajax以post请求方式传递参数
注意:post请求需要加上
xmlhttp.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
1-7使用ajax中避免浏览器缓存的方式
(1)随机数方式:
(2)时间戳方式:
第二章JQuery支持的AJAX
2-1 $.ajax方式
$.ajax({
//type:“post”,
url : “myServlet1.do”,
dataType : “text”,
data : “username=张三&password=123”,
success : function(data) {
document.getElementById(“xs”).innerHTML=data;
},
error : function() {
alert(“服务器崩溃了”);
}
});
2-2
.
g
e
t
方
式
和
.get方式和
.get方式和.post方式
$.get(
“myServlet1.do”,
{“username”:“lisi”,“password”:“234”},
//“username=zs&password=123”,
function(data) {
document.getElementById(“xs”).innerHTML=data;
},
“text”
);
2-3 实战:通过ajax请求验证账号是否存在
第三章 JSON
{“key1”:”value1”,”key2”:”value2”}
{key1:”value1”,num1:100}
在实际项目开发中
key:建议加上双引号
value:普通文本必须加双引号,数值不用加双引号
{“str1”:”abc”,”num1”:100}
3-1 ajax以json格式传递参数
传递参数,我们以传统的形式或者是json的形式传递都可以,未来实际项目开发中都会经常用到.
3-2 ajax以json格式接收返回值(json的拼接)
(1)接收单个值
(2)接收多个值
(3)接收单个对象
(4)接收多个对象
(5)接收集合
3-3 实战:省市联动
一对多,一个省份里面包含多个城市
一个城市只能从属于一个省份
省份是一
城市是多
我们习惯于使用外键来建立表与表之间的关系
面试时问你这两张表是由哪张表来维护关系,就是问你在哪张表上建立外键
以下两张表,由城市表来维护关系.
永远是在多的一方建立外键
换句话说,永远是由多的一方来维护关系
省份表 province
id name
1 辽宁
2 吉林
3 黑龙江
城市表 city
id name pid
1 沈阳 1
2 大连 1
3 本溪 1
4 长春 2
5 齐齐哈尔 3
3-4$.getJSON的使用
第四章ajax的跨域操作
4-1 什么是跨域操作
对于我们ajax以前的访问后台的路径,都是访问的是自己项目的后台
以前的路径
观察以上访问路径,其中的3个元素
协议ip端口号改变其中一种,就是跨域操作
http://192.168.1.2:8088/ajax2/myServlet1.do
也就是说,我们以前传统的操作,发出的请求都是从自己的后台取数据,跨域操作指的就是,发出请求到别人家的后台去取数据.
4-2 跨域操作案例
天气预报
4-3 实际项目开发中跨域的应用
我们现在创建的包结构来为类做划分,方便管理
比如
util包
domain包
servlet包
我们以后做分布式开发(dubbo+zookeeper)
需要我们的项目是一种聚合结构
我们做的是为包划分项目结构
util项目
domain项目
servlet项目
1.过滤器Filter属于Servlet规范中的一员,过滤器在开发中的作用是什么*
1.过滤字符编码
2.拦截请求
2.过滤器Filter可以在目标程序之前以及之后都可以加入过滤代码*
目标程序 可以理解为目标servlet 比如执行过滤器链的操作,先执行过滤器1234,再执行目标servlet,再返回来4321
3.怎么写一个过滤器*
package com.wkcto.filter;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
public class Filter1 implements Filter {
@Override
public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain)
throws IOException, ServletException {
System.out.println("这是filter1入口");
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
chain.doFilter(req, resp);//执行放行了动作
System.out.println("响应回来了又经过了myServlet");
}
}
注意过滤器在XML配置url-pattern和服务器一样
4.能够独立编写登录验证的过滤器以及字符集过滤器*
能
不能
5.过滤器的方法包括:init、doFilter、destroy,其中doFilter为过滤器核心方法*
用chain调用doFilter方法执行放行操作
6.过滤器的生命周期是怎样的?*
对应启动服务器与关闭服务器
7.在过滤器的doFilter方法当中使用chain.doFilter(request,response)来继续执行下一个目标程序*
这操作叫放行
8.通过FilterConfig在web.xml文件中可以给过滤器传值*
可以传4种url-pattern植 /abc/myServlet1.do , /abc/* , /* , *.do
9.过滤器的url-pattern通常采用通配符的方式配置*
理解 过滤器其实是一种先拦截再放行的过程, url-pattern和服务器的一样可以达到拦截, 执行chain.doFilter(req,resp)可以达到放行,这样就可以访问到后台了。
10.符合同一匹配规则路径的多个Filter,它们的执行优先级是怎样的*
xml配置自上而下执行
11.监听器Listener也属于Servlet规范中的一员。*
知道
12.怎么写一个监听器,实现步骤*
package com.wkcto.listener;
import javax.servlet.http.HttpSessionEvent;
import javax.servlet.http.HttpSessionListener;
public class Listener1 implements HttpSessionListener {
@Override
public void sessionCreated(HttpSessionEvent event) {
System.out.println("session创建了");
}
@Override
public void sessionDestroyed(HttpSessionEvent even) {
System.out.println("session销毁了");
}
}
第二步骤:在xml中加上 com.wkcto.listener.Listener1配置
第三部,新建一个jsp文件测试,在浏览器段输入jsp地址
13.Servlet规范中提供了哪些常见的监听器(创建与销毁时间)。*
ServletContextListener :开启服务器与关闭服务器 对应 创建与销毁
ServletRequestListener :在浏览器端输入地址敲回车发生请求的时候创建(也就是说当请求发送到项目),服务器响应的时候销毁
通过转发操作可以延长它的寿命。
HttpSessionListener:并不是执行代码request.get session的时候创建,在jsp中,而是在浏览器发生请求的时候就创建了。
关闭服务器的时候session对象销毁,关闭
浏览器的时候不销毁,jssionID会销毁,此时会话失效,session对象并没有销毁 在jsp 中执行session.invalidate()
的方法的时候session对象销毁。
14.ServletContextListener当中的方法什么时候执行*
开启服务器和关闭服务器。
15.HttpSessionListener当中的方法什么时候执行*
public void sessionCreated(HttpSessionEvent event) 在浏览器发生请求的时候就执行了。
public void sessionDestroyed(HttpSessionEvent even) 执行session.invalidate()时候执行此方法
16.ajax 啊假克斯 是一门局部刷新的技术。在实际开发中的步骤为:
1.创建核心对象
xmlhttp:new XMLHttpRequest()
实现ajax技术的核心对象,所有的ajax的属性和方法的调用都是由该对象发起
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.创建回调函数
/*
xmlhttp.onreadystatechange:
创建ajax的回调函数,ajax的回调函数指的是我的请求先发送到后台,先执行后台代码,再执行函数体的内容
*/
xmlhttp.onreadystatechange = function() {
/*
if:回调函数的执行条件
xmlhttp.readyState:请求的状态码 码值为4 表示请求成功
xmlhttp.status:响应的状态码 码值为200 表示响应成功
综上所述,回调函数的执行条件为 当请求成功并且响应成功的基础上,我们才能够执行回调函数的函数体
*/
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//xmlhttp.responseText:表示接受后台以响应流的形式传递回来的返回值
var data = xmlhttp.responseText;
document.getElementById("msg").innerHTML = data;
}
}
//3.设置请求信息
/*
xmlhttp.open:设置请求的基本信息
参数1:请求方式 GET/POST
参数2:请求路径
参数3:设置请求是同步还是异步
true:异步
我们上面的ajax代码和下面的alert代码分别独立的执行
在执行ajax的过程中(睡觉),没有影响到alert弹框
alert弹框后,也没有影响到ajax的执行
全程为两根线程,一根负责执行ajax,一根负责执行alert
彼此之间互不影响
false:同步
传统的执行模式,下面的代码(alert)必须等待上面的代码(ajax)执行完毕之后才能执行
代码按照上下的顺序依次执行
全程一根线程,按照上下顺序执行
未来我们的实际项目开发,使用异步操作会大大的增加我们的用户体验,
但是在遇到特殊需求的时候,也会使用到同步操作
*/
xmlhttp.open("GET", "myServlet1.do?str1=aaa&str2=bbb&str3="+new Date().getTime(), false);
//以下代码为post传递参数必加的代码,位置在open和send方法中间
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//4.发送请求
//xmlhttp.send:发送请求
xmlhttp.send("str1=ccc&str2=ddd");
设置请求实际上传递的是2个参数,加上这个参数str3="+new Date().getTime()是解决浏览器出现缓存问题用的
浏览器缓存的弊端是,我们访问的数据不是最新的数据,优点是,访问速度快。
-
-
- 如果servlet接收的请求为传统的全局刷新的请求,那么我们以下的响应流就是为浏览器响应回数据(html代码)
- 如果servlet接收的请求为使用ajax技术发送的局部刷新的请求,那么我们以下的响应流就是为ajax提供返回值
-
out.print的内容就是返回值
-
1.使用AJAX发送异步请求有什么好处*
知道
不知道
2.AJAX是如何实现可以发送异步请求的,它的原理是什么*
理解
不理解
3.什么是同步请求,什么是异步请求*
理解
不理解
4.实现AJAX异步请求的核心对象是:XMLHttpRequest*
知道
不知道
5.会编写代码发送ajax get和post请求*
会
不会
6.在什么情况下,AJAX的异步请求必须设置为同步请求*
知道
不知道
7.能够使用jQuery的 . a j a x ( ) , .ajax(), .ajax(),.get(),$.post()发送请求*
能
不能
8.能够使用jQuery的$.getJSON()*
能
不能
9.能够使用jQuery解决AJAX跨域问题*
能
不能
10.能够使用jQuery AJAX实现省市联动效果*
能
不能
前段给后端传的是查询条件,后端给前段反馈的是查询结果