概念:异步的js和xml
作用:与后台服务器交互,进行数据传输,实现页面的局部刷新
应用:
1.创建xhr实例对象
2.设置请求头,打开请求链接
3.设置请求体,并发送请求
4.监听连接状态的改变,做出响应
例:
<!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>ajax</title>
<script>
//1.创建一个xhr实例对象
var xhr = new XMLHttpRequest();
//2.设置请求头,打开请求连接
xhr.open('get','https://api.muxiaoguo.cn/api/dujitang');
//3.设置请求体,并发送请求
xhr.send();
//4.监听连接状态的改变,做出响应
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status ===200){
console.log(xhr.response);
}
}
</script>
</head>
<body>
</body>
</html>
传参:
get
参数格式:查询字符串(表单数据)application/x-www-form-urlencoded
传参位置:拼接到url地址后面,用? 拼接
post
参数格式:查询字符串(表单数据)、json数据application/json
传参位置:send(data)参数放在http请求报文的请求体
修改当前请求的参数格式
1.请求头
xhr.setRequestHeader('Content-Type','application/json')
2.将参数转码(和content-type保持一致)
对象-->查询字符串
qs.stringify(data);
对象-->json字符串
JSON.stringify(data)
json字符串-->对象
JSON.parse(data)
认证:
xhr.setRequestHeader('Authorization',token);