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
相关推荐
zhanshuo4 分钟前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang5 分钟前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
孤水寒月7 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀7 小时前
html初学者第一天
前端·html
Eiceblue14 小时前
使用 C# 发送电子邮件(支持普通文本、HTML 和附件)
开发语言·c#·html·visual studio
超级土豆粉15 小时前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
忧郁的蛋~16 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
然我16 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
小飞悟16 小时前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
然我20 小时前
React 开发通关指南:用 HTML 的思维写 JS🚀🚀
前端·react.js·html