AJAX(4)——XMLHttpRequest

devtools/2024/10/20 11:40:18/

XMLHttpRequest

定义:XMLHttpRequest(XHR)对象用于与服务器交互。通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL,获取数据。这允许网页在不影响用于操作的情况下,更新页面的局部内容。XMLHttpRequest在AJAX编程中被大量使用

关系:axios内部采用XMLHttpRequest与服务器交互


使用XMLHttpRequest

步骤:

  1. 创建XMLHttpRequest对象
  2. 配置请求方法和请求URL地址
  3. 监听loadend事件,接收响应结果
  4. 发起请求
<body><script>const xhr = new XMLHttpRequest()//配置请求地址xhr.open('GET', 'http://hmajax.itheima.net/api/province')//监听loadend,接收响应结果xhr.addEventListener('loadend', () => {console.log(xhr.response);   获取响应数据const data = JSON.parse(xhr.response)    //转换为对象console.log(data.list);})//发起请求xhr.send()</script>

查询参数 

语法:

http://xxx.com/xxx/xxx?参数名=值1&参数名=值2

    const xhr = new XMLHttpRequest()xhr.open('GET', 'http://hmajax.itheima.net/api/city?pname=辽宁省')xhr.addEventListener('loadend', () => {console.log(xhr.response);})xhr.send()

 

 XMLHttpRequest数据提交

请求头设置Content-Type:application/json

请求体携带JSON

 

    //XHR数据提交document.querySelector('.btn').addEventListener('click', () => {const xhr = new XMLHttpRequest()xhr.open('POST', 'http://hmajax.itheima.net/api/register')xhr.addEventListener('loadend', () => {console.log(xhr.response);})//设置请求头xhr.setRequestHeader('Content-Type', 'application/json')const obj = {username: 'itheima908',password: '765421'}const str = JSON.stringify(obj)//设置请求体,发送请求xhr.send(str)})

 


http://www.ppmy.cn/devtools/102443.html

相关文章

Python编程进阶题

Python进阶题目讲解周报 1. 引言 在这份周报中&#xff0c;我们将深入探讨Python编程中的进阶题目&#xff0c;涵盖函数式编程、面向对象编程、错误处理、高级数据结构等主题。我们的目标是帮助您提升Python编程技能&#xff0c;解决更复杂的问题。 2. 函数式编程 2.1 Lamb…

prometheus 运维中遇到的问题

1.Lifecycle API is not enabled.# prometheus启动后修改配置文件就需要再重启生效 可以通过以下方式 热加载 curl -X POST http://localhost:9090/-/reload 请求接口后返回 Lifecycle API is not enabled. 那么就是启动的时候没有开启热更新配置&#xff0c;需要在启动的命…

黑神话悟空配置要求_2024年黑神话悟空游戏电脑配置推荐

《黑神话&#xff1a;悟空》作为一款采用虚幻引擎打造的高品质游戏&#xff0c;对硬件配置有着一定的要求。包括操作系统、处理器、内存、显卡等多方面需求。有些同学一直问&#xff0c;黑神话悟空配置要求是什么&#xff1f;下面小编就针对这个问题给大家介绍黑神话悟空官方配…

网络安全可以从事哪些岗位岗位职责是什么网络安全专业的就业前景

网络安全可以从事哪些岗位 伴随着社会的发展&#xff0c;网络安全被列为国家安全战略的一部分&#xff0c;因此越来越多的行业开始迫切需要网安人员&#xff0c;也有不少人转行学习网络安全。那么网络安全可以从事哪些岗位?岗位职责是什么?相信很多人都不太了解&#xff0c;…

监控摄像头和电脑监控软件如何选择?它们有什么区别吗?保姆式详细解析,你不容错过!

在信息化时代&#xff0c;无论是家庭安全还是企业管理&#xff0c;监控设备都扮演着至关重要的角色。然而&#xff0c;面对监控摄像头和电脑监控软件这两种选择&#xff0c;你是否曾感到困惑&#xff1f;它们究竟有何不同&#xff1f;又该如何根据自身需求做出最佳选择呢&#…

OpenCV几何图像变换(8)调整图像大小的函数resize()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 resize 函数调整图像 src 的大小&#xff0c;使其缩小或放大至指定的大小。需要注意的是&#xff0c;初始的 dst 类型或大小不被考虑。相反&…

你见过这样的个性化AI助手吗?让AI助手跟搭积木一样,搭配出不一样的应用场景!

AI工具那么多&#xff0c;不符合我的场景怎么办&#xff1f; 在这个数字化飞速发展的时代&#xff0c;AI工具如星辰般璀璨&#xff0c;令人目不暇接。然而&#xff0c;面对如此众多的选择&#xff0c;如何找到一款真正适合自己的工具呢&#xff1f;今天&#xff0c;我将为你找…

Java笔试面试题AI答之集合(10)

文章目录 53. 为什么HashMap中String、Integer这样的包装类适合作为K &#xff1f;54. 如果使用Object作为HashMap的Key&#xff0c;应该怎么办呢 &#xff1f;55. HashMap为什么不直接使用hashCode()处理后的哈希值直接作为table的下标 &#xff1f;56. TreeMap和TreeSet 在排…