javascript AJAX是什么_怎样实现网页无刷新数据请求？

AJAX 是通过 XMLHttpRequest 或 fetch 实现异步通信以局部更新页面的技术，推荐使用基于 Promise 的 fetch 配合 async/await，并注意 loading 提示、防重复提交、请求取消和 CORS 跨域处理。

AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个网页的前提下，与服务器交换数据并更新部分页面内容的技术。它的核心是异步通信，用户操作时页面不“闪退”、不跳转，体验更流畅。

AJAX 的本质是 XMLHttpRequest 对象

现代 浏览器 都内置了 XMLHttpRequest（简称 XHR），它是实现 AJAX 的底层接口。虽然名字里有 XML，但现在更多用来传输 JSON 数据。

• 创建请求对象：const xhr = new XMLHttpRequest();
• 配置请求：xhr.open('GET', '/api/data', true);（第三个参数 true 表示异步）
• 设置响应处理：xhr.onload = function() { if (xhr.status === 200) {console.log(xhr.responseText); } };
• 发送请求：xhr.send();

用 fetch API 更简洁地发请求

fetch 是较新的标准，基于 Promise，语法更清晰，是目前推荐的主流方式。

• 基本 GET 请求：fetch('/api/user').then(res => res.json()).then(data => console.log(data));
• 带参数的 POST 请求：

  fetch('/api/login', {   method: 'POST',   headers: { 'Content-Type': 'application/json'},   body: JSON.stringify({username: 'admin', password: '123'}) }).then(res => res.json()).then(data => console.log(data));

• 注意：fetch 默认不带 cookie，如需携带，加 credentials: 'include'

用 async/await 让异步代码更易读

配合 async/await，可以把 Promise 链式调用写成类似同步的风格，减少嵌套，便于错误处理。

立即学习“Java 免费学习笔记（深入）”；

• 示例：

  async function loadUserData() {   try {     const res = await fetch('/api/profile');     const data = await res.json();     document.getElementById('name').textContent = data.name;   } catch (err) {console.error('请求失败：', err);   } }

• 适合封装成可复用的函数，比如 apiGet(url) 或 apiPost(url, data)

实际使用中要注意的关键点

光能发请求还不够，真实项目中这几个细节常被忽略：

• 状态提示：请求中显示 loading，失败时给用户友好提示（比如“网络异常，请重试”）
• 防重复提交：按钮点击后禁用，请求完成后恢复，避免用户狂点造成多次请求
• 取消请求：长列表滚动加载时，用户快速翻页，前一个请求应主动 abort（fetch 可用 AbortController）
• 跨域 问题 ： 前端 请求非同源接口时，需 后端 配置 CORS 响应头，否则浏览器会拦截