index.html 调用 ajax

小句2024-10-02 14:24

index.html

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

html 复制代码

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

b.json

html 复制代码

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

c.json

html 复制代码

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

启动 HTTP 服务器

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

html 复制代码

python -m http.server 8000

访问 HTML 文件

html 复制代码

http://localhost:8000/index.html