利用ajax原理中的XMLHttpRequest对象实现异步请求

ajax实现异步请求的原理,是通过浏览器内置的XMLHttpRequest对象发送异步请求的,这里展示如何利用XMLHttpRequest对象实现简易的异步请求:

GET请求方式:

<!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>
  <script>
    // 创建XMLHttpRequest对象
    const xhr = new XMLHttpRequest()
    // 调用open方法传入请求方式和请求的url
    xhr.open('GET', 'http://hmajax.itheima.net/api/province')
    // 绑定加载完成事件
    xhr.addEventListener('loadend', () => {
      console.log(JSON.parse(xhr.response))
    })
    // 放送请求
    xhr.send()
  </script>
</body>
</html>

如果GET请求方式需要添加查询参数,直接在url路径后面通过?加在后面即可。

POST请求方式:

<!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>
  <script>
    // 创建XMLHttpRequest对象
    const xhr = new XMLHttpRequest()
    // 调用open方法传入请求方式和请求的url
    xhr.open('POST', 'http://hmajax.itheima.net/api/register')
    // 绑定加载完成事件
    xhr.addEventListener('loadend', () => {
      console.log(JSON.parse(xhr.response))
    })
    // 设置xhr的请求头
    xhr.setRequestHeader('Content-Type', 'application/json')
    // 模拟提交的数据
    const obj = {
      username: 'xhr2024730',
      password: '12345654321'
    }
    // 将对象数据转为json字符串
    const objStr = JSON.stringify(obj)
    // 放送请求
    xhr.send(objStr)
  </script>
</body>
</html>

使用post请求方式进行提交数据时,需要添加请求头中的Content-Type属性。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值