XMLHtmlRequest

XMLHtmlRequest

• 简介

1. AJAX 是浏览器与服务器通信的技术，采用 XMLHttpRequest 对象相关代码
2. axios 是对 XHR 相关代码进行了封装，让我们只关心传递的接口参数

• 语法：四部曲

const xhr = new XMLHttpRequest()
xhr.open('请求方法', '请求url网址')
xhr.addEventListener('loadend', () => {
  // 响应结果
  console.log(xhr.response)
})
xhr.send()

• 示例

/**
* 目标：使用XMLHttpRequest对象与服务器通信
*  1. 创建 XMLHttpRequest 对象
*  2. 配置请求方法和请求 url 地址
*  3. 监听 loadend 事件，接收响应结果
*  4. 发起请求
*/
// 1. 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest()
// 2. 配置请求方法和请求 url 地址
xhr.open('GET', 'http://hmajax.itheima.net/api/province')
   // 3. 监听 loadend 事件，接收响应结果
   xhr.addEventListener('loadend', () => {
   console.log(xhr.response)
   const data = JSON.parse(xhr.response)
   console.log(data.list.join('<br>'))
   document.querySelector('.my-p').innerHTML = data.list.join('<br>')
})

// 4. 发起请求
xhr.send()

• 携带查询参数 params

1. XHR 如何携带查询参数：在调用 open 方法的时候，在 url? 后面按照指定格式拼接参数名和值
2. 但是多个查询参数，如果自己拼接很麻烦，这里用 URLSearchParams 把参数对象转成 “参数名=值&参数名=值” 格式的字符串，语法如下：

// 1. 创建 URLSearchParams 对象
const paramsObj = new URLSearchParams({
  参数名1: 值1,
  参数名2: 值2
})

// 2. 生成指定格式查询参数字符串
const queryString = paramsObj.toString()
// 结果：参数名1=值1&参数名2=值2

• 请求参数为 Body 参数（application/json）

注意1：但是这次没有 axios 帮我们了，我们需要自己设置请求头 Content-Type：application/json，来告诉服务器端，我们发过去的内容类型是 JSON 字符串，让他转成对应数据结构取值使用

注意2：没有 axios 了，我们前端要传递的请求体数据，也没人帮我把 JS 对象转成 JSON 字符串了，需要我们自己转换

注意3：原生 XHR 需要在 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)