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>

相关推荐

  1. Ajax-XMLHttpRequest基本使用

    2024-04-04 05:56:02       16 阅读
  2. AJAX-XMLHttpRequest

    2024-04-04 05:56:02       23 阅读
  3. AJAX:XHR(XMLHttpRequest)与Fetch的区别与使用

    2024-04-04 05:56:02       15 阅读
  4. ajax函数库axios基本使用

    2024-04-04 05:56:02       31 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-04 05:56:02       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-04 05:56:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-04 05:56:02       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-04 05:56:02       20 阅读

热门阅读

  1. 重置gitlab root密码

    2024-04-04 05:56:02       16 阅读
  2. HJ11 数字颠倒

    2024-04-04 05:56:02       12 阅读
  3. css 固定表头

    2024-04-04 05:56:02       13 阅读
  4. Linux 内核的构建块:深入探索 C 结构体的应用

    2024-04-04 05:56:02       16 阅读
  5. 设计模式(17):中介者模式

    2024-04-04 05:56:02       11 阅读
  6. 【图像处理小知识】PIL Image 中的P和L模式

    2024-04-04 05:56:02       18 阅读
  7. Ubuntu终端多窗口分屏Terminator优化

    2024-04-04 05:56:02       12 阅读
  8. Centos7、ubuntu22.04.3安装php7.4,mysql8.0

    2024-04-04 05:56:02       26 阅读