index.html 调用 ajax

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>AJAX 请求示例</title>
  <script>
    // 封装 Ajax 为公共函数:传入回调函数 success 和 fail
    function myAjax (url, success, fail) {
      // 1、创建XMLHttpRequest对象
      var xmlhttp
      if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest()
      } else {
        // 兼容IE5、IE6浏览器。不写也没关系
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')
      }
      // 2、发送请求
      xmlhttp.open('GET', url, true)
      xmlhttp.send()
      // 3、服务端响应
      xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
          var obj = JSON.parse(xmlhttp.responseText)
          console.log('数据返回成功:' + obj)
          success && success(xmlhttp.responseText)
        } else {
          // 这里的 && 符号,意思是:如果传了 fail 参数,就调用后面的 fail();如果没传 fail 参数,就不调用后面的内容。因为 fail 参数不一定会传。
          fail && fail(new Error('接口请求失败'))
        }
      }
    }

    // 单次调用 ajax
    function singleAjaxCall () {
      myAjax('a.json', (res) => {
        console.log('单次调用结果:', res)
      }, (err) => {
        console.error('单次调用失败:', err)
      })
    }

    // 多次调用 ajax。接口请求顺序:a --> b --> c
    function multipleAjaxCalls () {
      myAjax('a.json', (res) => {
        console.log('a.json 结果:', res)
        myAjax('b.json', (res) => {
          console.log('b.json 结果:', res)
          myAjax('c.json', (res) => {
            console.log('c.json 结果:', res)
          }, (err) => {
            console.error('c.json 请求失败:', err)
          })
        }, (err) => {
          console.error('b.json 请求失败:', err)
        })
      }, (err) => {
        console.error('a.json 请求失败:', err)
      })
    }

    window.onload = function () {
      singleAjaxCall()
      multipleAjaxCalls()
    };
  </script>
</head>

<body>
  <h1>AJAX 请求示例</h1>
</body>

</html>

创建 JSON 文件

a.json

{
    "message": "这是 a.json 的数据"
}

b.json

{
    "message": "这是 b.json 的数据"
}

c.json

{
    "message": "这是 c.json 的数据"
}

启动 HTTP 服务器

确保所有文件都在同一个目录下,然后启动 HTTP 服务器。

python -m http.server 8000

访问 HTML 文件

http://localhost:8000/index.html
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值