查看知识点梳理思维导图
1.原生 ajax GET 请求
2.原生 ajax POST 请求
3.封装 ajax 请求
1、原生ajax GET 请求
步骤:
1、创建xhr
2、监听xhr.onreadystatechange事件 ajax状态发生变化的事件
3、判断ajax请求的状态
4、设置请求方式和url
5、发送请求
<script>
//使用xhr对象发送get方式请求
// 创建xhr
let xhr = new XMLHttpRequest();
// 监听xhr.onreadystatechange事件 ajax状态发生变化的事件
xhr.onreadystatechange = function () {
// 固定写法 readyState 表示 ajax的状态
//ajax的状态总共有(0 1 2 3 4 )五种状态 状态为4表示请求完成 status === 200表示成功
if (xhr.readyState == 4 && xhr.status === 200) {
// xhr.responseText; // 接收响应结果
let res = xhr.responseText; // 结果是JSON字符串
// 转化为数组对象
JSON.parse(res)
}
}
// 调用xhr.open()函数 设置请求方式和url
// 查询字符串的写法 key=value&key=value.... 字符串和接口之间用?隔开
xhr.open('GET', '接口文档url地址')
// 调用xhr.send()函数 发送请求
xhr.send()
</script>
2、原生ajax POST 请求
步骤:
1、创建xhr
2、监听xhr.onreadystatechange事件 ajax状态发生变化的事件
3、判断ajax请求的状态
4、设置请求方式和url
5、告诉服务器请求头(前端提交的是什么类型数据)
6、发送请求
<script>
// 创建xhr对象
let xhr = new XMLHttpRequest();
// 注册事件
xhr.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
let res = JSON.parse(this.responseText)
}
}
// 调用open 设置请求方式和url
xhr.open('POST', '接口文档url地址');
// 请求头 必须写在open和send之间
// 告诉服务器 前端提交数据是什么类型 表示查询字符串类型
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// send里面写 查询字符串 格式:key=value&key=value....
xhr.send('查询字符串')
</script>
3、封装ajax 请求
步骤:
第一大步:
1、创建xhr
2、监听xhr.onreadystatechange事件 ajax状态发生变化的事件
3、判断ajax请求的状态
4、接受响应结果 并且转为数组对象形式
5、调用参数里面的 success函数
第二大步:
1、处理参数中data数据 遍历对象
2、将data数据转为查询字符串
3、判断请求方式时 get 还是 post 并 设置请求方式 发送请求
第三大步:
调用封装的函数 并且 传参
<script>
// 封装一个函数
function ajax(option) {
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
let res = JOSN.parse(this.responseText);
option.success(res) //这里调用success函数
}
};
// 处理data数据 将对象形式的 处理查询字符串形式的
// 因为下面open 或者 send只能加字符串形式
let arr = []
for (let i in option.data) {
// i表示对象的key
// option.data[i]表示对象的值
arr.push(i + '=' + option.data[i]); // ['bookname=aaa', 'author=bbb', ...]
}
//join() 把数组转化为字符串,元素是通过指定的分隔符进行分隔的,如果没有默认为逗号
let querystring = arr.join('&'); // bookname=aaa&author=bbb&publiser=ccc
// toUpperCase() 转大写
let method = option.type.toUpperCase(); // 把请求方式转成大写 识别 post / POST
// 判断请求
if (option.type === 'GET') {
xhr.open('GET', option.url + '?' + querystring);
xhr.send();
} else if (option.type === 'POST') {
xhr.open('POST', option.url);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send(querystring);
}
};
//调用 传参 数数就是数据
ajax({
type: 'GET', //或者 ‘post’
url: '接口文档 url地址,
data: {数据,根据接口文档提供属性},
success: function (res) {}
});
</script>