ajax调用get请求数据方法详解

在做网页开发的时候，经常需要从服务器拿点数据，比如用户信息、商品列表或者评论内容。如果每次都要刷新整个页面，体验就很差。这时候，用 ajax 调用 get 请求数据就成了最实用的招数。

什么是 ajax 的 get 请求

AJAX（Asynchronous JavaScript and XML）可以让网页在不刷新的情况下和服务器通信。而 GET 请求是最常见的请求方式之一，适合用来获取数据。比如你打开一个商品页，页面不动，但下面的推荐列表悄悄更新了，这背后很可能就是 ajax 的 get 请求在干活。

原生 JS 实现 ajax get 请求

不用框架也能搞定。原生 JavaScript 提供了 XMLHttpRequest 对象，可以手动发起请求。

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

这段代码向指定接口发起 get 请求，等数据回来后打印出来。虽然写法有点老派，但在轻量项目里完全够用。

用 jQuery 简化操作

如果你的项目用了 jQuery，那调用 ajax 就更省事了，$.get 方法一行就能搞定。

$.get('https://api.example.com/data', function(response) {
    console.log(response);
});

数据直接以 JSON 或字符串形式返回，还能链式调用，写起来顺手很多。

现代写法：fetch + async/await

现在越来越多项目转向 fetch，它基于 Promise，语法更清晰。

async function getData() {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
}

getData();

这种写法逻辑直观，错误处理也方便，配合 try/catch 更稳。

实际应用场景

比如你在做一个驱动下载工具页面，想根据用户选择的系统类型动态加载对应驱动列表。就可以用 ajax 发起 get 请求，传个 system=win10 参数过去，后端返回匹配的数据，前端再渲染出来。

$.get('/api/drivers', { system: 'win10' }, function(list) {
    let html = '';
    list.forEach(item => {
        html += '<li>' + item.name + ' - <a href="' + item.url + '">下载</a></li>';
    });
    $('#driver-list').html(html);
});

用户点选系统版本，下面列表立马更新，页面不跳转，体验自然流畅。

注意这些细节

get 请求的数据会拼在 URL 后面，所以别传敏感信息，比如密码或 token。另外，浏览器会缓存 get 请求，有时候你会发现数据没更新，其实是被缓存了。可以加个时间戳参数避免：

$.get('/api/data?t=' + Date.now(), function(res) {
    // 处理最新数据
});