一、浏览器缓存问题
1、什么是浏览器缓存
浏览器读取网页内容时,会将图片、CSS、JS文件保存到电脑本地磁盘,下次读取时能够直接从本地加载,以提升浏览速度。
2、优点
- 减少服务器负担,提高网站性能
- 加快客户端网页的加载速度,提升用户体验
- 减少多余网络数据传输
3、为什么清除缓存
- 释放存储空间:缓存文件可能会占用大量存储空间
- 更新数据:某些应用程序可能会定期更新缓存中的数据,以确保显示最新的信息。
- 保护隐私安全
二、Ajax
1、定义
Asynchronous JavaScript And XML:异步的JavaScript和XML。
是不跳转页面、异步载入并改写页面内容的技术,简单理解为通过js向服务器发送请求。
2、Ajax作用
2.1 数据交换
通过AJax可以携带数据向服务器发送请求,获取服务器的响应得数据
2.2 异步交互
在服务器处理逻辑的时候可以在页面进行其他操作,免去等待web服务器响应的时间,给予更连续的用户体验,不加载整个页面的同时与服务器交换数据,
2.2.1 同步与异步的区别
- 数据传输方式不同
同步:数据存在域中(request、session、application),要加载整个页面,浪费网络带宽
异步:数据直接在客户端与服务器之间独立传输(json)。不加载整个页面,响应的内容变少,速度更快 - 是否需要等待页面刷新
同步请求要等待服务器响应,期间不能在页面操作其他组件;异步不需要等待,可以在请求响应期间操作页面
3、常用属性
responseXML:要在servlet中通过response设置响应格式为"text/xml"。
4、使用步骤
- 创建XMLHttpRequest对象
- 定义回调函数
- 规定请求(打开XMLHttpRequest对象)
- 发送请求
get请求
参数跟在open方法的参数url的后面
post请求
post请求也可以不写第二行,直接将参数跟在url后面
5、AJax清除缓存问题
- 在请求地址中增加无意义的参数使地址每次不一样,例如当前得时间毫秒值:
new Data().getTime();
- 在服务器端添加响应头,指明不使用缓存
三、Axios
1、功能
对原生的Ajax进行了封装,简化了原生Ajax的书写
2、使用
2.1 引入Axios的js文件
2.2 使用axios发送请求、获取响应
then内是回调函数,参数res是请求成功后返回的响应对象的变量,后端返回的是json格式。
res的data属性就是解析后的 JavaScript 对象或数组,可以直接访问其属性或元素
axios({
method:"get",
url:""
}).then(res=>{
console.log(res.data);
});
axios({
method:"post",
url:"",
data:"key=value"
}).then(res=>{
console.log(res.data);
})
2.2.1 简化书写axios请求
put和post的第二个参数是请求体,携带数据,也可以省略不写
axios.get("url").then(res=>{
console.log(res.data);
});
axios.post("url","key=value").then(res=>{});
axios.put("url", "key=value").then(res=>{});
axios.delete("url").then(res=>{});
四、JSON
1、概念
JavaScript Object Notation:JavaScript对象表示符。客户端和服务端进行数据交互的轻量级的数据格式(特殊的字符串)
2、作用
- 语法简单(仅仅是字符串),层次结构鲜明
- 轻量级的数据格式作为数据载体,在网络中数据传输,节省网络带宽
3、JSON字符串语法
{ "key1": value1, "key2" : value2, ... "keyn" : valuen }
- 在页面和服务器之间传递的是字符串:
它可以作为字符串拼接在get后面,Java中是通过getParameter()获取json字符串。
responseText属性也是页面访问servlet返回的字符串。 - 用对象转换成JSON字符串,不要自己去写JSON字符串
4、格式转换
格式转换无非在两种环境中:
4.1 在Servlet中:
json对象/java对象<——>json字符串
- 将Java对象转为对应的JSON字符串去传输
User user = new User(101, "zhangsan","123");
String jStr = JSON.toJSONString(user);
- 将传来的JSON字符串转为对应的Java对象去访问
转换为对应的bean类对象
User user = JSON.parseObject(jStr, User.class);
转换为JSON对象
JSONObject jObj = JSON.parseObject(jStr); System.out.println(jObj.get("id"));
4.2 在JavaScript中:
js对象<——>json字符串
- 将js对象转为JSON字符串去传输
var user = {id:101, username:"zhangsan", password:"23"};
var jStr = JSON.stringify(user);
- 将响应来的JSON字符串转为js对象去获取展示数据
var jObj = JSON.parse(xhttp.responseText);
5、例题
5.1 由页面到服务器
<script>
var user = {id:101, username:"zhangsan", password:"23"};
//以字符串格式传输
var jStr = JSON.stringify(user);
const xhttp = new XMLHttpRequest();
xhttp.open("GET", "http://localhost:8080/AJax/JSONServlet2?jStr="+encodeURIComponent(jStr));
xhttp.send();
</script>
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置编码
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
String jStr = request.getParameter("jStr");
System.out.println(jStr); //{"id":101,"username":"zhangsan","password":"23"}
//将json字符串转为java对象
User user = JSON.parseObject(jStr, User.class);
//将json字符串转换为JSON对象,访问属性
JSONObject jObj = JSON.parseObject(jStr);
System.out.println(jObj.get("id"));
}
5.2 由服务器到页面
<script>
const xhttp = new XMLHttpRequest();
xhttp.onload=function (){
var jObj = JSON.parse(xhttp.responseText);
alert(jObj.username);
}
xhttp.open("GET", "http://localhost:8080/AJax/JSONServlet");
xhttp.send();
</script>
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置编码
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
User user = new User(101, "zhangsan","123");
String jStr = JSON.toJSONString(user);
System.out.println(jStr);
out.print(jStr);
out.flush();
out.close();
}
五、Vue
1、概念
Vue是构建界面的渐进式框架,自底向上逐层解析应用,核心是一个双向数据绑定系统,可以免除原生JS的DOM操作。
bootstrop是响应式框架,看见的才渲染,还没看到的就不渲染,提升系统性能
2、Vue的创建
- el:代表这个Vue对象要控制哪个区域,值是css选择器
- data:数据模型
- methods:Vue接管的区域内的事件方法
//创建vue对象
var mainVue = new Vue({
el:'#maindiv', //绑定的模板层maindiv
data:{
//定义的属性,与界面元素绑定
},
create:function (){
//初始化方法
},
methods:{
//Vue的事件方法
}
});
3、Vue的data展示
在页面中获取data数据模型内的数据
- 非vue标签内,使用
{{}}
取值(文本格式) - 在vue标签内,直接写data内的键就可以取值
4、Vue的指令
4.1 v-html:以html的格式来解析data的值
4.2 v-text:直接以普通文本格式获取
//创建vue对象
var mainVue = new Vue({
el:'#maindiv', //绑定的模板层maindiv
data:{
//定义的属性,与界面元素绑定
msg:"hello vue",
url:'<a href="http://www.baidu.com">百度百科</a>'
}
});
4.3 v-bind:为HTML标签绑定设置属性
语法:<标签 v-bind:属性="vue中声明的属性名称"/>
比如href、src、css等
<a v-bind:href="url">百度百科</a>
//创建vue对象
var mainVue = new Vue({
el:'#maindiv', //绑定的模板层maindiv
data:{
//定义的属性,与界面元素绑定
url:"http://www.baidu.com"
}
});
4.4 v-model:绑定数据模型变量
作用:将该标签的value与数据模型中的变量进行绑定
如下,通过修改文本框的值,修改data中的msg变量;达到修改了div中值的效果
//创建vue对象
var mainVue = new Vue({
el:'#maindiv', //绑定的模板层maindiv
data:{
//定义的属性,与界面元素绑定
msg:"hello vue",
}
});
注意:如果被v-bind或v-model绑定了,那么这个变量必须在数据模型中声明。
4.4.1 原理
使用v-model的标签必须可以被修改值,因为要通过修改它来改变数据模型中变量,如果是只读的将无意义。
任何地方展示数据,都是同一个数据模型,外部数据改变就会影响数据模型,进而影响其他地方展示的数据。底层就是重写onchange事件
5.5 v-on:为html元素绑定事件
<body>
<div id="maindiv">
<input type="button" value="单击我" v-on:click="handle()"/>
</div>
</body>
<script>
new Vue({
el:'#maindiv',
// methods:Vue接管的区域内的事件方法
methods:{
handle:function (){
console.log("单击事件!!");
}
}
})
</script>
5.6 v-if、v-else-if、v-else
用于条件性地渲染一块内容,只在指令的表达式返回true的时候渲染
一个成立,就不会去执行剩下两个
<body>
<div id="maindiv">
年龄:<input type="text" v-model="age" />
<br>
<span v-if="age<=35">年轻人</span>
<span v-else-if="age>35&&age<60">中年人</span>
<span v-else>老年人</span>
</div>
</body>
<script>
new Vue({
el:'#maindiv',
data:{
age:20
}
})
</script>
5.6.1 细节:成立才渲染
注意:v-if系列的标签,它是哪个条件成立,才会去渲染哪个标签,如图年龄输入20,剩下两个span标签没有被渲染
5.7 v-show:条件成立显示
与v-if的效果是一致的,实现细节不一样。v-if是条件成立的才渲染,v-show是全都渲染上去,条件成立的显示出来,条件不成立的通过设置display属性为none隐藏起来
<div id="maindiv">
年龄:<input type="text" v-model="age" />
<br>
<span v-show="age<=35">年轻人</span>
<span v-show="age>35&&age<60">中年人</span>
<span v-show>老年人</span>
</div>
</body>
<script>
new Vue({
el:'#maindiv',
data:{
age:20
}
})
</script>
如图所示,下面两个span都渲染了,只是更改了display属性,设置隐藏
5.8 v-for:遍历容器的元素或对象属性
语法:<标签 v-for="变量 in 数组变量">{{变量}}</标签>
<标签 v-for="(变量, 索引) in 数组变量">{{索引}}:{{变量}}</标签>
input标签不能直接使用v-for标签,一般是将其写在input的父标签内,可以使用span、div、li等
<body>
<div id="maindiv">
顾客:<div>
<span v-for="(user, index) in users">
{{index+1}}:{{user.uname}}-{{user.age}}<br>
</span>
</div>
<hr/>
<!-- 绑定复选框 -->
爱好:<span v-for="hb in hobby">
<input type="checkbox" v-bind:value="hb" name="hobby" id="hobby">{{hb}}
</span>
<hr/>
<!-- 绑定下拉列表 -->
所在城市:
<select>
<option v-for="c in city" v-bind:value="c">{{c}}</option>
</select>
</div>
</body>
<script>
new Vue({
el:'#maindiv',
data:{
users:[
{uname:'张三', age:23},
{uname:'李四', age:24},
{uname:'王五', age:25}
],
hobby:['swim','pingpang','shop'],
city:['北京','上海','广州','深圳']
}
})
</script>