Ajax-XMLHttpRequest基本使用

最新推荐文章于 2025-09-03 19:48:45 发布

原创最新推荐文章于 2025-09-03 19:48:45 发布 · 705 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#ajax #前端 #javascript

收录于

前端学习之ajax 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了Ajax的基础原理，包括XMLHttpRequest对象的创建与使用，学习XHR的原因，以及如何通过一个具体的省份列表获取示例来展示其在与服务器通信中的应用。

一、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>