这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战
在浏览器中我们可以通过let xml = new XMLHttpRequest() 构造函数原生支持XHR对象。
如何使用XHR
首先我们要调用open()方法，接收3个参数，分别为请求URL、表示请求是否异步的布尔值，以及请求类型，其中请求类型中有get、post等请求方式。我们需要注意，只能访问同源URL，这里指的是域名相同、协议相同、端口相同。如果有任何不相同的话，就会抛出错误。
demo.js
xhr.open("post", "demo.php", false)
// 发送定义好的请求,需要调用send方法
xhr.open("get", "zss.php", false);
xhr.send(null)
其中send只接受一个参数，这个参数就是作为请求体发送的数据。当我们不需要请求体的时候，我们必须要传递一个null，因为这个参数在有些浏览器中是必须的。我们调用send方法之后，就会把请求发送到服务器了。这个请求是同步操作的，所以js代码会等服务器响应之后再执行，当服务器响应之后，XHR对象中的属性就会填充数据。其中XHR中的属性有responseText意思是作为响应体返回的文本、responseXML意思是响应的内容类型是application/xml或text/xml、status意思是响应的HTTP请求状态、statusText意思是响应的HTTP状态描述。当响应成功后，HTTP状态码为2xx表示成功。当出现304表示资源未修改过，是从浏览器缓存中直接拿取的。
除此之外XHR对象还有一个readyState属性，其中0表示未初始化，没有调用open方法、1表示已打开，已经调用open方法，但是没有调用send方法、2表示已发送，已经调用send方法，但是没有收到响应、3表示接收中，已经收到部分响应、4表示已经完成，收到了所有响应，已经可以使用了。对于我们来说，我们比较关心4这个值，因为此时数据已经加载完成。
// 构造函数
let zss = new XMLHttpRequest();
zss.onreadystatechange = function() {
if (zss.status == 304 || (zss.status >= 200 && zss.status < 300)) {
console.log('zss', zss.responseText);
} else {
console.log('zss1', zss.status)
}
}
zss.open("get", "test.txt", true);
zss.send(null)
如果在收到响应之前取消异步请求，可以调用abort()方法。xhr.abort()当调用这个方法后，XHR对象会停止触发事件，并且阻止访问这个对象上任何与响应相关的属性。
FormData类型
平时我们在项目中会遇到表单数据序列化的问题，而FormData类型就是便于表单序列化。
let test = new FormData;
test.append("age", 18);
其中append()方法接收两个参数分别表示键和值，相当于表单字段名称和名称对应的值。我们可以添加多个键和值。我们也可以直接在new的时候将数据填充进去。使用FormData的另一个好处是不需要在给XHR对象设置请求头部，因为XHR能根据FormData实例传入的数据类型自动配置相应的头部。
