持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第9天，点击查看活动详情
“金秋十月，我要连续30天更文，做劳模，拿手机摄影神器！点击查看活动详情 “即可成功参与 Ajax 是浏览器中的技术：用来实现客户端网页请求服务器的数据
XMLHttpRequest请求
原生的请求数据，基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求。
// 创建 xhr 对象
const xhr = new XMLHttpRequest();
// 调用 xhr.open() 函数
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks');
// 调用 xhr.send() 函数
xhr.send();
// 监听 load 事件
xhr.addEventListener('load', function() {
console.log(xhr.response);//返回的是纯字符串格式的对象
});
主要的4个步骤实现：
- 创建 xhr 对象
- 调用 xhr.open() 函数：指定 请求方式、请求地址
- 调用 xhr.send() 函数：发起ajax请求
- 监听 load 事件
发送GET请求不带参数
//声明XML对象
let xhr = new XMLHttpRequest()
//请求方式、请求地址
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
//发送请求
xhr.send()
//处理响应结果
xhr.addEventListener('load', function () {
//xhr.response 返回的是纯字符串格式的对象
console.log(JSON.parse(xhr.response))//将字符串格式转换成对象格式
})
发送GET请求带参数
get请求参数放在路径末尾
//声明XML对象
let xhr = new XMLHttpRequest()
//请求方式、请求地址 get请求参数放在路径末尾 ?分隔，&链接
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
//发送请求
xhr.send()
//处理响应结果
xhr.addEventListener('load', function () {
//xhr.response 返回的是纯字符串格式的对象
console.log(JSON.parse(xhr.response))//将字符串格式转换成对象格式
})
GET发送的参数有三种情况：1、没有传参数（undefined）
2、传的是字符串a=1&b=2（String）
3、传的是对象(Object)
发送POST请求带参数
let xhr = new XMLHttpRequest()
//设置 请求方式 请求地址
xhr.open('POST', 'http://www.liulongbin.top:3009/api/addbook')
//设置请求参数 post请求发送参数要设置传递参数的格式
//传递a=1&b=1格式
/* xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('bookname=你你你你&author=刘慈欣&publisher=北京人民出版社'); */
//传递json格式
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ bookname: '你我他', author: '123', publisher: '123' }));
//处理响应
xhr.onload = function () {
console.log(JSON.parse(xhr.response))
}
1、post发送请求时要设置传递参数的格式，但是数据的格式是字符串格式还是json格式由后端决定
2、 Content-Type：设置传递数据格式
发送FormData对象数据
//创建FormData对象
let fd = new FormData()
//创建属性
fd.append('name', '123')
document.querySelector('button').onclick = function () {
//创建对象
let xhr = new XMLHttpRequest()
//设置 请求方式 请求地址
xhr.open('POST', 'http://www.liulongbin.top:3009/api/formdata')
//发送请求
xhr.send(fd)
//处理响应结果
xhr.onload = function () {
console.log(JSON.parse(xhr.response))
}
}
POST传递参数三种类型 1、FormData类型
2、object类型
3、String 类型
$.ajax请求
综合写法
$.ajax({
url:'请求路径',
type:'请求方式',
data:'请求数据体',
success: function(backData){
console.log(backData)//处理响应
}
});
GET请求简写法
//get简写
$.get('http://www.liulongbin.top:3009/api/get', { id: 1 }, function (res) {
console.log(res)
})
POST请求简写
//post简写
$.post('http://www.liulongbin.top:3009/api/post', { user: '123', age: 18 }, function (res) {
console.log(res)
})
简写data都省略
axios请求
综合写法
axios({
url:'请求路径',
method:'请求方式',
data: { 'post请求参数'},
params: { 'get请求参数'}
}).then(res=>{
//成功回调
console.log(res)
});
GET请求简写
axios.get('http://www.liulongbin.top:3009/api/get', {
params: {
username: '123',
password: 'qwe'
}
}).then(({ data: res }) => {
console.log(res)
})
注意：get请求不带参数则省略 params: {}
POST请求简写
axios.post('http://www.liulongbin.top:3009/api/post', {
username: '123',
password: 'qwe'
}).then(({ data: res }) => {
console.log(res)
})
注意：post请求一般都带参数，直接写请求的数据，不用data：{}
发送FormData对象数据
//创建formdata对象
let jd = new FormData()
jd.append('name', '张三')
jd.append('age', 12)
//发送axios请求
axios({
url: 'http://www.liulongbin.top:3009/api/formdata',
method: 'post',
data: jd ,
}).then(({ data: res }) => {
//成功回调
console.log(res)
});
1、xios发起请求，返回的数据，自己添加了其他属性，所以只想获取数据的话需要解构
2、其他两个方法，直接返回数据，不需要解构
