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>
相关推荐
摇滚侠2 分钟前
css,控制超出部分隐藏,显示... css,控制超出部分不隐藏,换行
前端·css
IT_陈寒7 分钟前
Python 3.12 新特性实战:10个让你代码更优雅的隐藏技巧
前端·人工智能·后端
一 乐28 分钟前
海产品销售系统|海鲜商城购物|基于SprinBoot+vue的海鲜商城系统(源码+数据库+文档)
java·前端·javascript·数据库·vue.js·后端
艾小码28 分钟前
还在死磕模板语法?Vue渲染函数+JSX让你开发效率翻倍!
前端·javascript·vue.js
炒毛豆29 分钟前
vue3 + antd + print-js 实现打印功能(含输出PDF)
前端·javascript·vue.js
天天向上102430 分钟前
el-table动态添加行,删除行
前端·javascript·vue.js
小王码农记1 小时前
vue2中实现天气预报
前端·javascript·vue.js·echarts
我命由我123451 小时前
Element Plus 组件库 - Select 选择器 value 为 index 时的一些问题
开发语言·前端·javascript·vue.js·html·ecmascript·js
qq. 28040339842 小时前
js 原型链分析
开发语言·javascript·ecmascript
有趣的野鸭2 小时前
JAVA课程十一次实验课程主要知识点示例
java·前端·数据库