目录
1、创建Ajax实例对象---let xhr = new XMLHttpRequest();
2、打开一个连接---xhr.open(请求方式,请求路径),其中请求方式为必填参数
①get请求:地址栏请求字符串,要用qs转换js对象---Qs.stringify()
②post请求:参数携带在请求体send()中
设置请求头为表单格式,发送请求时要用qs转换js对象---Qs.stringify()
设置请求头为JSON格式,发送请求时要用JSON转换js对象---JSON.stringify()
3、发送请求---xhr.send();
4、接收响应---xhr.onreadystatechange = function(){ }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入qs -->
<script src="./js/qs-6.9.4.js"></script>
</head>
<body>
<script>
// 1、创建ajax实例对象
let xhr = new XMLHttpRequest();
// 2、打开一个连接,参数:请求方式 请求路径,请求方式必须要写
// 第一种:get有参请求,地址栏查询字符串,使用qs进行转换
let params={
page:1,
pageSize:10
};
let qs=Qs;
let qsObj=qs.stringify(params);
console.log(qsObj,'查询字符串');
xhr.open('get','http://121.199.0.35:8888/index/carousel/findAll'+'?'+qsObj);
// 3、发送请求
xhr.send();
// 第二种:post有参请求,参数携带在请求体中
xhr.open('post','http://121.199.0.35:8888/index/carousel/findAll');
// post-1:设置请求头---表单格式数据
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 3、发送请求
xhr.send(qs.stringify({id:1,name:'zhangsan'}));
// post-2:设置请求头---json格式数据
xhr.setRequestHeader('Content-Type','application/json');
// 3、发送请求
xhr.send(JSON.stringify({id:1,name:'zhangsan'}));
// 4、接收响应
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
console.log(xhr.responseText);
}
}
</script>
</body>
</html>
参数:
1、请求路径:url
2、请求方式:method,默认发送get请求
3、携带参数:data
①get请求:要用qs转换js对象---Qs.stringify()
②post请求
设置请求头为表单格式,发送请求时要用qs转换js对象---Qs.stringify()
设置请求头为JSON格式,发送请求时要用JSON转换js对象---JSON.stringify()
4、成功回调:success(res){ }
5、失败回调:error(err){ }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入jquery -->
<script src="./js/jquery-3.5.1.js"></script>
<!-- 引入qs -->
<script src="./js/qs-6.9.4.js"></script>
</head>
<body>
<script>
let qs=Qs;
$.ajax({
// 请求路径
url:'http://121.199.0.35:8888/user/login',
// 请求方式,默认发的是get请求
method:'post',
// 携带参数
// 表单格式的数据
data:qs.stringify({username:'admin',password:123321}),
// json格式的数据
data:JSON.stringify({username:'admin1',password:123321}),
// 设置请求头
headers:{
// 表单格式
'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8',
// json格式
'Content-Type':'application/json;charset=UTF-8'
},
// 成功的回调
success(res){
console.log(res);
},
// 失败的回调
error(err){
console.log(err);
}
})
</script>
</body>
</html>