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>
相关推荐
GDAL1 分钟前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1111 小时前
css实现div被图片撑开
前端·css
薛一半1 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
@蒙面大虾1 小时前
CSS综合练习——懒羊羊网页设计
前端·css
过期的H2O21 小时前
【H2O2|全栈】JS进阶知识(四)Ajax
开发语言·javascript·ajax
MarcoPage1 小时前
第十九课 Vue组件中的方法
前端·javascript·vue.js
.net开发1 小时前
WPF怎么通过RestSharp向后端发请求
前端·c#·.net·wpf
**之火2 小时前
Web Components 是什么
前端·web components
顾菁寒2 小时前
WEB第二次作业
前端·css·html
前端宝哥2 小时前
10 个超赞的开发者工具,助你轻松提升效率
前端·程序员