当前位置: 首页 > news >正文

Ajax-XMLHttpRequest基本使用

一、Ajax的原理

就是XMLHttpRequest对象。

二、为什么学习XHR?

有更多与服务器数据通信方式,了解Ajax内部。

三、XHR使用步骤

1.创建XHR对象

2.调用open方法,设置url和请求方法

3.监听loadend事件,接受结果

4.调用send方法,发起请求

四、具体示例

将省份列表展示出来

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p class="my-p"></p><script>const xhr=new XMLHttpRequest()xhr.open('get','http://hmajax.itheima.net/api/province')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>')})xhr.send()</script>
</body>
</html>

http://www.lryc.cn/news/331088.html

相关文章:

  • 门控循环单元(GRU)
  • 789. 数的范围 (二分学习)左端大右,右端小左
  • docker logs 查找日志常用命令
  • 百卓Smart管理平台 importexport.php SQL注入漏洞复现(CVE-2024-27718)
  • PHP教程_PHP5函数str_replace替换字符串中的字符
  • Word的”交叉引用“和”插入题注“快捷键设置
  • 小白从0学习ctf(web安全)
  • 【嵌入式开发 Linux 常用命令系列 7.4 -- awk 处理文件名,去除后缀只保留文件名】
  • Linux重点思考(中)--端口/静态内存/负载/日志
  • 【Go】五、流程控制
  • 数据开发-面试真题。
  • 如何使用免费的ChatGpt3.5
  • Kafka硬核干货
  • 分享几个可以免费使用的GPT网站吧
  • MySQL进阶-----前缀索引、单例与联合索引
  • HTTP——Cookie
  • Scala大数据开发
  • windows无法使用hadoop报错:系统找不到路径
  • 从0配置React
  • File和IO流
  • 2024系统架构师---解释器架构风格的概念与应用
  • makefile01
  • 计算机视觉之三维重建(6)---多视图几何(上)
  • 蓝桥杯:全球变暖(python,BFS,DFS)(栈溢出的处理办法)
  • Qt C++ | Qt 元对象系统、信号和槽及事件(第一集)
  • Python 抽象类
  • 达梦数据库自动备份(全库)+还原(全库) 控制台
  • android AndroidAutoSize 取消第三方库适配问题(两个步骤)
  • 【Java 多线程】从源码出发,剖析Threadlocal的数据结构
  • Sy6 编辑器vi的应用(+shell脚本3例子)