XMLHttpRequest - 基本使用
- AJAX 是浏览器于服务器通信的技术,采用 XMLHttpRequest 对象相关代码
- axios 是对 XHR 相关代码进行了封装,让我们只关心传递的接口参数
- 学习 XHR 也是了解 axios 内部与服务器交互过程的真正原理
- 语法如下:
<script>
const xhr = new XMLHttpRequest()
xhr.open('请求方法', '请求url网址')
xhr.addEventListener('loadend', () => {
// 响应结果
console.log(xhr.response)
})
xhr.send()
</script>
5. 需求:以一个需求来体验下原生 XHR 语法,获取所有省份列表并展示到页面上
6. 代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XMLHttpRequest_基础使用</title>
</head>
<body>
<p class="my-p"></p>
<script>
/**
* 目标:使用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()
</script>
</body>
</html>
XMLHttpRequest - 查询参数
- 什么是查询参数:携带额外信息给服务器,返回匹配想要的数据
- 查询参数原理要携带的位置和语法:
http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
- 所以,原生 XHR 想要自己在 url 后面携带查询参数字符串,没有 axios 帮助我们把 params 参数拼接到 url 字符串后面了
- 需求:查询河北省下属的城市列表
- 核心代码如下:
<script>
/**
* 目标:使用XHR携带查询参数,展示某个省下属的城市列表
*/
const xhr = new XMLHttpRequest()
xhr.open('GET', 'http://hmajax.itheima.net/api/city?pname=辽宁省')
xhr.addEventListener('loadend', () => {
console.log(xhr.response)
const data = JSON.parse(xhr.response)
console.log(data)
document.querySelector('.city-p').innerHTML = data.list.join('<br>')
})
xhr.send()
</script>
XMLHttpRequest - 数据提交
- 了解原生 XHR 进行数据提交的方式
- 需求:通过 XHR 完成注册用户功能
- 步骤和语法:
- 注意1:这次没有 axios 帮我们了,我们需要自己设置请求头 Content - Type : application/json,来告诉服务器端,我们发过去的内容类型是JSON字符串,让他转成对应数据结构取值使用
- 注意2:没有 axios 了,我们前端要传递的请求体数据,也没人帮我把 JS 对象转成 JSON 字符串了,需要我们自己转换
- 注意3:原生 XHR 需要在 send 方法调用时,传入请求体携带
<script>
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)
</script>