index.html 调用 ajax

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
相关推荐
augenstern4168 小时前
HTML面试题
前端·html
a别念m14 小时前
HTML5 离线存储
前端·html·html5
杨超越luckly15 小时前
HTML应用指南:利用GET请求获取全国永辉超市门店位置信息
大数据·信息可视化·数据分析·html·argis·门店
用户97044387811615 小时前
taobao商品详情数据获取实战方法
算法·html
ttod_qzstudio15 小时前
彻底移除 HTML 元素:element.remove() 的本质与最佳实践
前端·javascript·typescript·html
爱编程的喵16 小时前
前端路由深度解析:从传统页面到SPA的完美蜕变
前端·react.js·html
轻语呢喃16 小时前
前端路由:从传统页面跳转到单页应用(SPA)
前端·react.js·html
轻语呢喃18 小时前
<a href=‘ ./XXX ’>,<a href="#XXX">,<Link to="/XXX">本质与区别
前端·react.js·html
梁辰兴18 小时前
企业培训笔记:axios 发送 ajax 请求
前端·笔记·ajax·vue·axios·node
chao_7891 天前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html