default.html 1.5 KB

1234567891011121314151617181920212223242526272829303132333435
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <div id="myajax">Hello world!</div>
  10. <button type="button" onclick="fetchLoadTxt('20241212ajax.txt')">通过 AJAX 改变内容</button>
  11. <script type="text/javascript">
  12. function fetchLoadTxt(url) {// 定义 fetchLoadTxt 函数,用于加载指定 URL 的文本文件
  13. (async (url) => {// 使用立即调用的异步函数表达式 (IIFE)
  14. try {
  15. // 使用 fetch API 请求指定的 URL
  16. let response = await fetch(url);
  17. // 检查响应状态是否为 200(成功)
  18. if (!response.ok) {
  19. throw new Error(`HTTP error! status: ${response.status}`); // 抛出错误
  20. }
  21. // 读取响应文本
  22. let res = await response.text();
  23. console.log(res); // 在控制台输出响应文本
  24. // 更新页面内容
  25. document.getElementById("myajax").innerHTML = res; // 将响应文本更新到 div 中
  26. } catch (e) {
  27. // 捕获并处理错误
  28. console.log('Error:', e.message); // 在控制台输出错误信息
  29. }
  30. })(url); // 立即调用函数并传入 URL
  31. }
  32. </script>
  33. </body>
  34. </html>