XMLHttpRequest 对象
异步的与服务器交换数据
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
//原生Ajax代码体验---XMLHttpRequest 对象
// 1 创建 xhr 实例
const xhr = new XMLHttpRequest();
// 2 调用open方法 （指定请求的类型、指定请求的url）
xhr.open("GET", "http://www.itcbc.com:3006/api/getbooks");
// 3 开始发起请求
xhr.send();
// 4 监听 数据响应
xhr.addEventListener("load", function () {
// 获取响应结果
// 本质上返回字符串类型是正确的
// axios别人封装的库， 别人帮我们重新把 JSON字符串 转成了对象而已
console.log(this.response); //类型字符串
console.log(JSON.parse(this.response));
});
原生Ajax-get-携带参数
const xhr=new XMLHttpRequest();
// 原生的ajax get请求 携带参数
xhr.open("GET","http://www.itcbc.com:3006/api/getbooks?bookname=传智亚瑟");
xhr.send();
xhr.addEventListener("load",function () {
console.log(this.response);
})
原生Ajax-POST-携带参数-字符串类型
// 请求的三大关键 1 请求地址 2 请求的方式 3 请求的参数？？？
// post 请求 传递的参数
// 1 只能放在 send中
// 2 传递的参数的格式 3种格式
// 2.1 字符串的形式 a=1&b=2&c=3 告诉后端（请求头 ） 我传递的数据是格式1
// 2.2 json的格式 { a:1,b:2} 告诉后端（请求头 ） 我传递的数据是格式2
// 2.3 FormData的格式 告诉后端（请求头 ） 我传递的数据是格式3
const data = {
bookname: "有没有",
author: "我自己你不知道",
publisher: "斑马出版社",
// 改为只有自己知道的key 长度 6-20
appkey: "xseresd",
};
// 将对象 转成 字符串
const usp = new URLSearchParams(data);
// const query = usp.toString(); //这个可以省略
const xhr = new XMLHttpRequest();
xhr.open("POST", "http://www.itcbc.com:3006/api/addbook");
// usp 本身是一个对象格式来着， 调用send 代码的时候 ，默认将 usp 转成 字符串
// send 帮我们调用了它 usp.toString()
// 设置 请求头
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.send(usp); //因为send默认将usp转成字符串了,下面一行代码可以省略
// xhr.send(query); // post请求的参数 只能放在 send
xhr.addEventListener("load", function () {
console.log(this.response);
});
原生Ajax-POST-携带参数-JSON类型
// 请求的三大关键 1 请求地址 2 请求的方式 3 请求的参数？？？
// post 请求 传递的参数
// 1 只能放在 send中
// 2 传递的参数的格式 3种格式
// 2.1 字符串的形式 a=1&b=2&c=3 请求头 我传递的数据是格式1
// 2.2 json的格式 { a:1,b:2} 请求头 我传递的数据是格式2
// 2.3 FormData的格式 请求头 我传递的数据是格式3
const data = {
bookname: '你不知道',
author: '我自己你不知道',
publisher: '斑马出版社',
appkey: 'xseresd',
};
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.itcbc.com:3006/api/addbook');
xhr.setRequestHeader('content-type', 'application/json'); // 使用了 json格式
// 把对象转成 json字符串的格式 再去传递 ！ -axios 内部做了封装处理 ！所以我们 不用去转化
// xhr.send(data);
xhr.send(JSON.stringify(data));
xhr.addEventListener('load', function () {
console.log(this.response);
});
原生Ajax-POST-携带参数-FormData类型
/*
FormData post 提交
1 input标签 结合 file'类型 用户选择要上传的文件
2 会触发input事件change
3 this.files获取到加载到浏览器内存文件 数组
4 new FormData 对象 调用 append 把文件添加进去
5 使用ajax原生的代码。。。。。
*/
// post 请求 传递的参数
// 1 只能放在 send中
// 2 传递的参数的格式 3种格式
// 2.1 字符串的形式 a=1&b=2&c=3 告诉后端（请求头 ） 我传递的数据是格式1
// 2.2 json的格式 { a:1,b:2} 告诉后端（请求头 ） 我传递的数据是格式2
// 2.3 FormData的格式 告诉后端（请求头 ） 我传递的数据是格式3 不需要自己单独指定，原生的代码内部会帮我们做
const input = document.querySelector('input');
input.addEventListener('change', function () {
const file = this.files[0];
const fd = new FormData();
fd.append('avatar', file);
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.itcbc.com:3006/api/formdata');
// xhr.setRequestHeader('content-type', 'multipart/form-data'); // 使用了 formdata
xhr.send(fd);
xhr.addEventListener('load', function () {
console.log(this.response);
});
});
