AJAX(4)——XMLHttpRequest

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.rhkb.cn/news/408197.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MATLAB 手动实现点云投影滤波器 (76)

点云投影到邻近的精确拟合平面,减少噪声点,此为投影滤波器 MATLAB 手动实现点云投影滤波器(76) 一、投影滤波器简介二、实现步骤二、算法实现1.代码2.效果这里用到的投影方法和平面拟合方法以及生成平面方法都在以往文章有所实现,有兴趣可参考: MATLAB点云处理总目录 一…

C++动态规划及九种背包问题

目录 目录 一&#xff0c;动态规划 一&#xff09;&#xff0c;动态规划的定义 二&#xff09;&#xff0c;动态规划其他的相关概念&#xff08;也是使用条件&#xff09; 1&#xff0c;重叠子问题 2&#xff0c; 最优子结构 3&#xff0c;无后效性 三&#xff09;&…

dompdf导出pdf中文乱码显示问号?、换行问题、设置图片大小

环境&#xff1a;PHP 8.0 框架&#xff1a;ThinkPHP 8 软件包&#xff1a;phpoffice/phpword 、dompdf/dompdf 看了很多教程&#xff08;包括GitHub的issue、stackoverflow&#xff09;都没有解决、最终找到解决问题的根本&#xff01; 背景&#xff1a;用Word模板做转PDF…

【JavaEE初阶】IP协议

目录 &#x1f4d5;引言 &#x1f334;IP协议的概念 &#x1f333;IP数据报 &#x1f6a9;IPv4协议头格式 &#x1f6a9;IPv6的诞生 &#x1f3c0;拓展 &#x1f384;IP地址 &#x1f6a9;IP地址的格式&#xff1a; &#x1f6a9;IP地址的分类 &#x1f3c0;网段划分…

【第57课】SSRF服务端请求Gopher伪协议无回显利用黑白盒挖掘业务功能点

免责声明 本文发布的工具和脚本&#xff0c;仅用作测试和学习研究&#xff0c;禁止用于商业用途&#xff0c;不能保证其合法性&#xff0c;准确性&#xff0c;完整性和有效性&#xff0c;请根据情况自行判断。 如果任何单位或个人认为该项目的脚本可能涉嫌侵犯其权利&#xff0…

Unity动画模块 之 Animator中一些常见参数

本文仅作笔记学习和分享&#xff0c;不用做任何商业用途 本文包括但不限于unity官方手册&#xff0c;unity唐老狮等教程知识&#xff0c;如有不足还请斧正 我发现我忘了写Animator了&#xff0c;正好有些不常用的参数还没怎么认识,笔记来源于唐老狮 1.状态窗口参数 2.连线参数…

如何使用ssm实现学生公寓管理系统的设计与实现

TOC ssm106学生公寓管理系统的设计与实现jsp 绪论 1.1 研究背景 当前社会各行业领域竞争压力非常大&#xff0c;随着当前时代的信息化&#xff0c;科学化发展&#xff0c;让社会各行业领域都争相使用新的信息技术&#xff0c;对行业内的各种相关数据进行科学化&#xff0c;…

Qt第十八章 XML和Json格式解析

文章目录 JSON格式解析Json生成案例 XML简介与HTML的区别格式XML解析流的方式DOM XML生成 JSON与XML的区别比较 JSON 格式 JSON是一个标记符的序列。这套标记符包含六个构造字符、字符串、数字和三个字面名 六个构造字符 开始和结束数组&#xff1a;[ ]开始和结束对象&#x…

简易STL实现 | Vector的实现

1、内存管理 1、std::vector 维护了两个重要的状态信息&#xff1a;容量&#xff08;capacity&#xff1a;当前 vector 分配的内存空间大小&#xff09;和大小&#xff08;size&#xff1a; vector 当前包含的元素数量&#xff09; 2、当容量不足以容纳新元素时&#xff0c;s…

SSH 远程登录报错:kex_exchange_identification: Connection closed.....

一 问题起因 在公司,使用ssh登录远程服务器。有一天,mac终端提示:`kex_exchange_identification: Connection closed by remote host Connection closed by UNKNOWN port 65535`。 不知道为啥会出现这样的情形,最近这段时间登录都是正常的,不知道哪里抽风了,就提示这个。…

巴恩斯利蕨数学公式及源码实现——JavaScript版

为什么要写这篇文章 本篇接《张侦毅&#xff1a;巴恩斯利蕨数学公式及源码实现》。之前文章中源码的编程语言用的是Java&#xff0c;JDK的版本为8&#xff0c;现在我的JDK版本已经升级到22了&#xff0c;在新版本JDK中&#xff0c;原来的JApplet方法已经被废弃&#xff0c;不能…

鸿蒙实现在图片上进行标注

一.实现思路 现在需求是&#xff1a;后端会返回在这张图片上的相对位置&#xff0c;然后前端这边需要在图片上进行标注&#xff0c;就是画个框框圈起来&#xff0c;返回的数据里包括当前框的x,y坐标和图片大小&#xff0c;大体思路就是使用canvas绘制&#xff0c;使用鸿蒙的st…

vue-element-admin解决三级目录的KeepAlive缓存问题(详情版)

vue-element-admin解决三级目录的KeepAlive缓存问题&#xff08;详情版&#xff09; 本文章将从问题出现的角度看看KeepAlive的缓存问题&#xff0c;然后提出两种解决方法。本文章比较详细&#xff0c;如果只是看怎么解决&#xff0c;代码怎么改&#xff0c;请前往配置版。 一…

零工市场小程序应该有什么功能?

数字经济现如今正飞速发展&#xff0c;零工市场小程序在连接雇主与自由职业者方面发挥着越来越重要的作用。一个高效的零工市场小程序不仅需要具备基础的信息发布与匹配功能&#xff0c;还应该涵盖交易管理、安全保障以及个性化服务等多个方面。 那么&#xff0c;零工市场小程…

Ubuntu22.04下安装LDAP

目录 1 简单说明2 安装配置2.1 安装1、安装前准备2、安装 OpenLADP3、配置OpenLDAP4、设置基本组5、添加新组5、添加 OpenLDAP 用户 2.2 安装 LDAP 帐户管理器1、安装2、配置 LDAP 帐户管理器 3 简单使用3.1 创建一个组3.2 创建一个用户 总结 1 简单说明 之前写过在Centos下的…

nginx和tomcat负载均衡,动静分离

文章目录 一&#xff0c;tomcat1.tomca用途2.tomcat重要目录 二&#xff0c;nginx1.Nginx应用2.nginx作用3.nginx的正向代理和反向代理3.1正向代理3.2反向代理(单级)3.3反向代理(多级) 4.nginx负载均衡4.1Nginx支持的常见的分流算法1. 轮询(Round Robin):2.最少连接数(LeastCon…

[MRCTF2020]Hello_ misc

解压得一个png图片和一个flag.rar 图片拖入010editor 选择带zip头的这段蓝色全部复制&#xff0c;file-new-new Hex File&#xff0c;黏贴到新文件&#xff0c;另存为为1.zip 要密码,线索中断&#xff08;当然try to restore it.png&#xff0c;隐藏了zip压缩包&#xff0c;可…

uniapp - plugins的组件配置使用

点击进入到uniapp中mp-weixin的配置中 点击进入小程序的plugin的配置 在项目中&#xff0c;我们可引用插件的使用&#xff0c;例如一些快递100&#xff0c;点餐插件的业务引入 添加插件 在使用插件前&#xff0c;首先要在小程序管理后台的“设置-第三方服务-插件管理”中添加…

java ssl使用自定义证书或忽略证书

1.证书错误 Caused by: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target 2.生成客户端证书 openssl x509 -in <(openssl s_client -connect 192.168.11.19:8101 -prexit 2>/dev/null) -ou…

C HTML格式解析与生成

cmake报错替换 if(NOT MyHTML_BUILD_WITHOUT_THREADS OR NOT MyCORE_BUILD_WITHOUT_THREADS) set(CMAKE_THREAD_PREFER_PTHREAD 1) if (WIN32) set(CMAKE_USE_WIN32_THREADS_INIT ON) set(CMAKE_THREAD_PREFER_PTHREADS TRUE) set(THREADS_PR…