开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情
1 前言
前面记录了一下axios的一些知识（前端接口联调系列之axios的使用 ），现在再来记录一下ajax的使用，因为axios、fetch这些好用的接口请求库也都是由ajax封装而来，所以了解ajax还是很有必要的。
2 定个小目标，先启动一个后端服务
为了方便调试调试ajax请求，我先启动一个express后端框架。
启动的方法，我们可以参考这个视频：www.bilibili.com/video/BV1WC… 。
后面会把我总结的源码的贴在文章末尾，大家直接启动服务就行。
这里说一下，对于源码里面的服务：
如果是windows系统，启动命令：nodemon src/server.js
而mac系统的，启动命令：npx nodemon src/server.js（我也不知为啥前面要加个npx，但是这样就可以启动起来）
3 get请求
//绑定事件
btn.onclick = function(){
//1. 创建对象
const xhr = new XMLHttpRequest();
//2. 初始化 设置请求方法和 url
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
//3. 发送
xhr.send();
//4. 事件绑定 处理服务端返回的结果
// on when 当....时候
// readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
// change 改变
xhr.onreadystatechange = function(){
//判断 (服务端返回了所有的结果)
if(xhr.readyState === 4){
//判断响应状态码 200 404 403 401 500
// 2xx 成功
if(xhr.status >= 200 && xhr.status < 300){
//处理结果 行 头 空行 体
//响应
// console.log(xhr.status);//状态码
// console.log(xhr.statusText);//状态字符串
// console.log(xhr.getAllResponseHeaders());//所有响应头
// console.log(xhr.response);//响应体
//设置 result 的文本
result.innerHTML = xhr.response;
}else{
}
}
}
}
4 post请求
//绑定事件 - 鼠标移入框内就发送Post请求
result.addEventListener('mouseover', function () {
//1. 创建对象
const xhr = new XMLHttpRequest()
//2. 初始化 设置类型与 URL
xhr.open('POST', 'http://127.0.0.1:8000/server')
//设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.setRequestHeader('name', 'atguigu')
//3. 发送
xhr.send('a=100&b=200&c=300')
// xhr.send('a:100&b:200&c:300');
// xhr.send('1233211234567');
//4. 事件绑定
xhr.onreadystatechange = function () {
//判断
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
//处理服务端返回的结果
result.innerHTML = xhr.response
}
}
}
})
参考：
1 ajax简介.www.w3school.com.cn/js/js_ajax_…
2 尚硅谷ajax教程.www.bilibili.com/video/BV1WC…
