前言
AJAX:全程Asynchronous JavaScript And XML 就是异步JS和XML
又称 阿贾克斯
通过AJAX可以在浏览器中向服务器发送异步请求，最大优点：无刷新获取数据
XML（现在已经被JSON取代了）
XML 可扩展标记语言 用来传输和存储数据
HTML是预定义标签，而XML中没有预定义标签，全是自定义标签用来表示一些数据
AJAX特点：
| 优点 | 缺点 |
|---|---|
| 1.无需刷新页面与服务器端进行通信 2.允许根据用户事件更新部分页面内容 | 1.没有浏览历史 2.存在跨域问题 3.SEO不友好 |
HTTP
HTTP (hypetext transport protocol) 协议 （超文本传输协议），协议详细规定了浏览器和万维网服务器之间相互通信的规则 ——约定，规则
请求报文requese
重点是格式与参数
行 POST / s?ie=utf-8 HTTP/1.1
头 Host: atguigu.com
Cookio: name=guigu
Content-type: application/x-www-form-urlencoded
User-Agent: chrome 83
空行
体 username=admin&password=admin
响应报文response
行 HTTP/1.1 200 OK
头 Content-Type: text/html;charset=utf-8
Content-length: 2048
Content-encoding: gzip
空行
体 <html>
<head>
</head>
<body>
<h1>尚硅谷</h1>
</body>
</html>
AJAX基本操作
1.创建对象
const xhr = new XMLHttpRequest();
2.初始化 设置请求方法和url
xhr.open('GET', 'http://127.0.0.1:8000/server'); GET或者POST两种请求方式
3.发送
xhr.send();
4.事件绑定 处理服务端返回的结果
xhr.onreadystatechange = function() {
//判断
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
// 处理服务端返回的结果
result.innerHTML = xhr.response;
}
}
}onreadystatechange事件：
on when当...时候
readystate 是xhr对象中的属性，表示状态 0 1 2 3 4
0——未初始化 1——open方法调用完毕 2——send方法调用完毕
3——服务端返回了部分结果 4——服务端返回了所有结果
change 改变
axios
btn[2].onclick = function() {
axios({
//请求方法
method: 'POST',
//url
url: '/axios-server',
// url参数
params:{
vip:10,
level:30
},
// 头信息
headers: {
a:100,
b:200
},
// 请求体参数
data:{
username: 'admin',
password: 'admin'
}
}).then(response=>{
console.log(response);
//响应状态码
console.log(response.status);
//响应状态字符串
console.log(response.statusText);
//响应头信息
console.log(response.headers);
///响应体
console.log(response.data);
})
}同源策略
来自同一个服务
JSONP(JSON with Padding)
是一个非官方的跨域解决方案
写在最后：这是在学习尚硅谷b站课程ajax时写的笔记
