2022-09-01 第二组刘禹彤 学习笔记

打卡44天

 

 

 

###学习内容

4种发送请求的方式

1. 地址栏
2. a标签
3. form表单
4. Lacation.href或window.open（）

ajax

异步刷新（局部刷新），前端技术，给后台发送请求

注意

注意点1：

使用ajax发送请求，页面是不可以通过后台跳页面，如果需要跳页面，也是通过我们前端的JS来跳转

注意点2：

ajax和form表单不能同时使用

ajax：不跳页面

form：一定跳走

异步刷新

• 异步：整个页面不会全部刷新，只有某个局部在刷新
• 向后台发请求，使用ajax（JS原生的ajax）
• ajax发出请求给后台，后台的响应会回到ajax的相应处理函数中
• XMLHttpRequest是ajax的支持对象

let xhr = new XMLHttpRequest();
//设置请求的方式和url地址
xhr.open("method(get/post)","服务器地址（xxx.do）")
//发请求
//只有post请求才有请求体
xhr.send(null/请求体)
//指定xhr的状态变化的处理函数
xhr.onreadystatechange = function(){
//正常接收后台的响应
//4代表一次请求响应执行完毕
  if(this.readyState ===4){
//通过xhr的responseText获取到对应的响应体
       console.log(this.responseText);
}
}

传参

• get---------url地址栏拼接

   xhr.open("Get","valid.do?username="+username)
   xhr.send(null);

• post

// 发送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");

readyState响应码

1. 0 xhr被创建成功，open方法未调用
2. 1 open被调用，未建立连接
3. 2 send被调用，可以获取状态行和响应头
4. 3 可以拿到响应体，响应体加载中
5. 4 响应体下载完成，可以直接使用responseText

JQery--ajax

发送ajax请求

• 发送get请求

$.get（"url?参数" + 值，function(data){
//data就是后台回来的响应体
console.log(data);
}）

• 发送post请求

$.post("valid.do","username=" + username,function (data) {}

• 完整写法

 $.ajax({
                url: "valid.do",
                type: "post",
                data: formData,
                success : function(res) {
                    console.log(res);
                },
                error : function(res) {
                    console.log(res);
                }
            });

• formData

构建一个表单数据对象

formData是JS的内置对象，与JQery无关，与Vue无关

  let formData = new FormData();
            formData.append("username",username);
            formData.append("password",password);
$.ajax({
data: formData,})

json串

• 返回对应数据类型------尤其针对数组和对象
• json串的格式：键值对
• dataType的默认值是字符串

 $.ajax({
                url:"list.do",
                type : "get",
                dataType: "json",
                success:function(data) {
                    $.each(data.list,function(index,item) {
                        $("#info").append(
                            item.id + "---" + item.name + " <br> "
                        );
                    })

axios

• 对原生ajax的一个封装
• ES6语法

请求

• axios发送get请求，请求中如果有参数，还是以一个默认的文档流形式发送，和之前的任何一种请求方式没有任何区别
• axios发送post请求，请求中如果有参数，会把post请求中的请求体转成json串，然后再发送给后台

request.getParameter()方法只能接收默认的文档流中的参数，接不了json串

• axios接收post请求-----从request中获取一个流，缓冲字符输入流

BufferedReader reader = request.getReader();
String line  = reader.readLine();
System.out.println(line);

1.get请求，后台没有对应的对象来封装，不能有私密数据

2.post请求，后台都是有对象跟着的——>username，password-------User

id,name,age,gender,email--------Student

###学习心得

今天学习了ajax，掌握的还可以，异步刷新也理解了原理

###掌握情况：一般