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>
相关推荐
m0_748233888 分钟前
黑马程序员JavaWeb开发教程(前端部分) ---笔记分享
前端·笔记
温轻舟14 分钟前
前端开发 -- 自定义鼠标指针样式
开发语言·前端·javascript·css·html·温轻舟
天天打码33 分钟前
ThinkPHP项目如何关闭runtime下Log日志文件记录
android·java·javascript
冰镇屎壳郎1 小时前
前端安全 常见的攻击类型及防御措施
前端·安全·前端安全
2401_857617621 小时前
“无缝购物体验”:跨平台网上购物商城的设计与实现
java·开发语言·前端·安全·架构·php
2401_857439691 小时前
智慧社区电商系统:提升用户体验的界面设计
前端·javascript·php·ux
我是高手高手高高手1 小时前
ThinkPHP8多应用配置及不同域名访问不同应用的配置
linux·服务器·前端·php
小李小李不讲道理1 小时前
行动+思考 | 2024年度总结
前端·程序员·年终总结
uhakadotcom1 小时前
代码人生-精选文章周刊
前端·后端·github
csdnLN2 小时前
$.ajax() 对应事件done() 、fail()、always() 的用法
前端·javascript·ajax