使用 XMLHttpRequest 对象

可参考：XMLHttpRequest：XMLHttpRequest() 构造函数 - Web API | MDN

三步简单使用

// 新建实例
const xhr = new XMLHttpRequest()  

// 设置请求方法和网址
xhr.open('请求方法', '请求url网址')  

// 无论成功失败都会触发此事件
xhr.addEventListener('loadend', () => {  
  // 响应结果  
  console.log(xhr.response)})  

// 发送
xhr.send()

设置查询参数

直接在 url 里手动拼接固然可行，但是依然可以使用 URLSearchParams 对象，然后再用一遍 toString，就能构建形似 参数名=值&参数名=值 的查询字符串：

1. 构建过程：

const pname = '浙江省'  
const cname = '温州市'  
const queryObj = new URLSearchParams({pname, cname})  
const queryStr = queryObj.toString()

2. 之后使用模板字符串：

const xhr = new XMLHttpRequest();  
xhr.open('GET',`https://hmajax.itheima.net/api/area?${queryStr}`);

数据提交

主要就是三点：

1. 要自己设置请求头（这在 axios 里面是自动设置的）
2. 数据要转成 JSON 字符串，而不能用原生 JS 对象
3. 请求数据加在 send() 方法里

const xhr = new XMLHttpRequest()  
xhr.open('请求方法', '请求url网址')  
xhr.addEventListener('loadend', () => {  
  console.log(xhr.response)})  
  
// 1. 告诉服务器，我传递的内容类型，是 JSON 字符串  
xhr.setRequestHeader('Content-Type', 'application/json')  
// 2. 准备数据并转成 JSON 字符串  
const user = { username: 'itheima007', password: '7654321' }  
const userStr = JSON.stringify(user)  
// 3. 发送请求体数据  
xhr.send(userStr)  

XMLHttpRequest 对象常用信息

以下面代码为例

const xhr = new XMLHttpRequest();  
xhr.open('GET',`https://hmajax.itheima.net/api/area?${queryStr}`);  

xhr.addEventListener('loadend', function () {  
    console.log(xhr)  
    console.log(xhr.response)  
    console.log(xhr.status)  
})

对象大概长这样：

里面常用的大概也就是 response 和 status：

1. xhr.response

输出：{"message":"获取地区县成功","list":["鹿城区","龙湾区","瓯海区","洞头县","永嘉县","平阳县","苍南县","文成县","泰顺县","瑞安市","乐清市"]}

有点像 data 的内容。

2. xhr.status

也就是 HTTP CODE 的内容，可以用下面的逻辑做成功或者失败校验：

if (xhr.status >= 200 && xhr.status < 300) {  
  resolve(JSON.parse(xhr.response))}
else {  
  reject(new Error(xhr.response))}