ajax如何发送get请求，ajax发送get请求代码

AJAX发送GET请求的核心在于利用XMLHttpRequest对象或Fetch API向服务器发起异步HTTP请求，以获取数据并局部更新页面，从而避免整页刷新带来的性能损耗与用户体验中断，在现代Web开发中，这不仅是提升交互流畅度的关键技术，更是构建单页应用（SPA）和动态数据展示的基础。

核心实现机制与技术选型

实现AJAX GET请求主要有两种主流方式：传统的XMLHttpRequest（XHR）和现代浏览器原生支持的Fetch API，虽然两者都能达成目的，但在代码简洁性、可读性以及现代工程化实践中，Fetch API因其基于Promise的特性而成为首选方案。

传统XHR方式：兼容性与基础逻辑

XMLHttpRequest是AJAX技术的基石，尽管语法较为繁琐，但在需要支持极老旧浏览器（如IE8以下）的场景中仍具价值，其核心流程包括创建实例、配置请求头、设置状态监听以及发送请求。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText));
    }
};
xhr.send();

这种方式虽然直观，但回调地狱（Callback Hell）问题在复杂逻辑中尤为明显，且错误处理分散,不利于维护。

现代Fetch API：异步编程的最佳实践

Fetch API提供了更强大、更灵活的功能特性，其返回的是一个Promise对象,使得异步代码的编写更加同步化且易于管理。

fetch('/api/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        console.log('Success:', data);
    })
    .catch(error => {
        console.error('Error:', error);
    });

Fetch的优势在于其链式调用结构，允许开发者清晰地分离数据获取、状态检查、数据解析和错误处理四个阶段,极大地提升了代码的可读性和可维护性。

关键注意事项与最佳实践

在实际生产环境中，仅掌握语法是不够的，必须深入理解网络协议细节及潜在陷阱,以确保应用的健壮性。

参数编码与URL构建 GET请求的参数通常附加在URL后面，直接使用字符串拼接极易导致XSS攻击或URL编码错误，务必使用URLSearchParams对象来自动处理特殊字符的编码。

const params = new URLSearchParams({
    page: 1,
    keyword: '搜索内容'
});
fetch(`/api/search?${params}`)
    .then(res => res.json())
    .then(data => console.log(data));

错误处理的差异性 Fetch的一个显著特点是：只有当网络故障导致请求完全失败时，Promise才会被reject，如果服务器返回404或500状态码，Promise依然会被resolve，但response.ok属性为false，必须在.then()中显式检查response.ok，否则程序会误将错误响应当作成功数据解析,导致后续逻辑崩溃。

跨域资源共享（CORS） 当请求域名与当前页面域名不一致时，浏览器会拦截请求，此时需确保服务器端正确配置了Access-Control-Allow-Origin响应头，前端无法通过代码绕过CORS限制，这是浏览器的安全策略，开发者需与后端协同解决跨域问题,或使用代理服务器。

性能优化与用户体验提升

为了进一步发挥AJAX GET请求的价值,应从性能角度进行优化。

• 缓存策略：GET请求本质上是幂等的，适合利用浏览器缓存，通过设置合理的Cache-Control响应头，可以减少不必要的网络请求,加快页面加载速度。
• 防抖与节流：在搜索框等高频触发场景下，应对请求进行防抖（Debounce）处理，避免用户输入过程中发送大量冗余请求,减轻服务器压力。
• 取消请求：对于可能过时的请求（如快速切换标签页），使用AbortController可以及时中断未完成的请求,节省带宽并防止状态混乱。

const controller = new AbortController();
const signal = controller.signal;
fetch('/api/data', { signal })
    .then(res => res.json())
    .then(data => updateUI(data));
// 当不再需要结果时
controller.abort();

掌握AJAX GET请求不仅是掌握一个API，更是理解现代Web异步通信模型的关键，通过合理选用Fetch API、严谨处理错误与跨域、并结合缓存与取消机制，可以构建出高效、稳定且用户体验极佳的Web应用。

相关问答

Q1: Fetch API和XMLHttpRequest的主要区别是什么？ A: Fetch API基于Promise，支持更现代的异步编程风格（async/await），代码更简洁且易于组合；而XHR基于回调函数，容易陷入回调地狱，Fetch默认不携带Cookie（需配置credentials: 'include'），且对HTTP状态码的处理逻辑不同（仅网络错误才reject）,而XHR默认携带Cookie且通过status属性判断状态。

Q2: 如何在GET请求中处理JSON数据？ A: 在获取响应后，需调用response.json()方法将响应体解析为JSON对象，由于该方法也返回Promise，因此需要在其后的.then()链中处理解析后的数据，若解析失败（如返回的不是有效JSON格式），则会触发.catch()中的错误处理逻辑。

互动环节 你在实际开发中遇到过哪些AJAX请求相关的棘手问题？欢迎在评论区分享你的解决方案或遇到的坑,我们一起探讨优化思路。