Ajax动态异步加载核心是请求发起、响应处理和DOM更新三步闭环；推荐用fetch加载HTML片段，兼容场景用XHR，JSON数据需安全渲染，并注意跨域与SEO限制。
用 JavaScript 实现 Ajax 动态异步加载，核心是不刷新页面就更新局部内容。关键不在“用什么库”，而在于理解请求发起、响应处理和 DOM 更新这三步闭环。
用 fetch API 加载 HTML 片段（推荐）
现代浏览器默认支持 fetch，语法简洁、基于 Promise，适合大多数场景：
- 发送 GET 请求获取 HTML 字符串，直接插入目标容器
- 必须检查 response.ok 判断 HTTP 状态，不能只靠
.then() - 错误时主动写入提示内容，避免容器空白
示例代码：
function loadSection(url, targetId) {
const container = document.getElementById(targetId);
container.innerHTML = '<p>加载中...</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a></a>”；</p>'; // 可选：加简易 loading
fetch(url)
.then(response => {
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.text(); // 若返回纯 HTML
})
.then(html => {
container.innerHTML = html;
})
.catch(err => {
container.innerHTML = `<p>加载失败：${err.message}</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/gongju/2847" title="OpenJDK 24"><img
src="https://img.php.cn/upload/manual/001/431/639/6ad0919a12f37751.png" alt="OpenJDK 24" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/gongju/2847" title="OpenJDK 24">OpenJDK 24</a>
<p></p>
</div>
<a href="/xiazai/gongju/2847" title="OpenJDK 24" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>`;
console.error('Ajax 加载出错', err);
});
}
// 调用：点击按钮时加载 content.html 到 #main
document.querySelector('#loadBtn').onclick = () => loadSection('content.html', 'main');
用 XMLHttpRequest 处理兼容性或细粒度控制
需要支持较老浏览器（如 IE11），或需监听进度、手动设置超时、取消请求时，仍可用原生 XHR：
- readyState === 4 表示响应完成，status === 200 才代表成功
- 建议设
xhr.timeout = 8000防止请求挂起，配合ontimeout处理 - 可监听
onprogress实现进度条（适用于大文件或上传）
简明写法：
function loadWithXhr(url, targetId) {
const xhr = new XMLHttpRequest();
const container = document.getElementById(targetId);
container.innerHTML = '正在连接...';
xhr.open('GET', url, true);
xhr.timeout = 8000;
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
container.innerHTML = xhr.responseText;
} else {
container.innerHTML = `请求失败：${xhr.status}`;
}
};
xhr.ontimeout = () => container.innerHTML = '请求超时，请重试';
xhr.onerror = () => container.innerHTML = '网络错误，请检查连接';
xhr.send();
}
加载 JSON 数据再渲染（更常见且可控）
多数现代接口返回 JSON 而非 HTML，前端负责结构拼接，更灵活也更利于维护：
- 服务器返回结构化数据（如
{title: "新闻标题", content: "..."}） - 用模板字符串或
createElement组装 DOM，避免 XSS 风险（尤其对用户生成内容） - 可统一处理空状态、分页逻辑、缓存策略
例如：
fetch('/api/article?id=123')
.then(r => r.json())
.then(data => {
const el = document.getElementById('article');
el.innerHTML = `
<h2>${escapeHtml(data.title)}</h2>
<div>${escapeHtml(data.content)}</div>
`;
});
function escapeHtml(str) {
const div = document.createElement('div');
div.textContent = str;
return div.innerHTML;
}
注意跨域与 SEO 的实际影响
异步加载不是万能的，两个现实约束要提前考虑：
-
跨域请求：若目标 URL 不同源，服务端必须返回
Access-Control-Allow-Origin头，否则浏览器直接拦截；开发时可用本地代理绕过 - SEO 友好性：纯客户端加载的内容，搜索引擎爬虫可能无法执行 JS，导致内容不可索引；关键内容建议服务端渲染（SSR）或生成静态快照
