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