2022-09-03 第六小组 张宁杰 ajax&axios
一，AJAX
异步刷新（局部刷新），前端技术，可以给后台发请求
异步：整个页面不会全部刷新，只有某个局部刷新
验证用户名存在
使用 ajax 发送请求，页面不可以通过后台跳转
如果需要跳页面，也是通过我们前端的JS来跳转，不可能通过servlet跳转
发请求3种方式
\1. 地址栏
\2. a 标签
\3. form 表单
\4. location.href 或 windows.open()
注意点：
- ajax和form表单不能同时使用
- ajax：不跳页面
- form：一定跳走的
请求体
post请求才有请求体
ajax发起请求，后台给出的响应会回到ajax的响应处理函数中。
readyState：
0： xhr被创建成功，open方法未调用
1： open被调用，建立的连接
2： send被调用，可以获取状态行和响应头
3： 可以拿到响应体，响应体加载中
4： 响应体下载完成，可以直接使用responseText。
代表请求可以正常发送，响应能够正常接收。
案例：
<p>
账号：<input type="text" id="username"><span id="msg"></span>
</p>
<input type="button" onclick="valid()" value="验证">
<script>
function valid() {
let username = document.querySelector("#username").value;
let msg = document.querySelector("#msg");
// 向后台发请求
// 使用ajax，JS原生的ajax
// XMLHttpRequest是ajax的支持对象
let xhr = new XMLHttpRequest();
// console.log(xhr.readyState + "....0");
// 设置请求的方式和url地址
// xhr.open("GET","valid.do?username=" + username);
// console.log(xhr.readyState + "....1")
// 发送POST请求
xhr.open("POST","valid.do");
// POST请求需要设置一下请求头信息
// Content-type，发送的请求的内容的类型
// application/x-www-form-urlencoded 文档流
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 发请求，并且设置请求体
xhr.send("username=" + username + "&password=123456");
// 指定xhr状态变化的处理函数
xhr.onreadystatechange = function() {
// console.log(this.readyState);
// 正常接收后台的响应
if(this.readyState === 4) {
// 通过xhr的responseText获取到对应的响应体
// console.log(this.responseText);
switch (this.responseText) {
case "1":
msg.innerHTML = "用户名可用";
break;
case "0":
msg.innerHTML = "用户名已存在";
}
}
}
}
</script>
@WebServlet(name = "ValidServlet", value = "/valid.do")
public class ValidServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("valid.do已经接受到请求...");
PrintWriter out = response.getWriter();
// 后台给前台AJAX的响应
String username = request.getParameter("username");
if(Objects.equals(username,"admin")){
// 0代表不可用 1代表可用
out.write("0");
}else {
out.write("1");
}
out.flush();
out.close();
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
}
用 JQuery 实现验证
账号：<input type="text" id="username"><span id="msg"></span>
<button id="validBtn">验证</button>
<script src="static/js/jquery-3.0.0.min.js"></script>
<script>
$(function() {
$("#validBtn").click(function() {
let username = $("#username").val();
let password = "123456";
// formData构建一个表单数据对象
// formData是JS的内置对象，和JQuery无关，和Vue无关
let formData = new FormData();
formData.append("username",username);
formData.append("password",password);
// 发送ajax请求
// 3.完整写法
$.ajax({
url: "valid.do",
type: "post",
data: formData,
success : function(res) {
console.log(res);
},
error : function(res) {
console.log(res);
}
});
// 2.发送post请求
// $.post("valid.do","username=" + username,function (data) {
// if(data == "1") {
// $("#msg").html("用户名可用...")
// }
// if(data == "0") {
// $("#msg").html("用户名已存在...")
// }
// });
// 1.发送get请求
// $.get("valid.do?username=" + username,function(data) {
// // data就是后台回来的响应体
// console.log(data);
// if(data == "1") {
// $("#msg").html("用户名可用...")
// }
// if(data == "0") {
// $("#msg").html("用户名已存在...")
// }
// });
});
})
</script>
案例：输出学生列表
<button id="showStu">显示学生列表</button>
<div id="info">
</div>
<script src="static/js/jquery-3.0.0.min.js"></script>
<script>
$(function(){
$("#showStu").click(function() {
$.ajax({
url:"list.do",
type : "get",
// dataType的默认值是字符串
// json串
dataType: "json",
success:function(data) {
// console.log(data);
// console.log(data.id);
// console.log(data.name);
// console.log(data.list);
$.each(data.list,function(index,item) {
$("#info").append(
item.id + "---" + item.name + " <br> "
);
})
// let info = $("#info");
// for(let i = 0;i < data.length;i++){
// console.log(i);
// }
}
});
});
})
</script>
@WebServlet(name = "ListStudentServlet", value = "/list.do")
public class ListStudentServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<String> stus = Arrays.asList("aaa","bbb","ccc","ddd","eee","fff");
PrintWriter out = response.getWriter();
Student student = new Student(1001,"zhangsan");
List<Student> list = new ArrayList<>();
list.add(new Student(1001,"zhangsan1"));
list.add(new Student(1002,"zhangsan2"));
list.add(new Student(1003,"zhangsan3"));
list.add(new Student(1004,"zhangsan4"));
student.setList(list);
out.print(JSON.toJSONString(student));
/*
* json串的格式：键值对
*
* {"id":1001,"name":"zhangsan","stus":{aaa,bbb,ccc...}}
*
* */
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
}
二，AXIOS
对原生ajax的一个封装
ES6语法。Promise语法
axios发送get请求，
请求中如果有参数，还是一个默认的以文档里的形式发送，和之前的任何一种请求方式没有任何区别。
axios发送post请求，
请求中如果有参数，会把post请求的请求体转成json串，然后再发给后台。
案例：
<div id="app">
<button @click="get">axios_get</button>
<button @click="post">axios_post</button>
</div>
<script src="static/js/vue.js"></script>
<script src="static/js/axios.min.js"></script>
<script>
/*
* axios发送get请求，
* 请求中如果有参数，还是一个默认的以文档里的形式发送，和之前的任何一种请求方式没有任何区别。
* axios发送post请求，
* 请求中如果有参数，会把post请求的请求体转成json串，然后再发给后台。
*
* */
const app = new Vue({
el:"#app",
data:{},
methods:{
post(){
// 发送 post
axios.post("vue.do",{
"name":"a",
"pass":"123",
}).then(function (response){
console.log(response);
});
},
get(){
// 发送get请求
axios.get("vue.do?username=admin&password=666666").then(function(response){
console.log(response);
console.log(response.data);
}).catch(function(err){
console.log(err);
});
}
},
});
</script>
@WebServlet(name = "VueServlet", value = "/vue.do")
public class VueServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("vueSevlet已经接到了请求...");
// rquest.getParameter()方法只能接收默认的文档流中的参数，接不了json串。
// String username = request.getParameter("username");
// System.out.println("username--->" + username);
// 从request中获取了一个流，缓冲字符输入流
/*
1、get请求，后台没有对应的对象来封装，不能有私密数据。
2、post请求，后台都是有对象跟着的。username,password-----User
id,name,age,gender,email-----------Student
*/
BufferedReader reader = request.getReader();
String line = reader.readLine();
System.out.println(line);
/*
封装对象的前提：
json串中的数据的key和对象的属性名要一致。
是根据set方法的名封装的。
*/
User user = JSON.parseObject(line, User.class);
System.out.println(user);
// String sql = "select * from user where username = ? and password = ?"
// userdao.get(sql,user.getUsername(),user.getPassword());
PrintWriter out = response.getWriter();
out.print("hello axios and vue...");
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
}
