2022-9-1 异步请求

异步请求

ajax：异步刷新（局部刷新），前端技术。给后台发请求。
异步：整个页面不会全部刷新，只有某个局部在刷新。
验证用户名是否存在。
刷新：

1.原生js的ajax

get 请求

（1）步骤：

① 创建 ajax对象 ( xhr 对象 )；
② 创建请求 ( 调用 xhr.open() 函数 )；
③ 发送请求 ( 调用 xhr.send() 函数 )；
④ 监听 xhr.onreadystatechange 事件 ( 监听状态，接收响应 )。

    // 1. 创建ajax对象（异步对象）
    let xhr = new XMLHttpRequest();
    // 2. 创建请求
    // xhr.open('请求方法','url地址','是否采用异步处理去访问接口true/false')
    xhr.open("GET", "xxx",true);
    // 3. 发送请求
    xhr.send();
    // 4. 监听状态，接收响应
    xhr.onreadystatechange = function() {
        // 4.1 监听 xhr 对象的请求状态 readyState ；与服务器响应的状态 status
        if (xhr.readyState === 4&& xhr.status === 200) {
            // 4.2 使用xhr.response 获取服务器返回的数据
            console.log(xhr.response);
        }
    };  

post 请求

（1）步骤：

① 创建 ajax对象 ( xhr 对象 )；
② 创建请求 ( 调用 xhr.open() 函数 )；
③ 设置 Content-Type 属性（固定写法）；
④ 发送请求 ( 调用 xhr.send() 函数 )，同时指定要发送的数据；
⑤ 监听 xhr.onreadystatechange 事件 ( 监听状态，接收响应 )。

    // 1. 创建对象
    let xhr = new XMLHttpRequest(); 
    // 2. 创建请求
    xhr.open("POST", "xxxx"); 
    // 3. 设置 Content-Type 属性（固定写法）
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    // 4. 发送请求，同时将数据以查询字符串的形式，提交给服务器
    xhr.send('username='+ username); 
    // 5. 监听 onreadystatechange 事件，接收响应数据
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200)
            console.log(xhr.response);
        }
    }

2.jquery

先要引入依赖

// 1.发送get请求
// $.get("valid.do?username=" + username,function(data) {
//     // data就是后台回来的响应体
//     console.log(data);
//     if(data == "1") {
//         $("#msg").html("用户名可用...")
//     }
//     if(data == "0") {
//         $("#msg").html("用户名已存在...")
//     }
// });

// 2.发送post请求
// $.post("valid.do","username=" + username,function (data) {
//     if(data == "1") {
//         $("#msg").html("用户名可用...")
//     }
//     if(data == "0") {
//         $("#msg").html("用户名已存在...")
//     }
// });

// 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);
    }
});

3.Axios（ajax i/o system）：

这不是一种新技术，本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端，只不过它是基于Promise的，符合最新的ES规范。具备以下特点：

• 在浏览器中创建XMLHttpRequest请求
• 在node.js中发送http请求
• 支持Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消要求
• 自动转换JSON数据
• 客户端支持防止CSRF/XSRF(跨域请求伪造)

1.get

方法一：

 //请求格式类似于 http://localhost:8080/goods.json?id=1
this.$axios.get('/goods.json',{
    			params: {
                    id:1
                }
			}).then(res=>{
					console.log(res.data);
				},err=>{
					console.log(err);
			})

方法二：

this.$axios({
		method: 'get',
		url: '/goods.json',
    	params: {
            id:1
        }
	}).then(res=>{
		console.log(res.data);
	},err=>{
		console.log(err);
	})

2.post

post请求一般分为两种类型

1.form-data 表单提交，图片上传、文件上传时用该类型比较多

2.application/json 一般是用于 ajax 异步请求

方法一：

this.$axios.post('/url',{
				id:1
			}).then(res=>{
				console.log(res.data);
			},err=>{
				console.log(err);
			})

方法二：

$axios({
	method: 'post',
	url: '/url',
	data: {
		id:1
	}
}).then(res=>{
	console.log(res.data);
},err=>{
	console.log(err);
})

方法三：

let data = {
	//请求参数
}

let formdata = new FormData();
for(let key in data){
	formdata.append(key,data[key]);
}

this.$axios.post('/goods.json',formdata).then(res=>{
	console.log(res.data);
},err=>{
	console.log(err);
})

4种发请求的方式：
1、地址栏
2、a标签
3、form表单
4、location.href或window.open()

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

注意点2：
ajax和form表单不能同时使用。
ajax：不跳页面。
form：一定跳走的

请求体：post请求才有请求体。

ajax发起请求，后台给出的响应会回到ajax的响应处理函数中。

readyState：
0：      xhr被创建成功，open方法未调用
1：      open被调用，建立的连接
2：      send被调用，可以获取状态行和响应头
3：      可以拿到响应体，响应体加载中
4：      响应体下载完成，可以直接使用responseText。
         代表请求可以正常发送，响应能够正常接收。

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