XMLHttpRequest的基本使用

最新推荐文章于 2024-03-28 02:18:33 发布

不取名字的码农。

最新推荐文章于 2024-03-28 02:18:33 发布

阅读量439

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/Adios_0403/article/details/132232480

版权

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. 注意1：这次没有 axios 帮我们了，我们需要自己设置请求头 Content - Type : application/json，来告诉服务器端，我们发过去的内容类型是JSON字符串，让他转成对应数据结构取值使用
2. 注意2：没有 axios 了，我们前端要传递的请求体数据，也没人帮我把 JS 对象转成 JSON 字符串了，需要我们自己转换
3. 注意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>

不取名字的码农。

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
XMLHttpRequest的基本使用

目标：使用XHR携带查询参数，展示某个省下属的城市列表。// 1. 告诉服务器，我传递的内容类型，是 JSON 字符串。* 2. 配置请求方法和请求 url 地址。// 1. 创建 XMLHttpRequest 对象。// 3. 监听 loadend 事件，接收响应结果。// 2. 配置请求方法和请求 url 地址。// 2. 准备数据并转成 JSON 字符串。// 3. 发送请求体数据。// 4. 发起请求。
复制链接

扫一扫