ajax 是一种创建交互式网页应用的网页开发技术。其中最核心的依赖是浏览器提供的XMLHttpRequest 对象，是这个对象使得浏览器可以发出 HTTP 请求与接收 HTTP 响应。实现了在页面不刷新的情况下和服务器进行交互
new XMLHttpRequest() |
生成一个 XMLHttpRequest 对象 |
open(‘请求类型’ , ’URL’ , ’请求方式’) |
|
send() |
发送请求 |
onreadystatechange |
该方法可以定义响应执行函数，当 readyState 属性发 生变化时会自动调用该方法。 |
readyState |
交互流程，有 5 个阶段
|
status |
HTTP 响应状态码 200 ：OK（请求成功） 403 ：Forbidden（禁止） 404 ：Page not found（未找到） |
responseText |
响应文本（返回的数据） |
setRequestHeader(‘头部名称’ , ‘头部值’) |
请求头，向请求添加 HTTP 头部 |
ajax使用方法
<script> let xhr = new XMLHttpRequest(); xhr.open('get', 'js/index.json', true); xhr.send(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { let text = xhr.responseText; console.log(text); let data = JSON.parse(text); console.log(data); } }; </script>
post请求方式
<script> let obj = { phone_number: "15836028325", password: "111111" } // 1. 创建对象 let xhr = new XMLHttpRequest(); // 2. 创建请求 xhr.open("POST", "https://zx.nh2r.top/api/admin/login", true); // 3. 设置 Content-Type 属性（固定写法） xhr.setRequestHeader('Content-Type', 'application/json'); // 4. 发送请求，同时将数据以查询字符串的形式，提交给服务器 xhr.send(JSON.stringify(obj)); // 5. 监听 onreadystatechange 事件，接收响应数据 xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200){ console.log(JSON.parse(xhr.response)); } } </script>
get 与post 的区别：
- get 是将参数包含在 URL 中明文传输，不安全。而 post 是通过 request body 传递参数， 对于用户来说是不可见的，所有更安全。
- get 传输数据量较小，因为 URL 有长度限制，post 传输的数据量较大，一般被默认为不受限制。
- 对于参数的数据类型，get 只接受 ASCII 字符，而 post 没有限制。
- get 请求时只会产生一个 TCP 数据包，get 比 post 更快。
- get 请求参数会被完整保留在浏览器历史记录里，而 post 中的参数不会被保留。
同步与异步的区别：
同步：在进程中任务未结束时，需等待结束才能执行下一个任务。
例如：在高速上，只有一条车道，如果前方发生车祸，那么后方的车需要等待前方 处理好才能继续通行。
异步：在进程中任务未结束但在等待的过程中可以先去执行下一个任务。
例如：还是在高速上，有两条车道，如果前方发生车祸，那么后方的车可以从另一 条车道继续通行。
